Detail in context
Keep the primary map visible while inspecting another layer through a focused comparison window.
- Drag to move and resize
- Full keyboard support
- Synchronized pan and zoom
- Tile, WMS, image, and grouped layers
Open Leaflet plugin ยท Version 1.0.0
Reveal a synchronized second map layer inside an accessible window you can move and resize.
Keep the primary map visible while inspecting another layer through a focused comparison window.
const primary = L.tileLayer(primaryUrl).addTo(map);
const detail = L.tileLayer(detailUrl).addTo(map);
L.control.layerViewbox(primary, detail, {
initialPosition: [24, 24],
initialSize: [360, 260]
}).addTo(map);L.control.layerViewbox()Create a viewbox with primary and comparison layers.
setPosition() / getPosition()Move the viewbox or read its current location.
setSize() / getSize()Resize the window or inspect its dimensions.
setPrimaryLayer() / setViewboxLayer()Replace either layer after initialization.