GISNJ

Open Leaflet plugin ยท Version 1.0.0

Leaflet.LayerSwipe

Compare two tile, WMS, image, or grouped layers with a draggable, keyboard-accessible divider.

Flexible comparison

Use a vertical or horizontal reveal and change direction at runtime.

  • Mouse, touch, pen, and keyboard control
  • Vertical and horizontal orientation
  • Tile, WMS, image, and grouped layers
  • No dependency beyond Leaflet
Plugin sourceREADME

Quick start

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

L.control.layerSwipe(before, after, {
  orientation: "vertical",
  initialPosition: 0.5
}).addTo(map);

API

L.control.layerSwipe()

Create a comparison control from two layers.

setOrientation()

Switch between vertical and horizontal at runtime.

setDividerPosition()

Move the divider to a value from 0 to 1.

setLeftLayer() / setRightLayer()

Replace either comparison layer.