Mapbox - Popups & Tooltips¶

Popup on click, tooltip on hover, legend, and hover effects.

In [ ]:

# %pip install anymap-ts

# %pip install anymap-ts

In [ ]:

from anymap_ts import MapboxMap

m = MapboxMap(center=[-122.4, 37.8], zoom=10)

geojson = {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {"type": "Point", "coordinates": [-122.4194, 37.7749]},
            "properties": {"name": "San Francisco", "pop": 884000},
        },
        {
            "type": "Feature",
            "geometry": {"type": "Point", "coordinates": [-122.2712, 37.8044]},
            "properties": {"name": "Oakland", "pop": 433000},
        },
    ],
}
m.add_geojson(geojson, name="cities")
m

from anymap_ts import MapboxMap m = MapboxMap(center=[-122.4, 37.8], zoom=10) geojson = { "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": {"type": "Point", "coordinates": [-122.4194, 37.7749]}, "properties": {"name": "San Francisco", "pop": 884000}, }, { "type": "Feature", "geometry": {"type": "Point", "coordinates": [-122.2712, 37.8044]}, "properties": {"name": "Oakland", "pop": 433000}, }, ], } m.add_geojson(geojson, name="cities") m

Add Popup on Click¶

In [ ]:

m.add_popup(
    "cities", properties=["name", "pop"], template="<b>{name}</b><br>Population: {pop}"
)

m.add_popup( "cities", properties=["name", "pop"], template="{name}
Population: {pop}" )

Add Tooltip on Hover¶

In [ ]:

m.add_tooltip("cities", properties=["name"], template="{name}")

m.add_tooltip("cities", properties=["name"], template="{name}")

Add Legend¶

In [ ]:

m.add_legend(
    title="Cities",
    labels=["San Francisco", "Oakland"],
    colors=["#3388ff", "#ff8833"],
    position="bottom-right",
)

m.add_legend( title="Cities", labels=["San Francisco", "Oakland"], colors=["#3388ff", "#ff8833"], position="bottom-right", )

Add Hover Effect¶

Use add_hover_effect for hover styling on vector layers.

In [ ]:

m.add_hover_effect(
    layer_id="cities",
    highlight_color="#ffff00",
    highlight_opacity=0.8,
)

m.add_hover_effect( layer_id="cities", highlight_color="#ffff00", highlight_opacity=0.8, )