Mapbox - UI Controls¶

Colorbar, search, measure, print, coordinates, time slider, opacity slider, style switcher.

In [ ]:

# %pip install anymap-ts

# %pip install anymap-ts

In [ ]:

from anymap_ts import MapboxMap

m = MapboxMap(center=[-122.4, 37.8], zoom=10)
m.add_geojson(
    {
        "type": "FeatureCollection",
        "features": [
            {
                "type": "Feature",
                "geometry": {"type": "Point", "coordinates": [-122.4194, 37.7749]},
                "properties": {"name": "San Francisco", "time": 12},
            },
        ],
    },
    name="points",
)
m

from anymap_ts import MapboxMap m = MapboxMap(center=[-122.4, 37.8], zoom=10) m.add_geojson( { "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": {"type": "Point", "coordinates": [-122.4194, 37.7749]}, "properties": {"name": "San Francisco", "time": 12}, }, ], }, name="points", ) m

Add Colorbar¶

In [ ]:

m.add_colorbar(colormap="viridis", vmin=0, vmax=100, label="Values", units="units")

m.add_colorbar(colormap="viridis", vmin=0, vmax=100, label="Values", units="units")

Add Search Control¶

In [ ]:

m.add_search_control(position="top-left", placeholder="Search places...")

m.add_search_control(position="top-left", placeholder="Search places...")

Add Measure Control¶

In [ ]:

m.add_measure_control(position="top-right", default_mode="distance")

m.add_measure_control(position="top-right", default_mode="distance")

Add Print Control¶

In [ ]:

m.add_print_control(position="top-right")

m.add_print_control(position="top-right")

Add Coordinates Control¶

In [ ]:

m.add_coordinates_control(position="bottom-left", precision=5)

m.add_coordinates_control(position="bottom-left", precision=5)

Add Time Slider¶

In [ ]:

m.add_time_slider(
    layer_id="points",
    property="time",
    min_value=0,
    max_value=24,
    label="Hour",
)

m.add_time_slider( layer_id="points", property="time", min_value=0, max_value=24, label="Hour", )

Add Opacity Slider¶

In [ ]:

m.add_opacity_slider(layer_id="points", position="top-right", label="Points opacity")

m.add_opacity_slider(layer_id="points", position="top-right", label="Points opacity")

Add Style Switcher¶

In [ ]:

m.add_style_switcher(
    styles={
        "Streets": "mapbox://styles/mapbox/streets-v12",
        "Dark": "mapbox://styles/mapbox/dark-v11",
        "Satellite": "mapbox://styles/mapbox/satellite-streets-v12",
    },
    position="top-right",
)

m.add_style_switcher( styles={ "Streets": "mapbox://styles/mapbox/streets-v12", "Dark": "mapbox://styles/mapbox/dark-v11", "Satellite": "mapbox://styles/mapbox/satellite-streets-v12", }, position="top-right", )