# Leaflet.LayerViewbox

An accessible, dependency-free Leaflet control that reveals a synchronized second layer inside a movable, resizable viewbox.

Documentation and a live demo are available at <https://maps.gisnj.com/tools/leaflet-layer-viewbox/>.

## Browser usage

Load Leaflet and the plugin styles, then the plugin script:

```html
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
<link rel="stylesheet" href="https://maps.gisnj.com/tools/leaflet-layer-viewbox/leaflet-layer-viewbox.css">
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://maps.gisnj.com/tools/leaflet-layer-viewbox/leaflet-layer-viewbox.js"></script>
```

Add both layers to the map, then create the control. The second layer is revealed inside the viewbox:

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

With npm, install `leaflet` and this package, then import the stylesheet and plugin after Leaflet:

```js
const L = require("leaflet");
require("leaflet-layer-viewbox");

L.control.layerViewbox(primary, detail).addTo(map);
```

## API

- `L.control.layerViewbox(primaryLayer, viewboxLayer, options)` creates the control.
- `setPrimaryLayer(layer)` replaces the layer outside the viewbox.
- `setViewboxLayer(layer)` replaces the layer revealed inside the viewbox.
- `setPosition([x, y])` moves the viewbox using map-container pixel coordinates.
- `getPosition()` returns the current position as an `L.Point`.
- `setSize([width, height])` resizes the viewbox in pixels.
- `getSize()` returns the current size as an `L.Point`.

Options are `initialPosition` (`[24, 24]`), `initialSize` (`[360, 260]`), `minSize` (`[140, 100]`), `keyboardStep` (`10`), and `label` (`"Comparison view"`).

Drag the title bar to move the viewbox and its lower-right handle to resize it. Both handles also support arrow keys; hold Shift for larger steps. Because both layers belong to the same Leaflet map, map pan and zoom keep the viewbox imagery aligned.

Both layers must be added to the map. Layers should expose `getContainer()` (such as TileLayer, WMS, ImageOverlay, and VideoOverlay), or be a LayerGroup containing such layers.

## Development

Leaflet is a peer dependency when the plugin is consumed from a package manager.

## License

Plugin code is MIT licensed.