MapCompare overlays two lonboard Maps
and reveals one over the other with a draggable divider — drag it across the
viewport to compare. It’s built for before/after imagery: two dated satellite
scenes, or pre- and post-event views of the same place.
The two cameras are locked together, so panning or zooming either side moves both. No kernel is required, so the swipe and the camera sync behave the same here and in the static export of this page.
from lonboard import Map, BitmapTileLayer
from manywidgets.lonboard import MapCompare
VIEW = {"longitude": -122.45, "latitude": 37.78, "zoom": 11}
# A fresh pair of maps each time (a lonboard layer belongs to a single Map).
# Swap these tile sources for two dated satellite layers (e.g. NASA GIBS MODIS
# imagery for two dates) to build a real before/after comparison.
def make_maps():
imagery = BitmapTileLayer(
data="https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
tile_size=256, max_requests=-1, min_zoom=0, max_zoom=19,
)
streets = BitmapTileLayer(
data="https://tile.openstreetmap.org/{z}/{x}/{y}.png",
tile_size=256, max_requests=-1, min_zoom=0, max_zoom=19,
)
before = Map(imagery, basemap=None, view_state=VIEW)
after = Map(streets, basemap=None, view_state=VIEW)
return before, after
# `before` shows on the left, `after` on the right. Drag the divider to compare.
before, after = make_maps()
MapCompare(before, after)Drive the divider from a slider¶
position runs 0–1 — the same range as a Slider’s value — so a plain
jslink keeps them in sync in both directions (drag the divider or the slider).
For a top/bottom split instead of left/right, pass orientation="horizontal".
from ipywidgets import jslink
from manywidgets import Column, Slider
compare = MapCompare(*make_maps())
swipe = Slider(value=0.5, min=0.0, max=1.0, step=0.01, label="Swipe")
jslink((swipe, "value"), (compare, "position"))
Column(swipe, compare)