Split Map (Swipe/Compare)¶

This notebook demonstrates how to compare two map layers side-by-side with a draggable divider.

The split map view uses two synced MapLibre map instances. The left side shows one layer and the right side shows another, with a draggable slider to control the split position.

In [ ]:

# %pip install anymap-ts

# %pip install anymap-ts

Compare Satellite and OpenStreetMap¶

In [ ]:

from anymap_ts import Map

m = Map(center=[-122.4194, 37.7749], zoom=12)

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

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

# Enable split map
m.add_split_map("satellite", "osm")
m

from anymap_ts import Map m = Map(center=[-122.4194, 37.7749], zoom=12) # Add satellite imagery m.add_tile_layer( "https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}", name="satellite", attribution="Google", ) # Add OpenStreetMap m.add_tile_layer( "https://tile.openstreetmap.org/{z}/{x}/{y}.png", name="osm", attribution="OpenStreetMap contributors", ) # Enable split map m.add_split_map("satellite", "osm") m

Custom Split Position¶

Set the initial slider position (0-100).

In [ ]:

m2 = Map(center=[-73.9857, 40.7484], zoom=13)

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

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

# Start with the slider at 30%
m2.add_split_map("satellite", "osm", position=30)
m2

m2 = Map(center=[-73.9857, 40.7484], zoom=13) m2.add_tile_layer( "https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}", name="satellite", attribution="Google", ) m2.add_tile_layer( "https://tile.openstreetmap.org/{z}/{x}/{y}.png", name="osm", attribution="OpenStreetMap contributors", ) # Start with the slider at 30% m2.add_split_map("satellite", "osm", position=30) m2

Remove Split Map¶

Return to normal single-view mode.

In [ ]:

m.remove_split_map()

m.remove_split_map()

Export to HTML¶

In [ ]:

m2.to_html("split_map_example.html")

m2.to_html("split_map_example.html")