InfoBox and GradientBox Controls Example¶

This notebook demonstrates how to use the mapbox-gl-infobox plugin with AnyMap's MapLibre maps. It shows both the InfoBox (feature attributes) and GradientBox (value legend) controls.

In [ ]:

from anymap import MapLibreMap

from anymap import MapLibreMap

Create a map and add a demo layer¶

In [ ]:

# Create a MapLibre map and add world cities from the provided dataset
import json, urllib.request

m = MapLibreMap(center=[0, 20], zoom=2.5, style="liberty", height="600px")

with urllib.request.urlopen(
    "https://github.com/opengeos/datasets/releases/download/world/world_cities.geojson"
) as resp:
    world_cities = json.load(resp)

m.add_geojson_layer(
    layer_id="world-cities",
    geojson_data=world_cities,
    layer_type="circle",
    paint={
        "circle-radius": 3,
        "circle-color": "#e11d48",
        "circle-opacity": 0.7,
        "circle-stroke-width": 0.5,
        "circle-stroke-color": "#ffffff",
    },
)

m

# Create a MapLibre map and add world cities from the provided dataset import json, urllib.request m = MapLibreMap(center=[0, 20], zoom=2.5, style="liberty", height="600px") with urllib.request.urlopen( "https://github.com/opengeos/datasets/releases/download/world/world_cities.geojson" ) as resp: world_cities = json.load(resp) m.add_geojson_layer( layer_id="world-cities", geojson_data=world_cities, layer_type="circle", paint={ "circle-radius": 3, "circle-color": "#e11d48", "circle-opacity": 0.7, "circle-stroke-width": 0.5, "circle-stroke-color": "#ffffff", }, ) m

Add InfoBox control¶

In [ ]:

# Show feature attributes when hovering/clicking on cities
m.add_infobox_control(
    position="bottom-right",
    layer_id="world-cities",
    formatter="<div style='margin: 8px; font-size: 14px;'><b>{{name}}</b><br/>Population: {{population}}</div>",
    collapsed=False,
)
# m

# Show feature attributes when hovering/clicking on cities m.add_infobox_control( position="bottom-right", layer_id="world-cities", formatter="

{{name}}
Population: {{population}}

", collapsed=False, ) # m

Add GradientBox control¶

In [ ]:

# Display a population legend for the dataset
m.add_gradientbox_control(
    position="top-left",
    layer_id="world-cities",
    weight_property="population",
    min_value=0,
    max_value=40000000,
    colors=["#ffffcc", "#a1dab4", "#41b6c4", "#225ea8", "#ffffff"],
    collapsed=True,
)
# m

# Display a population legend for the dataset m.add_gradientbox_control( position="top-left", layer_id="world-cities", weight_property="population", min_value=0, max_value=40000000, colors=["#ffffcc", "#a1dab4", "#41b6c4", "#225ea8", "#ffffff"], collapsed=True, ) # m

In [ ]: