# Leaflet.LayerSwipe

An accessible, dependency-free Leaflet control for comparing two tile, WMS, image, or grouped layers with a draggable swipe divider.

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

## 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-swipe/leaflet-layer-swipe.css">
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://maps.gisnj.com/tools/leaflet-layer-swipe/leaflet-layer-swipe.js"></script>
```

Add both layers to the map, then create the control. The first layer is revealed before the divider and the second after it.

```js
const before = L.tileLayer(beforeUrl).addTo(map);
const after = L.tileLayer(afterUrl).addTo(map);

const swipe = L.control.layerSwipe(before, after, {
  orientation: "vertical", // or "horizontal"
  initialPosition: 0.5
}).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-swipe");

L.control.layerSwipe(before, after).addTo(map);
```

## API

- `L.control.layerSwipe(leftLayer, rightLayer, options)` creates the control.
- `setDividerPosition(value)` moves the divider to a value from `0` to `1`.
- `getDividerPosition()` returns the current divider position.
- `setOrientation("vertical" | "horizontal")` changes direction at runtime.
- `setLeftLayer(layer)` and `setRightLayer(layer)` replace comparison layers.

Options are `orientation` (`"vertical"`), `initialPosition` (`0.5`), and keyboard `step` (`0.02`). The divider supports dragging with mouse, pen, or touch and supports arrow, Home, and End keys.

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

Run the dependency-free smoke tests with `npm test`.

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

## License

Plugin code is MIT licensed.