├── .gitignore
├── .npmignore
├── CHANGELOG.md
├── LICENSE
├── README.md
├── index.html
├── index.js
├── layout.css
├── leaflet-side-by-side.js
├── leaflet-side-by-side.min.js
├── package.json
├── range-icon.png
├── range.css
└── screencast.gif


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | leaflet-side-by-side.js
2 | leaflet-side-by-side.min.js
3 | screencast.gif
4 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | # Change Log
 2 | 
 3 | All notable changes to this project will be documented in this file.
 4 | This project adheres to [Semantic Versioning](http://semver.org/).
 5 | 
 6 | ## Unreleased
 7 | 
 8 | - ADDED: Allows Leaflet version 0.7.7 through 1.x
 9 | 
10 | ## [v2.0.0] - 2015-12-08
11 | 
12 | - ADDED: Add `setLeftLayers()` and `setRightLayers()` methods
13 | - ADDED: `options.padding`
14 | - ADDED: `getPosition()` returns the x coordinate (relative to the map container) of the divider
15 | - FIXED: **[BREAKING]** Export factory function on `L.control` not `L.Control`
16 | - FIXED: Slider drag was not working on touch devices
17 | 
18 | ## [v1.1.1] - 2015-12-03
19 | 
20 | - FIXED: fix package.json settings for npm distribution
21 | 
22 | ## [v1.1.0] - 2015-12-03
23 | 
24 | - ADDED: Events
25 | - FIXED: Fix initial divider position in Firefox, should start in middle of map
26 | 
27 | ## v1.0.2 - 2015-12-02
28 | 
29 | Initial release
30 | 
31 | [Unreleased]: https://github.com/digidem/leaflet-side-by-side/compare/v2.0.0...HEAD
32 | [Unreleased]: https://github.com/digidem/leaflet-side-by-side/compare/v1.1.1...v2.0.0
33 | [v1.1.1]: https://github.com/digidem/leaflet-side-by-side/compare/v1.1.0...v1.1.1
34 | [v1.1.0]: https://github.com/digidem/leaflet-side-by-side/compare/v1.0.2...v1.1.0
35 | 
36 | ## v1.0.3 - 2022-8-22
37 | 
38 | Update to support leaflet 1.8
39 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | Copyright (c) 2015 Gregor MacLennan
 2 | 
 3 | Permission is hereby granted, free of charge, to any person obtaining a
 4 | copy of this software and associated documentation files (the "Software"),
 5 | to deal in the Software without restriction, including without limitation
 6 | the rights to use, copy, modify, merge, publish, distribute, sublicense,
 7 | and/or sell copies of the Software, and to permit persons to whom the
 8 | Software is furnished to do so, subject to the following conditions:
 9 | 
10 | The above copyright notice and this permission notice shall be included in
11 | all copies or substantial portions of the Software.
12 | 
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
18 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
19 | DEALINGS IN THE SOFTWARE.
20 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # leaflet-side-by-side
 2 | 
 3 | A Leaflet control to add a split screen to compare two map overlays.
 4 | 
 5 | ![screencast example](screencast.gif)
 6 | 
 7 | ### L.control.sideBySide(_leftLayer[s]_, _rightLayer[s]_)
 8 | 
 9 | 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.
10 | 
11 | ### Parameters
12 | 
13 | | parameter     | type           | description   |
14 | | ----------    | -------------- | ------------- |
15 | | `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 |
16 | | `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` |
17 | | `options`     | Object         | Options |
18 | | `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 |
19 | 
20 | ### Events
21 | 
22 | Subscribe to events using [these methods](http://leafletjs.com/reference.html#events)
23 | 
24 | | Event         | Data           | Description   |
25 | | ----------    | -------------- | ------------- |
26 | | `leftlayeradd`  | [LayerEvent](http://leafletjs.com/reference.html#layer-event) | Fired when a layer is added to the left-hand-side pane |
27 | | `leftlayerremove` | [LayerEvent](http://leafletjs.com/reference.html#layer-event) | Fired when a layer is removed from the left-hand-side pane |
28 | | `rightlayeradd` | [LayerEvent](http://leafletjs.com/reference.html#layer-event) | Fired when a layer is added to the right-hand-side pane |
29 | | `rightlayerremove` | [LayerEvent](http://leafletjs.com/reference.html#layer-event) | You guessed it... fired when a layer is removed from the right-hand-side pane |
30 | | `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. |
31 | 
32 | ### Methods
33 | 
34 | | Method           | Returns        | Description   |
35 | | ----------       | -------------- | ------------- |
36 | | `setLeftLayers`  | `this`         | Set the layer(s) for the left side  |
37 | | `setRightLayers` | `this`         | Set the layer(s) for the right side |
38 | 
39 | ### Usage
40 | 
41 | Add the script to the top of your page (css is included in the javascript):
42 | 
43 | ```html
44 | <script src="leaflet-side-by-side.js"></script>
45 | ```
46 | 
47 | Or if you are using browserify:
48 | 
49 | ```js
50 | var sideBySide = require('leaflet-side-by-side')
51 | ```
52 | 
53 | Then create a map, add two layers to it, and create the SideBySide control and add it to the map:
54 | 
55 | ```js
56 | var map = L.map('map').setView([51.505, -0.09], 13);
57 | 
58 | var myLayer1 = L.tileLayer(...).addTo(map);
59 | 
60 | var myLayer2 = L.tileLayer(...).addTo(map)
61 | 
62 | L.control.sideBySide(myLayer1, myLayer2).addTo(map);
63 | ```
64 | 
65 | ### Example
66 | 
67 | [Live Example](http://lab.digital-democracy.org/leaflet-side-by-side/) see [source](index.html)
68 | 
69 | ### Limitations
70 | 
71 | - The divider is not movable with IE.
72 | - Probably won't work in IE8, but what does?
73 | 
74 | ### License
75 | 
76 | MIT
77 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset=utf-8 />
 5 |     <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui' />
 6 |     <title>Leaflet Side-by-side</title>
 7 |     <script src='http://cdn.leafletjs.com/leaflet/v1.3.1/leaflet.js'></script>
 8 |     <script src="leaflet-side-by-side.js"></script>
 9 |     <link href='http://cdn.leafletjs.com/leaflet/v1.3.1/leaflet.css' rel='stylesheet' />
10 |     <style>
11 |     body {
12 |         margin: 0;
13 |         padding: 0;
14 |     }
15 |     #map {
16 |         position: absolute;
17 |         top: 0;
18 |         bottom: 0;
19 |         width: 100%;
20 |     }
21 |     </style>
22 | </head>
23 | 
24 | <body>
25 |     <div id='map'></div>
26 | 
27 |     <script>
28 |     var map = L.map('map').setView([51.505, -0.09], 13);
29 | 
30 |     var osmLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
31 |         attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap<\/a> contributors'
32 |     }).addTo(map);
33 | 
34 |     var stamenLayer = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png', {
35 |         attribution:
36 |             'Map tiles by <a href="http://stamen.com">Stamen Design<\/a>, ' +
37 |             '<a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0<\/a> &mdash; ' +
38 |             'Map data {attribution.OpenStreetMap}',
39 |         minZoom: 1,
40 |         maxZoom: 16
41 |     }).addTo(map)
42 | 
43 |     L.control.sideBySide(stamenLayer, osmLayer).addTo(map);
44 |     </script>
45 | </body>
46 | </html>
47 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
  1 | var L = require('leaflet')
  2 | require('./layout.css')
  3 | require('./range.css')
  4 | 
  5 | var mapWasDragEnabled
  6 | var mapWasTapEnabled
  7 | 
  8 | // Leaflet v0.7 backwards compatibility
  9 | function on (el, types, fn, context) {
 10 |   types.split(' ').forEach(function (type) {
 11 |     L.DomEvent.on(el, type, fn, context)
 12 |   })
 13 | }
 14 | 
 15 | // Leaflet v0.7 backwards compatibility
 16 | function off (el, types, fn, context) {
 17 |   types.split(' ').forEach(function (type) {
 18 |     L.DomEvent.off(el, type, fn, context)
 19 |   })
 20 | }
 21 | 
 22 | function getRangeEvent (rangeInput) {
 23 |   return 'oninput' in rangeInput ? 'input' : 'change'
 24 | }
 25 | 
 26 | function cancelMapDrag () {
 27 |   mapWasDragEnabled = this._map.dragging.enabled()
 28 |   mapWasTapEnabled = this._map.tap && this._map.tap.enabled()
 29 |   this._map.dragging.disable()
 30 |   this._map.tap && this._map.tap.disable()
 31 | }
 32 | 
 33 | function uncancelMapDrag (e) {
 34 |   this._refocusOnMap(e)
 35 |   if (mapWasDragEnabled) {
 36 |     this._map.dragging.enable()
 37 |   }
 38 |   if (mapWasTapEnabled) {
 39 |     this._map.tap.enable()
 40 |   }
 41 | }
 42 | 
 43 | // convert arg to an array - returns empty array if arg is undefined
 44 | function asArray (arg) {
 45 |   return (arg === 'undefined') ? [] : Array.isArray(arg) ? arg : [arg]
 46 | }
 47 | 
 48 | function noop () {}
 49 | 
 50 | L.Control.SideBySide = L.Control.extend({
 51 |   options: {
 52 |     thumbSize: 42,
 53 |     padding: 0
 54 |   },
 55 | 
 56 |   initialize: function (leftLayers, rightLayers, options) {
 57 |     this.setLeftLayers(leftLayers)
 58 |     this.setRightLayers(rightLayers)
 59 |     L.setOptions(this, options)
 60 |   },
 61 | 
 62 |   getPosition: function () {
 63 |     var rangeValue = this._range.value
 64 |     var offset = (0.5 - rangeValue) * (2 * this.options.padding + this.options.thumbSize)
 65 |     return this._map.getSize().x * rangeValue + offset
 66 |   },
 67 | 
 68 |   setPosition: noop,
 69 | 
 70 |   includes: L.Evented.prototype || L.Mixin.Events,
 71 | 
 72 |   addTo: function (map) {
 73 |     this.remove()
 74 |     this._map = map
 75 | 
 76 |     var container = this._container = L.DomUtil.create('div', 'leaflet-sbs', map._controlContainer)
 77 | 
 78 |     this._divider = L.DomUtil.create('div', 'leaflet-sbs-divider', container)
 79 |     var range = this._range = L.DomUtil.create('input', 'leaflet-sbs-range', container)
 80 |     range.type = 'range'
 81 |     range.min = 0
 82 |     range.max = 1
 83 |     range.step = 'any'
 84 |     range.value = 0.5
 85 |     range.style.paddingLeft = range.style.paddingRight = this.options.padding + 'px'
 86 |     this._addEvents()
 87 |     this._updateLayers()
 88 |     return this
 89 |   },
 90 | 
 91 |   remove: function () {
 92 |     if (!this._map) {
 93 |       return this
 94 |     }
 95 |     if (this._leftLayer) {
 96 |       this._leftLayer.getContainer().style.clip = ''
 97 |     }
 98 |     if (this._rightLayer) {
 99 |       this._rightLayer.getContainer().style.clip = ''
100 |     }
101 |     this._removeEvents()
102 |     L.DomUtil.remove(this._container)
103 | 
104 |     this._map = null
105 | 
106 |     return this
107 |   },
108 | 
109 |   setLeftLayers: function (leftLayers) {
110 |     this._leftLayers = asArray(leftLayers)
111 |     this._updateLayers()
112 |     return this
113 |   },
114 | 
115 |   setRightLayers: function (rightLayers) {
116 |     this._rightLayers = asArray(rightLayers)
117 |     this._updateLayers()
118 |     return this
119 |   },
120 | 
121 |   _updateClip: function () {
122 |     var map = this._map
123 |     var nw = map.containerPointToLayerPoint([0, 0])
124 |     var se = map.containerPointToLayerPoint(map.getSize())
125 |     var clipX = nw.x + this.getPosition()
126 |     var dividerX = this.getPosition()
127 | 
128 |     this._divider.style.left = dividerX + 'px'
129 |     this.fire('dividermove', {x: dividerX})
130 |     var clipLeft = 'rect(' + [nw.y, clipX, se.y, nw.x].join('px,') + 'px)'
131 |     var clipRight = 'rect(' + [nw.y, se.x, se.y, clipX].join('px,') + 'px)'
132 |     if (this._leftLayer) {
133 |       this._leftLayer.getContainer().style.clip = clipLeft
134 |     }
135 |     if (this._rightLayer) {
136 |       this._rightLayer.getContainer().style.clip = clipRight
137 |     }
138 |   },
139 | 
140 |   _updateLayers: function () {
141 |     if (!this._map) {
142 |       return this
143 |     }
144 |     var prevLeft = this._leftLayer
145 |     var prevRight = this._rightLayer
146 |     this._leftLayer = this._rightLayer = null
147 |     this._leftLayers.forEach(function (layer) {
148 |       if (this._map.hasLayer(layer)) {
149 |         this._leftLayer = layer
150 |       }
151 |     }, this)
152 |     this._rightLayers.forEach(function (layer) {
153 |       if (this._map.hasLayer(layer)) {
154 |         this._rightLayer = layer
155 |       }
156 |     }, this)
157 |     if (prevLeft !== this._leftLayer) {
158 |       prevLeft && this.fire('leftlayerremove', {layer: prevLeft})
159 |       this._leftLayer && this.fire('leftlayeradd', {layer: this._leftLayer})
160 |     }
161 |     if (prevRight !== this._rightLayer) {
162 |       prevRight && this.fire('rightlayerremove', {layer: prevRight})
163 |       this._rightLayer && this.fire('rightlayeradd', {layer: this._rightLayer})
164 |     }
165 |     this._updateClip()
166 |   },
167 | 
168 |   _addEvents: function () {
169 |     var range = this._range;
170 |     var map = this._map;
171 |     if (!map || !range) return;
172 |     map.on("move", this._updateClip, this);
173 |     map.on("layeradd layerremove", this._updateLayers, this);
174 |     L.DomEvent.on(range, getRangeEvent(range), this._updateClip, this);
175 |     L.DomEvent.on(range, "touchstart", cancelMapDrag, this);
176 |     L.DomEvent.on(range, "touchend", uncancelMapDrag, this);
177 |     L.DomEvent.on(range, "mousedown", cancelMapDrag, this);
178 |     L.DomEvent.on(range, "mouseup", uncancelMapDrag, this);
179 |   },
180 | 
181 |   _removeEvents: function () {
182 |     var range = this._range;
183 |     var map = this._map;
184 |     if (range) {
185 |       L.DomEvent.off(range, getRangeEvent(range), this._updateClip, this);
186 |       L.DomEvent.off(range, "touchstart", cancelMapDrag, this);
187 |       L.DomEvent.off(range, "touchend", uncancelMapDrag, this);
188 |       L.DomEvent.off(range, "mousedown", cancelMapDrag, this);
189 |       L.DomEvent.off(range, "mouseup", uncancelMapDrag, this);
190 |     }
191 |     if (map) {
192 |       map.off("layeradd layerremove", this._updateLayers, this);
193 |       map.off("move", this._updateClip, this);
194 |     }
195 |   },
196 | })
197 | 
198 | L.control.sideBySide = function (leftLayers, rightLayers, options) {
199 |   return new L.Control.SideBySide(leftLayers, rightLayers, options)
200 | }
201 | 
202 | module.exports = L.Control.SideBySide
203 | 


--------------------------------------------------------------------------------
/layout.css:
--------------------------------------------------------------------------------
 1 | .leaflet-sbs-range {
 2 |     position: absolute;
 3 |     top: 50%;
 4 |     width: 100%;
 5 |     z-index: 999;
 6 | }
 7 | .leaflet-sbs-divider {
 8 |     position: absolute;
 9 |     top: 0;
10 |     bottom: 0;
11 |     left: 50%;
12 |     margin-left: -2px;
13 |     width: 4px;
14 |     background-color: #fff;
15 |     pointer-events: none;
16 |     z-index: 999;
17 | }
18 | 


--------------------------------------------------------------------------------
/leaflet-side-by-side.js:
--------------------------------------------------------------------------------
  1 | (function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
  2 | (function (global){
  3 | var L = (typeof window !== "undefined" ? window['L'] : typeof global !== "undefined" ? global['L'] : null)
  4 | require('./layout.css')
  5 | require('./range.css')
  6 | 
  7 | var mapWasDragEnabled
  8 | var mapWasTapEnabled
  9 | 
 10 | // Leaflet v0.7 backwards compatibility
 11 | function on (el, types, fn, context) {
 12 |   types.split(' ').forEach(function (type) {
 13 |     L.DomEvent.on(el, type, fn, context)
 14 |   })
 15 | }
 16 | 
 17 | // Leaflet v0.7 backwards compatibility
 18 | function off (el, types, fn, context) {
 19 |   types.split(' ').forEach(function (type) {
 20 |     L.DomEvent.off(el, type, fn, context)
 21 |   })
 22 | }
 23 | 
 24 | function getRangeEvent (rangeInput) {
 25 |   return 'oninput' in rangeInput ? 'input' : 'change'
 26 | }
 27 | 
 28 | function cancelMapDrag () {
 29 |   mapWasDragEnabled = this._map.dragging.enabled()
 30 |   mapWasTapEnabled = this._map.tap && this._map.tap.enabled()
 31 |   this._map.dragging.disable()
 32 |   this._map.tap && this._map.tap.disable()
 33 | }
 34 | 
 35 | function uncancelMapDrag (e) {
 36 |   this._refocusOnMap(e)
 37 |   if (mapWasDragEnabled) {
 38 |     this._map.dragging.enable()
 39 |   }
 40 |   if (mapWasTapEnabled) {
 41 |     this._map.tap.enable()
 42 |   }
 43 | }
 44 | 
 45 | // convert arg to an array - returns empty array if arg is undefined
 46 | function asArray (arg) {
 47 |   return (arg === 'undefined') ? [] : Array.isArray(arg) ? arg : [arg]
 48 | }
 49 | 
 50 | function noop () {}
 51 | 
 52 | L.Control.SideBySide = L.Control.extend({
 53 |   options: {
 54 |     thumbSize: 42,
 55 |     padding: 0
 56 |   },
 57 | 
 58 |   initialize: function (leftLayers, rightLayers, options) {
 59 |     this.setLeftLayers(leftLayers)
 60 |     this.setRightLayers(rightLayers)
 61 |     L.setOptions(this, options)
 62 |   },
 63 | 
 64 |   getPosition: function () {
 65 |     var rangeValue = this._range.value
 66 |     var offset = (0.5 - rangeValue) * (2 * this.options.padding + this.options.thumbSize)
 67 |     return this._map.getSize().x * rangeValue + offset
 68 |   },
 69 | 
 70 |   setPosition: noop,
 71 | 
 72 |   includes: L.Evented.prototype || L.Mixin.Events,
 73 | 
 74 |   addTo: function (map) {
 75 |     this.remove()
 76 |     this._map = map
 77 | 
 78 |     var container = this._container = L.DomUtil.create('div', 'leaflet-sbs', map._controlContainer)
 79 | 
 80 |     this._divider = L.DomUtil.create('div', 'leaflet-sbs-divider', container)
 81 |     var range = this._range = L.DomUtil.create('input', 'leaflet-sbs-range', container)
 82 |     range.type = 'range'
 83 |     range.min = 0
 84 |     range.max = 1
 85 |     range.step = 'any'
 86 |     range.value = 0.5
 87 |     range.style.paddingLeft = range.style.paddingRight = this.options.padding + 'px'
 88 |     this._addEvents()
 89 |     this._updateLayers()
 90 |     return this
 91 |   },
 92 | 
 93 |   remove: function () {
 94 |     if (!this._map) {
 95 |       return this
 96 |     }
 97 |     if (this._leftLayer) {
 98 |       this._leftLayer.getContainer().style.clip = ''
 99 |     }
100 |     if (this._rightLayer) {
101 |       this._rightLayer.getContainer().style.clip = ''
102 |     }
103 |     this._removeEvents()
104 |     L.DomUtil.remove(this._container)
105 | 
106 |     this._map = null
107 | 
108 |     return this
109 |   },
110 | 
111 |   setLeftLayers: function (leftLayers) {
112 |     this._leftLayers = asArray(leftLayers)
113 |     this._updateLayers()
114 |     return this
115 |   },
116 | 
117 |   setRightLayers: function (rightLayers) {
118 |     this._rightLayers = asArray(rightLayers)
119 |     this._updateLayers()
120 |     return this
121 |   },
122 | 
123 |   _updateClip: function () {
124 |     var map = this._map
125 |     var nw = map.containerPointToLayerPoint([0, 0])
126 |     var se = map.containerPointToLayerPoint(map.getSize())
127 |     var clipX = nw.x + this.getPosition()
128 |     var dividerX = this.getPosition()
129 | 
130 |     this._divider.style.left = dividerX + 'px'
131 |     this.fire('dividermove', {x: dividerX})
132 |     var clipLeft = 'rect(' + [nw.y, clipX, se.y, nw.x].join('px,') + 'px)'
133 |     var clipRight = 'rect(' + [nw.y, se.x, se.y, clipX].join('px,') + 'px)'
134 |     if (this._leftLayer) {
135 |       this._leftLayer.getContainer().style.clip = clipLeft
136 |     }
137 |     if (this._rightLayer) {
138 |       this._rightLayer.getContainer().style.clip = clipRight
139 |     }
140 |   },
141 | 
142 |   _updateLayers: function () {
143 |     if (!this._map) {
144 |       return this
145 |     }
146 |     var prevLeft = this._leftLayer
147 |     var prevRight = this._rightLayer
148 |     this._leftLayer = this._rightLayer = null
149 |     this._leftLayers.forEach(function (layer) {
150 |       if (this._map.hasLayer(layer)) {
151 |         this._leftLayer = layer
152 |       }
153 |     }, this)
154 |     this._rightLayers.forEach(function (layer) {
155 |       if (this._map.hasLayer(layer)) {
156 |         this._rightLayer = layer
157 |       }
158 |     }, this)
159 |     if (prevLeft !== this._leftLayer) {
160 |       prevLeft && this.fire('leftlayerremove', {layer: prevLeft})
161 |       this._leftLayer && this.fire('leftlayeradd', {layer: this._leftLayer})
162 |     }
163 |     if (prevRight !== this._rightLayer) {
164 |       prevRight && this.fire('rightlayerremove', {layer: prevRight})
165 |       this._rightLayer && this.fire('rightlayeradd', {layer: this._rightLayer})
166 |     }
167 |     this._updateClip()
168 |   },
169 | 
170 |   _addEvents: function () {
171 |     var range = this._range
172 |     var map = this._map
173 |     if (!map || !range) return
174 |     map.on('move', this._updateClip, this)
175 |     map.on('layeradd layerremove', this._updateLayers, this)
176 |     on(range, getRangeEvent(range), this._updateClip, this)
177 |     on(range, L.Browser.touch ? 'touchstart' : 'mousedown', cancelMapDrag, this)
178 |     on(range, L.Browser.touch ? 'touchend' : 'mouseup', uncancelMapDrag, this)
179 |   },
180 | 
181 |   _removeEvents: function () {
182 |     var range = this._range
183 |     var map = this._map
184 |     if (range) {
185 |       off(range, getRangeEvent(range), this._updateClip, this)
186 |       off(range, L.Browser.touch ? 'touchstart' : 'mousedown', cancelMapDrag, this)
187 |       off(range, L.Browser.touch ? 'touchend' : 'mouseup', uncancelMapDrag, this)
188 |     }
189 |     if (map) {
190 |       map.off('layeradd layerremove', this._updateLayers, this)
191 |       map.off('move', this._updateClip, this)
192 |     }
193 |   }
194 | })
195 | 
196 | L.control.sideBySide = function (leftLayers, rightLayers, options) {
197 |   return new L.Control.SideBySide(leftLayers, rightLayers, options)
198 | }
199 | 
200 | module.exports = L.Control.SideBySide
201 | 
202 | }).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
203 | },{"./layout.css":2,"./range.css":4}],2:[function(require,module,exports){
204 | var inject = require('./node_modules/cssify');
205 | var css = ".leaflet-sbs-range {\r\n    position: absolute;\r\n    top: 50%;\r\n    width: 100%;\r\n    z-index: 999;\r\n}\r\n.leaflet-sbs-divider {\r\n    position: absolute;\r\n    top: 0;\r\n    bottom: 0;\r\n    left: 50%;\r\n    margin-left: -2px;\r\n    width: 4px;\r\n    background-color: #fff;\r\n    pointer-events: none;\r\n    z-index: 999;\r\n}\r\n";
206 | inject(css, undefined, '_i6aomd');
207 | module.exports = css;
208 | 
209 | },{"./node_modules/cssify":3}],3:[function(require,module,exports){
210 | 'use strict'
211 | 
212 | function injectStyleTag (document, fileName, cb) {
213 |   var style = document.getElementById(fileName)
214 | 
215 |   if (style) {
216 |     cb(style)
217 |   } else {
218 |     var head = document.getElementsByTagName('head')[0]
219 | 
220 |     style = document.createElement('style')
221 |     if (fileName != null) style.id = fileName
222 |     cb(style)
223 |     head.appendChild(style)
224 |   }
225 | 
226 |   return style
227 | }
228 | 
229 | module.exports = function (css, customDocument, fileName) {
230 |   var doc = customDocument || document
231 |   /* istanbul ignore if: not supported by Electron */
232 |   if (doc.createStyleSheet) {
233 |     var sheet = doc.createStyleSheet()
234 |     sheet.cssText = css
235 |     return sheet.ownerNode
236 |   } else {
237 |     return injectStyleTag(doc, fileName, function (style) {
238 |       /* istanbul ignore if: not supported by Electron */
239 |       if (style.styleSheet) {
240 |         style.styleSheet.cssText = css
241 |       } else {
242 |         style.innerHTML = css
243 |       }
244 |     })
245 |   }
246 | }
247 | 
248 | module.exports.byUrl = function (url) {
249 |   /* istanbul ignore if: not supported by Electron */
250 |   if (document.createStyleSheet) {
251 |     return document.createStyleSheet(url).ownerNode
252 |   } else {
253 |     var head = document.getElementsByTagName('head')[0]
254 |     var link = document.createElement('link')
255 | 
256 |     link.rel = 'stylesheet'
257 |     link.href = url
258 | 
259 |     head.appendChild(link)
260 |     return link
261 |   }
262 | }
263 | 
264 | },{}],4:[function(require,module,exports){
265 | var inject = require('./node_modules/cssify');
266 | var css = ".leaflet-sbs-range {\r\n    -webkit-appearance: none;\r\n    display: inline-block!important;\r\n    vertical-align: middle;\r\n    height: 0;\r\n    padding: 0;\r\n    margin: 0;\r\n    border: 0;\r\n    background: rgba(0, 0, 0, 0.25);\r\n    min-width: 100px;\r\n    cursor: pointer;\r\n    pointer-events: none;\r\n    z-index: 999;\r\n}\r\n.leaflet-sbs-range::-ms-fill-upper {\r\n    background: transparent;\r\n}\r\n.leaflet-sbs-range::-ms-fill-lower {\r\n    background: rgba(255, 255, 255, 0.25);\r\n}\r\n/* Browser thingies */\r\n\r\n.leaflet-sbs-range::-moz-range-track {\r\n    opacity: 0;\r\n}\r\n.leaflet-sbs-range::-ms-track {\r\n    opacity: 0;\r\n}\r\n.leaflet-sbs-range::-ms-tooltip {\r\n    display: none;\r\n}\r\n/* For whatever reason, these need to be defined\r\n * on their own so dont group them */\r\n\r\n.leaflet-sbs-range::-webkit-slider-thumb {\r\n    -webkit-appearance: none;\r\n    margin: 0;\r\n    padding: 0;\r\n    background: #fff;\r\n    height: 40px;\r\n    width: 40px;\r\n    border-radius: 20px;\r\n    cursor: ew-resize;\r\n    pointer-events: auto;\r\n    border: 1px solid #ddd;\r\n    background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABlBMVEV9fX3///+Kct39AAAAAnRSTlP/AOW3MEoAAAA9SURBVFjD7dehDQAwDANBZ/+l2wmKoiqR7pHRcaeaCxAIBAL/g7k9JxAIBAKBQCAQCAQC14H+MhAIBE4CD3fOFvGVBzhZAAAAAElFTkSuQmCC\");\r\n    background-position: 50% 50%;\r\n    background-repeat: no-repeat;\r\n    background-size: 40px 40px;\r\n}\r\n.leaflet-sbs-range::-ms-thumb {\r\n    margin: 0;\r\n    padding: 0;\r\n    background: #fff;\r\n    height: 40px;\r\n    width: 40px;\r\n    border-radius: 20px;\r\n    cursor: ew-resize;\r\n    pointer-events: auto;\r\n    border: 1px solid #ddd;\r\n    background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABlBMVEV9fX3///+Kct39AAAAAnRSTlP/AOW3MEoAAAA9SURBVFjD7dehDQAwDANBZ/+l2wmKoiqR7pHRcaeaCxAIBAL/g7k9JxAIBAKBQCAQCAQC14H+MhAIBE4CD3fOFvGVBzhZAAAAAElFTkSuQmCC\");\r\n    background-position: 50% 50%;\r\n    background-repeat: no-repeat;\r\n    background-size: 40px 40px;\r\n}\r\n.leaflet-sbs-range::-moz-range-thumb {\r\n    padding: 0;\r\n    right: 0    ;\r\n    background: #fff;\r\n    height: 40px;\r\n    width: 40px;\r\n    border-radius: 20px;\r\n    cursor: ew-resize;\r\n    pointer-events: auto;\r\n    border: 1px solid #ddd;\r\n    background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABlBMVEV9fX3///+Kct39AAAAAnRSTlP/AOW3MEoAAAA9SURBVFjD7dehDQAwDANBZ/+l2wmKoiqR7pHRcaeaCxAIBAL/g7k9JxAIBAKBQCAQCAQC14H+MhAIBE4CD3fOFvGVBzhZAAAAAElFTkSuQmCC\");\r\n    background-position: 50% 50%;\r\n    background-repeat: no-repeat;\r\n    background-size: 40px 40px;\r\n}\r\n.leaflet-sbs-range:disabled::-moz-range-thumb {\r\n    cursor: default;\r\n}\r\n.leaflet-sbs-range:disabled::-ms-thumb {\r\n    cursor: default;\r\n}\r\n.leaflet-sbs-range:disabled::-webkit-slider-thumb {\r\n    cursor: default;\r\n}\r\n.leaflet-sbs-range:disabled {\r\n    cursor: default;\r\n}\r\n.leaflet-sbs-range:focus {\r\n    outline: none!important;\r\n}\r\n.leaflet-sbs-range::-moz-focus-outer {\r\n    border: 0;\r\n}\r\n\r\n";
267 | inject(css, undefined, '_1tlt668');
268 | module.exports = css;
269 | 
270 | },{"./node_modules/cssify":3}]},{},[1]);
271 | 


--------------------------------------------------------------------------------
/leaflet-side-by-side.min.js:
--------------------------------------------------------------------------------
1 | !function a(s,o,d){function l(r,e){if(!o[r]){if(!s[r]){var t="function"==typeof require&&require;if(!e&&t)return t(r,!0);if(h)return h(r,!0);var n=new Error("Cannot find module '"+r+"'");throw n.code="MODULE_NOT_FOUND",n}var i=o[r]={exports:{}};s[r][0].call(i.exports,function(e){return l(s[r][1][e]||e)},i,i.exports,a,s,o,d)}return o[r].exports}for(var h="function"==typeof require&&require,e=0;e<d.length;e++)l(d[e]);return l}({1:[function(h,u,e){(function(e){var r,t,i="undefined"!=typeof window?window.L:void 0!==e?e.L:null;function n(r,e,t,n){e.split(" ").forEach(function(e){i.DomEvent.on(r,e,t,n)})}function a(r,e,t,n){e.split(" ").forEach(function(e){i.DomEvent.off(r,e,t,n)})}function s(e){return"oninput"in e?"input":"change"}function o(){r=this._map.dragging.enabled(),t=this._map.tap&&this._map.tap.enabled(),this._map.dragging.disable(),this._map.tap&&this._map.tap.disable()}function d(e){this._refocusOnMap(e),r&&this._map.dragging.enable(),t&&this._map.tap.enable()}function l(e){return"undefined"===e?[]:Array.isArray(e)?e:[e]}h("./layout.css"),h("./range.css"),i.Control.SideBySide=i.Control.extend({options:{thumbSize:42,padding:0},initialize:function(e,r,t){this.setLeftLayers(e),this.setRightLayers(r),i.setOptions(this,t)},getPosition:function(){var e=this._range.value,r=(.5-e)*(2*this.options.padding+this.options.thumbSize);return this._map.getSize().x*e+r},setPosition:function(){},includes:i.Evented.prototype||i.Mixin.Events,addTo:function(e){this.remove(),this._map=e;var r=this._container=i.DomUtil.create("div","leaflet-sbs",e._controlContainer);this._divider=i.DomUtil.create("div","leaflet-sbs-divider",r);var t=this._range=i.DomUtil.create("input","leaflet-sbs-range",r);return t.type="range",t.min=0,t.max=1,t.step="any",t.value=.5,t.style.paddingLeft=t.style.paddingRight=this.options.padding+"px",this._addEvents(),this._updateLayers(),this},remove:function(){return this._map&&(this._leftLayer&&(this._leftLayer.getContainer().style.clip=""),this._rightLayer&&(this._rightLayer.getContainer().style.clip=""),this._removeEvents(),i.DomUtil.remove(this._container),this._map=null),this},setLeftLayers:function(e){return this._leftLayers=l(e),this._updateLayers(),this},setRightLayers:function(e){return this._rightLayers=l(e),this._updateLayers(),this},_updateClip:function(){var e=this._map,r=e.containerPointToLayerPoint([0,0]),t=e.containerPointToLayerPoint(e.getSize()),n=r.x+this.getPosition(),i=this.getPosition();this._divider.style.left=i+"px",this.fire("dividermove",{x:i});var a="rect("+[r.y,n,t.y,r.x].join("px,")+"px)",s="rect("+[r.y,t.x,t.y,n].join("px,")+"px)";this._leftLayer&&(this._leftLayer.getContainer().style.clip=a),this._rightLayer&&(this._rightLayer.getContainer().style.clip=s)},_updateLayers:function(){if(!this._map)return this;var e=this._leftLayer,r=this._rightLayer;this._leftLayer=this._rightLayer=null,this._leftLayers.forEach(function(e){this._map.hasLayer(e)&&(this._leftLayer=e)},this),this._rightLayers.forEach(function(e){this._map.hasLayer(e)&&(this._rightLayer=e)},this),e!==this._leftLayer&&(e&&this.fire("leftlayerremove",{layer:e}),this._leftLayer&&this.fire("leftlayeradd",{layer:this._leftLayer})),r!==this._rightLayer&&(r&&this.fire("rightlayerremove",{layer:r}),this._rightLayer&&this.fire("rightlayeradd",{layer:this._rightLayer})),this._updateClip()},_addEvents:function(){var e=this._range,r=this._map;r&&e&&(r.on("move",this._updateClip,this),r.on("layeradd layerremove",this._updateLayers,this),n(e,s(e),this._updateClip,this),n(e,i.Browser.touch?"touchstart":"mousedown",o,this),n(e,i.Browser.touch?"touchend":"mouseup",d,this))},_removeEvents:function(){var e=this._range,r=this._map;e&&(a(e,s(e),this._updateClip,this),a(e,i.Browser.touch?"touchstart":"mousedown",o,this),a(e,i.Browser.touch?"touchend":"mouseup",d,this)),r&&(r.off("layeradd layerremove",this._updateLayers,this),r.off("move",this._updateClip,this))}}),i.control.sideBySide=function(e,r,t){return new i.Control.SideBySide(e,r,t)},u.exports=i.Control.SideBySide}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"./layout.css":2,"./range.css":4}],2:[function(e,r,t){var n=".leaflet-sbs-range {\r\n    position: absolute;\r\n    top: 50%;\r\n    width: 100%;\r\n    z-index: 999;\r\n}\r\n.leaflet-sbs-divider {\r\n    position: absolute;\r\n    top: 0;\r\n    bottom: 0;\r\n    left: 50%;\r\n    margin-left: -2px;\r\n    width: 4px;\r\n    background-color: #fff;\r\n    pointer-events: none;\r\n    z-index: 999;\r\n}\r\n";e("./node_modules/cssify")(n,void 0,"_i6aomd"),r.exports=n},{"./node_modules/cssify":3}],3:[function(e,r,t){"use strict";r.exports=function(r,e,t){var n=e||document;if(n.createStyleSheet){var i=n.createStyleSheet();return i.cssText=r,i.ownerNode}return function(e,r,t){var n=e.getElementById(r);if(n)t(n);else{var i=e.getElementsByTagName("head")[0];n=e.createElement("style"),null!=r&&(n.id=r),t(n),i.appendChild(n)}return n}(n,t,function(e){e.styleSheet?e.styleSheet.cssText=r:e.innerHTML=r})},r.exports.byUrl=function(e){if(document.createStyleSheet)return document.createStyleSheet(e).ownerNode;var r=document.getElementsByTagName("head")[0],t=document.createElement("link");return t.rel="stylesheet",t.href=e,r.appendChild(t),t}},{}],4:[function(e,r,t){var n='.leaflet-sbs-range {\r\n    -webkit-appearance: none;\r\n    display: inline-block!important;\r\n    vertical-align: middle;\r\n    height: 0;\r\n    padding: 0;\r\n    margin: 0;\r\n    border: 0;\r\n    background: rgba(0, 0, 0, 0.25);\r\n    min-width: 100px;\r\n    cursor: pointer;\r\n    pointer-events: none;\r\n    z-index: 999;\r\n}\r\n.leaflet-sbs-range::-ms-fill-upper {\r\n    background: transparent;\r\n}\r\n.leaflet-sbs-range::-ms-fill-lower {\r\n    background: rgba(255, 255, 255, 0.25);\r\n}\r\n/* Browser thingies */\r\n\r\n.leaflet-sbs-range::-moz-range-track {\r\n    opacity: 0;\r\n}\r\n.leaflet-sbs-range::-ms-track {\r\n    opacity: 0;\r\n}\r\n.leaflet-sbs-range::-ms-tooltip {\r\n    display: none;\r\n}\r\n/* For whatever reason, these need to be defined\r\n * on their own so dont group them */\r\n\r\n.leaflet-sbs-range::-webkit-slider-thumb {\r\n    -webkit-appearance: none;\r\n    margin: 0;\r\n    padding: 0;\r\n    background: #fff;\r\n    height: 40px;\r\n    width: 40px;\r\n    border-radius: 20px;\r\n    cursor: ew-resize;\r\n    pointer-events: auto;\r\n    border: 1px solid #ddd;\r\n    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABlBMVEV9fX3///+Kct39AAAAAnRSTlP/AOW3MEoAAAA9SURBVFjD7dehDQAwDANBZ/+l2wmKoiqR7pHRcaeaCxAIBAL/g7k9JxAIBAKBQCAQCAQC14H+MhAIBE4CD3fOFvGVBzhZAAAAAElFTkSuQmCC");\r\n    background-position: 50% 50%;\r\n    background-repeat: no-repeat;\r\n    background-size: 40px 40px;\r\n}\r\n.leaflet-sbs-range::-ms-thumb {\r\n    margin: 0;\r\n    padding: 0;\r\n    background: #fff;\r\n    height: 40px;\r\n    width: 40px;\r\n    border-radius: 20px;\r\n    cursor: ew-resize;\r\n    pointer-events: auto;\r\n    border: 1px solid #ddd;\r\n    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABlBMVEV9fX3///+Kct39AAAAAnRSTlP/AOW3MEoAAAA9SURBVFjD7dehDQAwDANBZ/+l2wmKoiqR7pHRcaeaCxAIBAL/g7k9JxAIBAKBQCAQCAQC14H+MhAIBE4CD3fOFvGVBzhZAAAAAElFTkSuQmCC");\r\n    background-position: 50% 50%;\r\n    background-repeat: no-repeat;\r\n    background-size: 40px 40px;\r\n}\r\n.leaflet-sbs-range::-moz-range-thumb {\r\n    padding: 0;\r\n    right: 0    ;\r\n    background: #fff;\r\n    height: 40px;\r\n    width: 40px;\r\n    border-radius: 20px;\r\n    cursor: ew-resize;\r\n    pointer-events: auto;\r\n    border: 1px solid #ddd;\r\n    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABlBMVEV9fX3///+Kct39AAAAAnRSTlP/AOW3MEoAAAA9SURBVFjD7dehDQAwDANBZ/+l2wmKoiqR7pHRcaeaCxAIBAL/g7k9JxAIBAKBQCAQCAQC14H+MhAIBE4CD3fOFvGVBzhZAAAAAElFTkSuQmCC");\r\n    background-position: 50% 50%;\r\n    background-repeat: no-repeat;\r\n    background-size: 40px 40px;\r\n}\r\n.leaflet-sbs-range:disabled::-moz-range-thumb {\r\n    cursor: default;\r\n}\r\n.leaflet-sbs-range:disabled::-ms-thumb {\r\n    cursor: default;\r\n}\r\n.leaflet-sbs-range:disabled::-webkit-slider-thumb {\r\n    cursor: default;\r\n}\r\n.leaflet-sbs-range:disabled {\r\n    cursor: default;\r\n}\r\n.leaflet-sbs-range:focus {\r\n    outline: none!important;\r\n}\r\n.leaflet-sbs-range::-moz-focus-outer {\r\n    border: 0;\r\n}\r\n\r\n';e("./node_modules/cssify")(n,void 0,"_1tlt668"),r.exports=n},{"./node_modules/cssify":3}]},{},[1]);


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "leaflet-side-by-side",
 3 |   "version": "2.2.0",
 4 |   "description": "Compare two Leaflet layers side by side",
 5 |   "main": "index.js",
 6 |   "browserify": {
 7 |     "transform": [
 8 |       "css-img-datauri-stream",
 9 |       "cssify",
10 |       "browserify-shim"
11 |     ]
12 |   },
13 |   "browserify-shim": {
14 |     "leaflet": "global:L"
15 |   },
16 |   "scripts": {
17 |     "build": "browserify index.js > leaflet-side-by-side.js",
18 |     "postbuild": "uglifyjs leaflet-side-by-side.js -cm -o leaflet-side-by-side.min.js",
19 |     "preversion": "npm test && npm run build",
20 |     "lint": "standard index.js",
21 |     "start": "budo index.js:leaflet-side-by-side.js --live",
22 |     "test": "npm run lint"
23 |   },
24 |   "keywords": [
25 |     "leaflet"
26 |   ],
27 |   "author": "Gregor MacLennan / Digital Democracy",
28 |   "license": "MIT",
29 |   "devDependencies": {
30 |     "browserify": "^16.2.2",
31 |     "budo": "^11.2.0",
32 |     "standard": "^11.0.1",
33 |     "uglify-js": "^3.3.24"
34 |   },
35 |   "dependencies": {
36 |     "browserify-shim": "^3.8.14",
37 |     "css-img-datauri-stream": "^0.1.5",
38 |     "cssify": "^1.0.3",
39 |     "leaflet": ">=0.7.7 <2.0.0"
40 |   },
41 |   "repository": {
42 |     "type": "git",
43 |     "url": "git+https://github.com/digidem/leaflet-side-by-side.git"
44 |   },
45 |   "bugs": {
46 |     "url": "https://github.com/digidem/leaflet-side-by-side/issues"
47 |   },
48 |   "homepage": "https://github.com/digidem/leaflet-side-by-side#readme"
49 | }
50 | 


--------------------------------------------------------------------------------
/range-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/digidem/leaflet-side-by-side/cd74619044c9f0533efa090161c335f2ccea13e7/range-icon.png


--------------------------------------------------------------------------------
/range.css:
--------------------------------------------------------------------------------
  1 | .leaflet-sbs-range {
  2 |     -webkit-appearance: none;
  3 |     display: inline-block!important;
  4 |     vertical-align: middle;
  5 |     height: 0;
  6 |     padding: 0;
  7 |     margin: 0;
  8 |     border: 0;
  9 |     background: rgba(0, 0, 0, 0.25);
 10 |     min-width: 100px;
 11 |     cursor: pointer;
 12 |     pointer-events: none;
 13 |     z-index: 999;
 14 | }
 15 | .leaflet-sbs-range::-ms-fill-upper {
 16 |     background: transparent;
 17 | }
 18 | .leaflet-sbs-range::-ms-fill-lower {
 19 |     background: rgba(255, 255, 255, 0.25);
 20 | }
 21 | /* Browser thingies */
 22 | 
 23 | .leaflet-sbs-range::-moz-range-track {
 24 |     opacity: 0;
 25 | }
 26 | .leaflet-sbs-range::-ms-track {
 27 |     opacity: 0;
 28 | }
 29 | .leaflet-sbs-range::-ms-tooltip {
 30 |     display: none;
 31 | }
 32 | /* For whatever reason, these need to be defined
 33 |  * on their own so dont group them */
 34 | 
 35 | .leaflet-sbs-range::-webkit-slider-thumb {
 36 |     -webkit-appearance: none;
 37 |     margin: 0;
 38 |     padding: 0;
 39 |     background: #fff;
 40 |     height: 40px;
 41 |     width: 40px;
 42 |     border-radius: 20px;
 43 |     cursor: ew-resize;
 44 |     pointer-events: auto;
 45 |     border: 1px solid #ddd;
 46 |     background-image: url(range-icon.png);
 47 |     background-position: 50% 50%;
 48 |     background-repeat: no-repeat;
 49 |     background-size: 40px 40px;
 50 | }
 51 | .leaflet-sbs-range::-ms-thumb {
 52 |     margin: 0;
 53 |     padding: 0;
 54 |     background: #fff;
 55 |     height: 40px;
 56 |     width: 40px;
 57 |     border-radius: 20px;
 58 |     cursor: ew-resize;
 59 |     pointer-events: auto;
 60 |     border: 1px solid #ddd;
 61 |     background-image: url(range-icon.png);
 62 |     background-position: 50% 50%;
 63 |     background-repeat: no-repeat;
 64 |     background-size: 40px 40px;
 65 | }
 66 | .leaflet-sbs-range::-moz-range-thumb {
 67 |     padding: 0;
 68 |     right: 0    ;
 69 |     background: #fff;
 70 |     height: 40px;
 71 |     width: 40px;
 72 |     border-radius: 20px;
 73 |     cursor: ew-resize;
 74 |     pointer-events: auto;
 75 |     border: 1px solid #ddd;
 76 |     background-image: url(range-icon.png);
 77 |     background-position: 50% 50%;
 78 |     background-repeat: no-repeat;
 79 |     background-size: 40px 40px;
 80 | }
 81 | .leaflet-sbs-range:disabled::-moz-range-thumb {
 82 |     cursor: default;
 83 | }
 84 | .leaflet-sbs-range:disabled::-ms-thumb {
 85 |     cursor: default;
 86 | }
 87 | .leaflet-sbs-range:disabled::-webkit-slider-thumb {
 88 |     cursor: default;
 89 | }
 90 | .leaflet-sbs-range:disabled {
 91 |     cursor: default;
 92 | }
 93 | .leaflet-sbs-range:focus {
 94 |     outline: none!important;
 95 | }
 96 | .leaflet-sbs-range::-moz-focus-outer {
 97 |     border: 0;
 98 | }
 99 | 
100 | 


--------------------------------------------------------------------------------
/screencast.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/digidem/leaflet-side-by-side/cd74619044c9f0533efa090161c335f2ccea13e7/screencast.gif


--------------------------------------------------------------------------------