diff --git a/.circleci/config.yml b/.circleci/config.yml
new file mode 100644
index 0000000..1f0b134
--- /dev/null
+++ b/.circleci/config.yml
@@ -0,0 +1,54 @@
+version: 2
+_defaults: &defaults
+ working_directory: ~/repo
+ docker:
+ - image: circleci/node:12
+
+_restore_cache: &restore_cache
+ keys:
+ - v3-dependencies-{{ checksum "package.json" }}
+ - v3-dependencies-
+
+_save_cache: &save_cache
+ paths:
+ - node_modules
+ - .build_cache/terser
+ key: v3-dependencies-{{ checksum "package.json" }}
+
+jobs:
+ build_and_test:
+ <<: *defaults
+ steps:
+ - checkout
+ - restore_cache:
+ <<: *restore_cache
+
+ - run: cat /dev/null | npm install
+
+ - save_cache:
+ <<: *save_cache
+
+# - run:
+# shell: /bin/bash
+# command: |
+# set -e
+# audit=$(cat /dev/null | npm audit --json | jq '.actions[].resolves[] | select(.id==0 | not)')
+# if [[ -n ${audit} ]]
+# then
+# echo "results are non-empty: ${audit}"
+# exit 1
+# else
+# exit 0
+# fi
+
+ - run: cat /dev/null | npm run test
+ - run: cat /dev/null | npm run build
+
+ - save_cache:
+ <<: *save_cache
+
+workflows:
+ version: 2
+ all:
+ jobs:
+ - build_and_test
diff --git a/CHANGELOG.md b/CHANGELOG.md
index dfa2bde..9f201ef 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,16 @@ This project adheres to [Semantic Versioning](http://semver.org/).
- ADDED: Allows Leaflet version 0.7.7 through 1.x
+## [v2.1.1] - 2021-01-09
+
+- Mergerd https://github.com/digidem/leaflet-side-by-side/pull/23#issue-192672703
+- Improved Multi Layer Support
+
+## [v2.1.0] - 2020-10-01
+
+- ADDED: `options.swap`
+- ADDED: `swapped` event
+
## [v2.0.0] - 2015-12-08
- ADDED: Add `setLeftLayers()` and `setRightLayers()` methods
diff --git a/README.md b/README.md
index 811a67e..2c06ceb 100644
--- a/README.md
+++ b/README.md
@@ -15,7 +15,8 @@ Creates a new Leaflet Control for comparing two layers or collections of layers.
| `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 |
+| `options.padding` | Number | Padding between slider min/max and the edge of the screen in pixels. Defaults to `30` - the width of the slider thumb |
+| `options.swap` | Boolean | Should display swap button, when both layers available
### Events
@@ -27,7 +28,8 @@ Subscribe to events using [these methods](http://leafletjs.com/reference.html#ev
| `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. |
+| `dividermove` | { x: number } | Fired when the divider is moved. Argument is an event object with the property `x` = the pixels of the divider from the left side of the map container. |
+| `swapped` | { swapped: boolean} | Fired when ths swap button clicked. Argument is an event object with the property `swapped` = the current status of swapping.
### Methods
@@ -35,6 +37,8 @@ Subscribe to events using [these methods](http://leafletjs.com/reference.html#ev
| ---------- | -------------- | ------------- |
| `setLeftLayers` | `this` | Set the layer(s) for the left side |
| `setRightLayers` | `this` | Set the layer(s) for the right side |
+| `addLeftLayer` | `this` | Add a layer(s) for the left side Note: wont add to map|
+| `addRightLayer` | `this` | Add a layer(s) for the right side Note: wont add to map |
### Usage
@@ -50,7 +54,7 @@ Or if you are using browserify:
var sideBySide = require('leaflet-side-by-side')
```
-Then create a map, add two layers to it, and create the SideBySide control and add it to the map:
+For tile layers create a map, add two layers to it, and create the SideBySide control and add it to the map:
```js
var map = L.map('map').setView([51.505, -0.09], 13);
@@ -62,9 +66,29 @@ var myLayer2 = L.tileLayer(...).addTo(map)
L.control.sideBySide(myLayer1, myLayer2).addTo(map);
```
-### Example
+For image overlays create a map pane for each layer, create a SideBySide control and add it to the map:
-[Live Example](http://lab.digital-democracy.org/leaflet-side-by-side/) see [source](index.html)
+```js
+var map = L.map('map').setView([23.140, -101.887], 5);
+
+map.createPane('left');
+map.createPane('right');
+
+var imgUrl1 = '...',
+imageBounds = [[7.9409, -131.1589], [29.2144, -82.6558]];
+var leftLayer = L.imageOverlay(imgUrl1, imageBounds, {pane: 'left'}).addTo(map);
+
+var imgUrl2 = '...',
+imageBounds = [[7.9409, -131.1589], [29.2144, -82.6558]];
+var imgUrl2 = L.imageOverlay(imgUrl2, imageBounds, {pane: 'right'}).addTo(map);
+
+L.control.sideBySide(leftLayer, rightLayer).addTo(map);
+```
+
+### Examples
+
+- [Live TileLayer Example](http://lab.digital-democracy.org/leaflet-side-by-side/) see [source](index.html)
+- [Live ImageOverlay Example](http://lab.digital-democracy.org/leaflet-side-by-side/) see [source](image-overlay-example.html)
### Limitations
diff --git a/image-overlay-example.html b/image-overlay-example.html
new file mode 100644
index 0000000..5bffbf2
--- /dev/null
+++ b/image-overlay-example.html
@@ -0,0 +1,44 @@
+
+
+
+
+
+ Leaflet Side-by-side
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/index.html b/index.html
index 23c56ab..308d7de 100644
--- a/index.html
+++ b/index.html
@@ -40,7 +40,7 @@
maxZoom: 16
}).addTo(map)
- L.control.sideBySide(stamenLayer, osmLayer).addTo(map);
+ L.control.sideBySide(stamenLayer, osmLayer, {swap: true}).addTo(map);