Meged Most active branches

.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

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

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,14 +28,17 @@ 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
 
 | Method           | Returns        | Description   |
 | ----------       | -------------- | ------------- |
 | `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
 

image-overlay-example.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset=utf-8 />
+    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui' />
+    <title>Leaflet Side-by-side</title>
+    <script src='http://cdn.leafletjs.com/leaflet/v1.3.1/leaflet.js'></script>
+    <script src="leaflet-side-by-side.js"></script>
+    <link href='http://cdn.leafletjs.com/leaflet/v1.3.1/leaflet.css' rel='stylesheet' />
+    <style>
+    body {
+        margin: 0;
+        padding: 0;
+    }
+    #map {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        width: 100%;
+    }
+    </style>
+</head>
+
+<body>
+    <div id='map'></div>
+
+    <script>
+      var map = L.map('map').setView([23.140, -101.887], 5);
+
+      map.createPane('left');
+      map.createPane('right');
+
+      var newark = 'http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
+      imageBounds = [[7.9409, -131.1589], [29.2144, -82.6558]];
+      var leftLayer = L.imageOverlay(newark, imageBounds, {pane: 'left'}).addTo(map);
+
+      var atlantis = 'https://img.vixdata.io/pd/jpg-large/es/sites/default/files/a/atlantis-ciudad-perdida.jpg',
+      imageBounds = [[7.9409, -131.1589], [29.2144, -82.6558]];
+      var rightLayer = L.imageOverlay(atlantis, imageBounds, {pane: 'right'}).addTo(map);
+
+      var ss = L.control.sideBySide(leftLayer, rightLayer).addTo(map);
+    </script>
+</body>
+</html>

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);
     </script>
 </body>
 </html>