Style Switcher & Opacity Slider¶

This notebook demonstrates:

• Style Switcher: A dropdown to switch between map styles
• Opacity Slider: A per-layer slider to adjust opacity

In [ ]:

# %pip install anymap-ts

# %pip install anymap-ts

Style Switcher¶

Add a dropdown control to switch between basemap styles.

In [ ]:

from anymap_ts import Map

m = Map(center=[-122.4, 37.8], zoom=10)
m.add_style_switcher(
    styles={
        "Light": "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json",
        "Dark": "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json",
        "Voyager": "https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json",
    },
    position="top-right",
)
m

from anymap_ts import Map m = Map(center=[-122.4, 37.8], zoom=10) m.add_style_switcher( styles={ "Light": "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json", "Dark": "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json", "Voyager": "https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json", }, position="top-right", ) m

Remove Style Switcher¶

In [ ]:

m.remove_style_switcher()

m.remove_style_switcher()

Opacity Slider¶

Add a slider to control the opacity of a map layer.

In [ ]:

m2 = Map(center=[-122.4, 37.8], zoom=10)

# Add a satellite tile layer
m2.add_tile_layer(
    "https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}",
    name="satellite",
    attribution="Google",
)

# Add opacity slider for the satellite layer
m2.add_opacity_slider("satellite", label="Satellite Opacity")
m2

m2 = Map(center=[-122.4, 37.8], zoom=10) # Add a satellite tile layer m2.add_tile_layer( "https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}", name="satellite", attribution="Google", ) # Add opacity slider for the satellite layer m2.add_opacity_slider("satellite", label="Satellite Opacity") m2

Multiple Opacity Sliders¶

In [ ]:

m3 = Map(center=[-122.4, 37.8], zoom=10)

m3.add_tile_layer(
    "https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}",
    name="satellite",
    attribution="Google",
)

m3.add_tile_layer(
    "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
    name="osm",
    attribution="OpenStreetMap",
)

m3.add_opacity_slider("satellite", label="Satellite")
m3.add_opacity_slider("osm", label="OSM")
m3

m3 = Map(center=[-122.4, 37.8], zoom=10) m3.add_tile_layer( "https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}", name="satellite", attribution="Google", ) m3.add_tile_layer( "https://tile.openstreetmap.org/{z}/{x}/{y}.png", name="osm", attribution="OpenStreetMap", ) m3.add_opacity_slider("satellite", label="Satellite") m3.add_opacity_slider("osm", label="OSM") m3

Remove Opacity Slider¶

In [ ]:

m3.remove_opacity_slider("satellite")

m3.remove_opacity_slider("satellite")