GISNJ

Open Leaflet plugin ยท Version 1.0.0

Leaflet.LayerViewbox

Reveal a synchronized second map layer inside an accessible window you can move and resize.

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

Quick start

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);

API

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.