# leaflet-splitmap

> Compare two Leaflet layers side by side

Latest version **1.0.3** (published 2023-09-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install leaflet-splitmap
pnpm add leaflet-splitmap
yarn add leaflet-splitmap
bun add leaflet-splitmap
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2023-09-07 |
| First published | 2018-03-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 601.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 17 |
| Author | Gregor MacLennan / Digital Democracy |
| Maintainers | sylvaincorlay, martinrenou |
| Keywords | leaflet |

## Links

- npm: https://www.npmjs.com/package/leaflet-splitmap
- Repository: https://github.com/QuantStack/leaflet-splitmap
- Homepage: https://github.com/QuantStack/leaflet-splitmap#readme
- Issues: https://github.com/QuantStack/leaflet-splitmap/issues
- npm.io page: https://npm.io/package/leaflet-splitmap

## Dependencies (3)

- [cssify](https://npm.io/package/cssify.md) ^0.8.0
- [leaflet](https://npm.io/package/leaflet.md) >=0.7.7 <2.0.0
- [css-img-datauri-stream](https://npm.io/package/css-img-datauri-stream.md) ^0.1.5

## Recent versions

- 1.0.3 (latest) — 2023-09-07
- 1.0.2 — 2022-04-22
- 1.0.1 — 2019-02-28
- 1.0.0 — 2018-03-16

## README

# leaflet-splitmap

A Leaflet control to add a split screen to compare two map overlays.

**This project is a fork of the leaflet-side-by-side plugin**

![screencast example](screencast.gif)

### L.control.splitMap(_leftLayer[s]_, _rightLayer[s]_)

Creates a new Leaflet Control for comparing two layers or collections of layers. It does not add the layers to the map - you need to do that manually. Extends `L.Control` but `setPosition()` and `getPosition` are `noop` because the position is always the same - it does not make sense for this control to be in the corner like other Leaflet controls.

### Parameters

| parameter     | type           | description   |
| ----------    | -------------- | ------------- |
| `leftLayers`  | L.Layer\|array | A Leaflet Layer or array of layers to show on the left side of the map. Any layer added to the map that is in this array will be shown on the left |
| `rightLayers` | L.Layer\|array | A Leaflet Layer or array of layers to show on the right side of the map. Any layer added to the map that is in this array will be shown on the right. These *should not be* the same as any layers in `leftLayers` |
| `options`     | Object         | Options |
| `options.padding` | Number     | Padding between slider min/max and the edge of the screen in pixels. Defaults to `44` - the width of the slider thumb |

### Events

Subscribe to events using [these methods](http://leafletjs.com/reference.html#events)

| Event         | Data           | Description   |
| ----------    | -------------- | ------------- |
| `leftlayeradd`  | [LayerEvent](http://leafletjs.com/reference.html#layer-event) | Fired when a layer is added to the left-hand-side pane |
| `leftlayerremove` | [LayerEvent](http://leafletjs.com/reference.html#layer-event) | Fired when a layer is removed from the left-hand-side pane |
| `rightlayeradd` | [LayerEvent](http://leafletjs.com/reference.html#layer-event) | Fired when a layer is added to the right-hand-side pane |
| `rightlayerremove` | [LayerEvent](http://leafletjs.com/reference.html#layer-event) | You guessed it... fired when a layer is removed from the right-hand-side pane |
| `dividermove` | {x: Number} | Fired when the divider is moved. Returns an event object with the property `x` = the pixels of the divider from the left side of the map container. |

### Methods

| Method           | Returns        | Description   |
| ----------       | -------------- | ------------- |
| `setLeftLayers`  | `this`         | Set the layer(s) for the left side  |
| `setRightLayers` | `this`         | Set the layer(s) for the right side |

### Example

[Live Example](http://lab.digital-democracy.org/leaflet-side-by-side/) see [source](index.html)

### Limitations

- The divider is not movable with IE.
- Probably won't work in IE8, but what does?

### License

MIT

---
_Source: https://npm.io/package/leaflet-splitmap · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._