132 folium colorbar
import ee
import geemap.foliumap as geemap
Unlike the ipyleaflet plotting backend, folium does not support adding matplotlib colormap directly. One workaround is to save the maplotlib colormap as an image, then add the image to the map. Let's first create a colormap.
Create a colormap using specified parameters.
params = {
"width": 4.0,
"height": 0.3,
"vmin": 0,
"vmax": 6000,
"cmap": "terrain",
"label": "Elevation (m)",
"orientation": "horizontal",
"transparent": False,
}
Save the colormap as an image.
geemap.save_colorbar("colorbar.png", **params)
You can also create use the m.add_colormap() method to add a colormap. Under the hood, it generate a colormap as an image, then add it to the map. You need to specified the position of the colormap using a tuple (x, y), which represents the percentage [0-100] from the lower-left corner. If the map size changes, you might need to change the colormap position as well.
Add a horizontal colormap to the map.
Map = geemap.Map()
image = ee.Image("USGS/SRTMGL1_003")
vis_params = {
"min": 0,
"max": 6000,
"palette": "terrain",
}
Map.addLayer(image, vis_params, "SRTM")
Map.add_colormap(position=(55, 5), **params)
Map
Make the colormap background transparent.
params["transparent"] = True
Map = geemap.Map()
Map.addLayer(image, vis_params, "SRTM")
Map.add_colormap(position=(55, 5), **params)
Map
Change the orientation to vertical.
params = {
"width": 0.3,
"height": 4,
"vmin": 0,
"vmax": 6000,
"cmap": "terrain",
"label": "Elevation (m)",
"orientation": "vertical",
"transparent": False,
}
Map = geemap.Map()
Map.addLayer(image, vis_params, "SRTM")
Map.add_colormap(position=(85, 5), **params)
Map
To make the colormap position fixed at four corners (i.e., bottomright, bottomleft, topright, topleft), you need to make the image available through an HTTP URL (e.g., imgur). Local file paths are not supported. Use m.add_image() to add the colormap image to the map.
Map = geemap.Map()
Map.addLayer(image, vis_params, "SRTM")
image = "https://i.imgur.com/SpmE7Cs.png"
Map.add_image(image, position="bottomright")
Map
