Add components

Add components to the map

This notebook demonstrates how to add various components to the map, including legends, colorbars, text, and HTML elements.

Uncomment the following line to install leafmap if needed.

In [1]:

Copied!

# %pip install "leafmap[maplibre]"
# %pip install "leafmap[maplibre]"

In [2]:

Copied!

import leafmap.maplibregl as leafmap
import leafmap.maplibregl as leafmap

In [3]:

m = leafmap.Map(center=[-100, 40], zoom=3, style="positron")

## Add a legend
url = "https://www.mrlc.gov/geoserver/mrlc_display/NLCD_2021_Land_Cover_L48/wms?bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.1.1&request=GetMap&srs=EPSG:3857&transparent=true&width=256&height=256&layers=NLCD_2021_Land_Cover_L48"
m.add_wms_layer(url, name="NLCD 2021")
m.add_legend(
    title="NLCD Land Cover Type",
    builtin_legend="NLCD",
    bg_color="rgba(255, 255, 255, 0.5)",
    position="bottom-left",
)

# Add a colorbar
dem = "https://github.com/opengeos/datasets/releases/download/raster/srtm90.tif"
m.add_cog_layer(
    dem, name="DEM", colormap_name="terrain", rescale="0, 4000", fit_bounds=False
)
m.add_colorbar(
    cmap="terrain", vmin=0, vmax=4000, label="Elevation (m)", position="bottom-right"
)

# Add text
text = "Awesome Map!"
m.add_text(text, position="top-left")

# Add HTML content
html = """
<html>
<style>
body {
  font-size: 20px;
}
</style>
<body>

<span style='font-size:100px;'>&#128640;</span>
<p>I will display &#128641;</p>
<p>I will display &#128642;</p>

</body>
</html>
"""
m.add_html(html, bg_color="transparent")
m

m = leafmap.Map(center=[-100, 40], zoom=3, style="positron") ## Add a legend url = "https://www.mrlc.gov/geoserver/mrlc_display/NLCD_2021_Land_Cover_L48/wms?bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.1.1&request=GetMap&srs=EPSG:3857&transparent=true&width=256&height=256&layers=NLCD_2021_Land_Cover_L48" m.add_wms_layer(url, name="NLCD 2021") m.add_legend( title="NLCD Land Cover Type", builtin_legend="NLCD", bg_color="rgba(255, 255, 255, 0.5)", position="bottom-left", ) # Add a colorbar dem = "https://github.com/opengeos/datasets/releases/download/raster/srtm90.tif" m.add_cog_layer( dem, name="DEM", colormap_name="terrain", rescale="0, 4000", fit_bounds=False ) m.add_colorbar( cmap="terrain", vmin=0, vmax=4000, label="Elevation (m)", position="bottom-right" ) # Add text text = "Awesome Map!" m.add_text(text, position="top-left") # Add HTML content html = """ 🚀

I will display 🚁

I will display 🚂

""" m.add_html(html, bg_color="transparent") m