Skip to content

Add components

image image image

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.

1
# %pip install "leafmap[maplibre]"
1
import leafmap.maplibregl as leafmap
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
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"
layers = "NLCD_2021_Land_Cover_L48"
m.add_wms_layer(url, layers=layers, 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