added adjust to geoportales

.gitignore

@@ -1 +1 @@
-node_modules
+node_modules

.npmignore

@@ -1,3 +1,3 @@
-leaflet-side-by-side.js
-leaflet-side-by-side.min.js
-screencast.gif
+leaflet-side-by-side.js
+leaflet-side-by-side.min.js
+screencast.gif

CHANGELOG.md

@@ -1,34 +1,34 @@
-# Change Log
-
-All notable changes to this project will be documented in this file.
-This project adheres to [Semantic Versioning](http://semver.org/).
-
-## Unreleased
-
-- ADDED: Allows Leaflet version 0.7.7 through 1.x
-
-## [v2.0.0] - 2015-12-08
-
-- ADDED: Add `setLeftLayers()` and `setRightLayers()` methods
-- ADDED: `options.padding`
-- ADDED: `getPosition()` returns the x coordinate (relative to the map container) of the divider
-- FIXED: **[BREAKING]** Export factory function on `L.control` not `L.Control`
-- FIXED: Slider drag was not working on touch devices
-
-## [v1.1.1] - 2015-12-03
-
-- FIXED: fix package.json settings for npm distribution
-
-## [v1.1.0] - 2015-12-03
-
-- ADDED: Events
-- FIXED: Fix initial divider position in Firefox, should start in middle of map
-
-## v1.0.2 - 2015-12-02
-
-Initial release
-
-[Unreleased]: https://github.com/digidem/leaflet-side-by-side/compare/v2.0.0...HEAD
-[Unreleased]: https://github.com/digidem/leaflet-side-by-side/compare/v1.1.1...v2.0.0
-[v1.1.1]: https://github.com/digidem/leaflet-side-by-side/compare/v1.1.0...v1.1.1
-[v1.1.0]: https://github.com/digidem/leaflet-side-by-side/compare/v1.0.2...v1.1.0
+# Change Log
+
+All notable changes to this project will be documented in this file.
+This project adheres to [Semantic Versioning](http://semver.org/).
+
+## Unreleased
+
+- ADDED: Allows Leaflet version 0.7.7 through 1.x
+
+## [v2.0.0] - 2015-12-08
+
+- ADDED: Add `setLeftLayers()` and `setRightLayers()` methods
+- ADDED: `options.padding`
+- ADDED: `getPosition()` returns the x coordinate (relative to the map container) of the divider
+- FIXED: **[BREAKING]** Export factory function on `L.control` not `L.Control`
+- FIXED: Slider drag was not working on touch devices
+
+## [v1.1.1] - 2015-12-03
+
+- FIXED: fix package.json settings for npm distribution
+
+## [v1.1.0] - 2015-12-03
+
+- ADDED: Events
+- FIXED: Fix initial divider position in Firefox, should start in middle of map
+
+## v1.0.2 - 2015-12-02
+
+Initial release
+
+[Unreleased]: https://github.com/digidem/leaflet-side-by-side/compare/v2.0.0...HEAD
+[Unreleased]: https://github.com/digidem/leaflet-side-by-side/compare/v1.1.1...v2.0.0
+[v1.1.1]: https://github.com/digidem/leaflet-side-by-side/compare/v1.1.0...v1.1.1
+[v1.1.0]: https://github.com/digidem/leaflet-side-by-side/compare/v1.0.2...v1.1.0

LICENSE

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

README.md

@@ -1,76 +1,76 @@
-# leaflet-side-by-side
-
-A Leaflet control to add a split screen to compare two map overlays.
-
-![screencast example](screencast.gif)
-
-### L.control.sideBySide(_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 |
-
-### Usage
-
-Add the script to the top of your page (css is included in the javascript):
-
-```html
-<script src="leaflet-side-by-side.js"></script>
-```
-
-Or if you are using browserify:
-
-```js
-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:
-
-```js
-var map = L.map('map').setView([51.505, -0.09], 13);
-
-var myLayer1 = L.tileLayer(...).addTo(map);
-
-var myLayer2 = L.tileLayer(...).addTo(map)
-
-L.control.sideBySide(myLayer1, myLayer2).addTo(map);
-```
-
-### 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
+# leaflet-side-by-side
+
+A Leaflet control to add a split screen to compare two map overlays.
+
+![screencast example](screencast.gif)
+
+### L.control.sideBySide(_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 |
+
+### Usage
+
+Add the script to the top of your page (css is included in the javascript):
+
+```html
+<script src="leaflet-side-by-side.js"></script>
+```
+
+Or if you are using browserify:
+
+```js
+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:
+
+```js
+var map = L.map('map').setView([51.505, -0.09], 13);
+
+var myLayer1 = L.tileLayer(...).addTo(map);
+
+var myLayer2 = L.tileLayer(...).addTo(map)
+
+L.control.sideBySide(myLayer1, myLayer2).addTo(map);
+```
+
+### 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

index.html

@@ -1,46 +1,46 @@
-<!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([51.505, -0.09], 13);
-
-    var osmLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
-        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap<\/a> contributors'
-    }).addTo(map);
-
-    var stamenLayer = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png', {
-        attribution:
-            'Map tiles by <a href="http://stamen.com">Stamen Design<\/a>, ' +
-            '<a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0<\/a> &mdash; ' +
-            'Map data {attribution.OpenStreetMap}',
-        minZoom: 1,
-        maxZoom: 16
-    }).addTo(map)
-
-    L.control.sideBySide(stamenLayer, osmLayer).addTo(map);
-    </script>
-</body>
-</html>
+<!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([51.505, -0.09], 13);
+
+    var osmLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap<\/a> contributors'
+    }).addTo(map);
+
+    var stamenLayer = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png', {
+        attribution:
+            'Map tiles by <a href="http://stamen.com">Stamen Design<\/a>, ' +
+            '<a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0<\/a> &mdash; ' +
+            'Map data {attribution.OpenStreetMap}',
+        minZoom: 1,
+        maxZoom: 16
+    }).addTo(map)
+
+    L.control.sideBySide(stamenLayer, osmLayer).addTo(map);
+    </script>
+</body>
+</html>

index.js

@@ -1,198 +1,198 @@
-var L = require('leaflet')
-require('./layout.css')
-require('./range.css')
-
-var mapWasDragEnabled
-var mapWasTapEnabled
-
-// Leaflet v0.7 backwards compatibility
-function on (el, types, fn, context) {
-  types.split(' ').forEach(function (type) {
-    L.DomEvent.on(el, type, fn, context)
-  })
-}
-
-// Leaflet v0.7 backwards compatibility
-function off (el, types, fn, context) {
-  types.split(' ').forEach(function (type) {
-    L.DomEvent.off(el, type, fn, context)
-  })
-}
-
-function getRangeEvent (rangeInput) {
-  return 'oninput' in rangeInput ? 'input' : 'change'
-}
-
-function cancelMapDrag () {
-  mapWasDragEnabled = this._map.dragging.enabled()
-  mapWasTapEnabled = this._map.tap && this._map.tap.enabled()
-  this._map.dragging.disable()
-  this._map.tap && this._map.tap.disable()
-}
-
-function uncancelMapDrag (e) {
-  this._refocusOnMap(e)
-  if (mapWasDragEnabled) {
-    this._map.dragging.enable()
-  }
-  if (mapWasTapEnabled) {
-    this._map.tap.enable()
-  }
-}
-
-// convert arg to an array - returns empty array if arg is undefined
-function asArray (arg) {
-  return (arg === 'undefined') ? [] : Array.isArray(arg) ? arg : [arg]
-}
-
-function noop () {}
-
-L.Control.SideBySide = L.Control.extend({
-  options: {
-    thumbSize: 42,
-    padding: 0
-  },
-
-  initialize: function (leftLayers, rightLayers, options) {
-    this.setLeftLayers(leftLayers)
-    this.setRightLayers(rightLayers)
-    L.setOptions(this, options)
-  },
-
-  getPosition: function () {
-    var rangeValue = this._range.value
-    var offset = (0.5 - rangeValue) * (2 * this.options.padding + this.options.thumbSize)
-    return this._map.getSize().x * rangeValue + offset
-  },
-
-  setPosition: noop,
-
-  includes: L.Evented.prototype || L.Mixin.Events,
-
-  addTo: function (map) {
-    this.remove()
-    this._map = map
-
-    var container = this._container = L.DomUtil.create('div', 'leaflet-sbs', map._controlContainer)
-
-    this._divider = L.DomUtil.create('div', 'leaflet-sbs-divider', container)
-    var range = this._range = L.DomUtil.create('input', 'leaflet-sbs-range', container)
-    range.type = 'range'
-    range.min = 0
-    range.max = 1
-    range.step = 'any'
-    range.value = 0.5
-    range.style.paddingLeft = range.style.paddingRight = this.options.padding + 'px'
-    this._addEvents()
-    this._updateLayers()
-    return this
-  },
-
-  remove: function () {
-    if (!this._map) {
-      return this
-    }
-    if (this._leftLayer) {
-      this._leftLayer.getContainer().style.clip = ''
-    }
-    if (this._rightLayer) {
-      this._rightLayer.getContainer().style.clip = ''
-    }
-    this._removeEvents()
-    L.DomUtil.remove(this._container)
-
-    this._map = null
-
-    return this
-  },
-
-  setLeftLayers: function (leftLayers) {
-    this._leftLayers = asArray(leftLayers)
-    this._updateLayers()
-    return this
-  },
-
-  setRightLayers: function (rightLayers) {
-    this._rightLayers = asArray(rightLayers)
-    this._updateLayers()
-    return this
-  },
-
-  _updateClip: function () {
-    var map = this._map
-    var nw = map.containerPointToLayerPoint([0, 0])
-    var se = map.containerPointToLayerPoint(map.getSize())
-    var clipX = nw.x + this.getPosition()
-    var dividerX = this.getPosition()
-
-    this._divider.style.left = dividerX + 'px'
-    this.fire('dividermove', {x: dividerX})
-    var clipLeft = 'rect(' + [nw.y, clipX, se.y, nw.x].join('px,') + 'px)'
-    var clipRight = 'rect(' + [nw.y, se.x, se.y, clipX].join('px,') + 'px)'
-    if (this._leftLayer) {
-      this._leftLayer.getContainer().style.clip = clipLeft
-    }
-    if (this._rightLayer) {
-      this._rightLayer.getContainer().style.clip = clipRight
-    }
-  },
-
-  _updateLayers: function () {
-    if (!this._map) {
-      return this
-    }
-    var prevLeft = this._leftLayer
-    var prevRight = this._rightLayer
-    this._leftLayer = this._rightLayer = null
-    this._leftLayers.forEach(function (layer) {
-      if (this._map.hasLayer(layer)) {
-        this._leftLayer = layer
-      }
-    }, this)
-    this._rightLayers.forEach(function (layer) {
-      if (this._map.hasLayer(layer)) {
-        this._rightLayer = layer
-      }
-    }, this)
-    if (prevLeft !== this._leftLayer) {
-      prevLeft && this.fire('leftlayerremove', {layer: prevLeft})
-      this._leftLayer && this.fire('leftlayeradd', {layer: this._leftLayer})
-    }
-    if (prevRight !== this._rightLayer) {
-      prevRight && this.fire('rightlayerremove', {layer: prevRight})
-      this._rightLayer && this.fire('rightlayeradd', {layer: this._rightLayer})
-    }
-    this._updateClip()
-  },
-
-  _addEvents: function () {
-    var range = this._range
-    var map = this._map
-    if (!map || !range) return
-    map.on('move', this._updateClip, this)
-    map.on('layeradd layerremove', this._updateLayers, this)
-    on(range, getRangeEvent(range), this._updateClip, this)
-    on(range, L.Browser.touch ? 'touchstart' : 'mousedown', cancelMapDrag, this)
-    on(range, L.Browser.touch ? 'touchend' : 'mouseup', uncancelMapDrag, this)
-  },
-
-  _removeEvents: function () {
-    var range = this._range
-    var map = this._map
-    if (range) {
-      off(range, getRangeEvent(range), this._updateClip, this)
-      off(range, L.Browser.touch ? 'touchstart' : 'mousedown', cancelMapDrag, this)
-      off(range, L.Browser.touch ? 'touchend' : 'mouseup', uncancelMapDrag, this)
-    }
-    if (map) {
-      map.off('layeradd layerremove', this._updateLayers, this)
-      map.off('move', this._updateClip, this)
-    }
-  }
-})
-
-L.control.sideBySide = function (leftLayers, rightLayers, options) {
-  return new L.Control.SideBySide(leftLayers, rightLayers, options)
-}
-
-module.exports = L.Control.SideBySide
+var L = require('leaflet')
+require('./layout.css')
+require('./range.css')
+
+var mapWasDragEnabled
+var mapWasTapEnabled
+
+// Leaflet v0.7 backwards compatibility
+function on (el, types, fn, context) {
+  types.split(' ').forEach(function (type) {
+    L.DomEvent.on(el, type, fn, context)
+  })
+}
+
+// Leaflet v0.7 backwards compatibility
+function off (el, types, fn, context) {
+  types.split(' ').forEach(function (type) {
+    L.DomEvent.off(el, type, fn, context)
+  })
+}
+
+function getRangeEvent (rangeInput) {
+  return 'oninput' in rangeInput ? 'input' : 'change'
+}
+
+function cancelMapDrag () {
+  mapWasDragEnabled = this._map.dragging.enabled()
+  mapWasTapEnabled = this._map.tap && this._map.tap.enabled()
+  this._map.dragging.disable()
+  this._map.tap && this._map.tap.disable()
+}
+
+function uncancelMapDrag (e) {
+  this._refocusOnMap(e)
+  if (mapWasDragEnabled) {
+    this._map.dragging.enable()
+  }
+  if (mapWasTapEnabled) {
+    this._map.tap.enable()
+  }
+}
+
+// convert arg to an array - returns empty array if arg is undefined
+function asArray (arg) {
+  return (arg === 'undefined') ? [] : Array.isArray(arg) ? arg : [arg]
+}
+
+function noop () {}
+
+L.Control.SideBySide = L.Control.extend({
+  options: {
+    thumbSize: 42,
+    padding: 0
+  },
+
+  initialize: function (leftLayers, rightLayers, options) {
+    this.setLeftLayers(leftLayers)
+    this.setRightLayers(rightLayers)
+    L.setOptions(this, options)
+  },
+
+  getPosition: function () {
+    var rangeValue = this._range.value
+    var offset = (0.5 - rangeValue) * (2 * this.options.padding + this.options.thumbSize)
+    return this._map.getSize().x * rangeValue + offset
+  },
+
+  setPosition: noop,
+
+  includes: L.Evented.prototype || L.Mixin.Events,
+
+  addTo: function (map) {
+    this.remove()
+    this._map = map
+
+    var container = this._container = L.DomUtil.create('div', 'leaflet-sbs', map._controlContainer)
+
+    this._divider = L.DomUtil.create('div', 'leaflet-sbs-divider', container)
+    var range = this._range = L.DomUtil.create('input', 'leaflet-sbs-range', container)
+    range.type = 'range'
+    range.min = 0
+    range.max = 1
+    range.step = 'any'
+    range.value = 0.5
+    range.style.paddingLeft = range.style.paddingRight = this.options.padding + 'px'
+    this._addEvents()
+    this._updateLayers()
+    return this
+  },
+
+  remove: function () {
+    if (!this._map) {
+      return this
+    }
+    if (this._leftLayer) {
+      this._leftLayer.getContainer().style.clip = ''
+    }
+    if (this._rightLayer) {
+      this._rightLayer.getContainer().style.clip = ''
+    }
+    this._removeEvents()
+    L.DomUtil.remove(this._container)
+
+    this._map = null
+
+    return this
+  },
+
+  setLeftLayers: function (leftLayers) {
+    this._leftLayers = asArray(leftLayers)
+    this._updateLayers()
+    return this
+  },
+
+  setRightLayers: function (rightLayers) {
+    this._rightLayers = asArray(rightLayers)
+    this._updateLayers()
+    return this
+  },
+
+  _updateClip: function () {
+    var map = this._map
+    var nw = map.containerPointToLayerPoint([0, 0])
+    var se = map.containerPointToLayerPoint(map.getSize())
+    var clipX = nw.x + this.getPosition()
+    var dividerX = this.getPosition()
+
+    this._divider.style.left = dividerX + 'px'
+    this.fire('dividermove', {x: dividerX})
+    var clipLeft = 'rect(' + [nw.y, clipX, se.y, nw.x].join('px,') + 'px)'
+    var clipRight = 'rect(' + [nw.y, se.x, se.y, clipX].join('px,') + 'px)'
+    if (this._leftLayer) {
+      this._leftLayer.getContainer().style.clip = clipLeft
+    }
+    if (this._rightLayer) {
+      this._rightLayer.getContainer().style.clip = clipRight
+    }
+  },
+
+  _updateLayers: function () {
+    if (!this._map) {
+      return this
+    }
+    var prevLeft = this._leftLayer
+    var prevRight = this._rightLayer
+    this._leftLayer = this._rightLayer = null
+    this._leftLayers.forEach(function (layer) {
+      if (this._map.hasLayer(layer)) {
+        this._leftLayer = layer
+      }
+    }, this)
+    this._rightLayers.forEach(function (layer) {
+      if (this._map.hasLayer(layer)) {
+        this._rightLayer = layer
+      }
+    }, this)
+    if (prevLeft !== this._leftLayer) {
+      prevLeft && this.fire('leftlayerremove', {layer: prevLeft})
+      this._leftLayer && this.fire('leftlayeradd', {layer: this._leftLayer})
+    }
+    if (prevRight !== this._rightLayer) {
+      prevRight && this.fire('rightlayerremove', {layer: prevRight})
+      this._rightLayer && this.fire('rightlayeradd', {layer: this._rightLayer})
+    }
+    this._updateClip()
+  },
+
+  _addEvents: function () {
+    var range = this._range
+    var map = this._map
+    if (!map || !range) return
+    map.on('move', this._updateClip, this)
+    map.on('layeradd layerremove', this._updateLayers, this)
+    on(range, getRangeEvent(range), this._updateClip, this)
+    on(range, L.Browser.touch ? 'touchstart' : 'mousedown', cancelMapDrag, this)
+    on(range, L.Browser.touch ? 'touchend' : 'mouseup', uncancelMapDrag, this)
+  },
+
+  _removeEvents: function () {
+    var range = this._range
+    var map = this._map
+    if (range) {
+      off(range, getRangeEvent(range), this._updateClip, this)
+      off(range, L.Browser.touch ? 'touchstart' : 'mousedown', cancelMapDrag, this)
+      off(range, L.Browser.touch ? 'touchend' : 'mouseup', uncancelMapDrag, this)
+    }
+    if (map) {
+      map.off('layeradd layerremove', this._updateLayers, this)
+      map.off('move', this._updateClip, this)
+    }
+  }
+})
+
+L.control.sideBySide = function (leftLayers, rightLayers, options) {
+  return new L.Control.SideBySide(leftLayers, rightLayers, options)
+}
+
+module.exports = L.Control.SideBySide

layout.css

@@ -1,17 +1,17 @@
-.leaflet-sbs-range {
-    position: absolute;
-    top: 50%;
-    width: 100%;
-    z-index: 999;
-}
-.leaflet-sbs-divider {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 50%;
-    margin-left: -2px;
-    width: 4px;
-    background-color: #fff;
-    pointer-events: none;
-    z-index: 999;
-}
+.leaflet-sbs-range {
+    position: absolute;
+    top: 50%;
+    width: 100%;
+    z-index: 999;
+}
+.leaflet-sbs-divider {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    margin-left: -2px;
+    width: 4px;
+    background-color: #fff;
+    pointer-events: none;
+    z-index: 999;
+}

leaflet-side-by-side.js

@@ -1,270 +1,270 @@
-(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){
-(function (global){
-var L = (typeof window !== "undefined" ? window['L'] : typeof global !== "undefined" ? global['L'] : null)
-require('./layout.css')
-require('./range.css')
-
-var mapWasDragEnabled
-var mapWasTapEnabled
-
-// Leaflet v0.7 backwards compatibility
-function on (el, types, fn, context) {
-  types.split(' ').forEach(function (type) {
-    L.DomEvent.on(el, type, fn, context)
-  })
-}
-
-// Leaflet v0.7 backwards compatibility
-function off (el, types, fn, context) {
-  types.split(' ').forEach(function (type) {
-    L.DomEvent.off(el, type, fn, context)
-  })
-}
-
-function getRangeEvent (rangeInput) {
-  return 'oninput' in rangeInput ? 'input' : 'change'
-}
-
-function cancelMapDrag () {
-  mapWasDragEnabled = this._map.dragging.enabled()
-  mapWasTapEnabled = this._map.tap && this._map.tap.enabled()
-  this._map.dragging.disable()
-  this._map.tap && this._map.tap.disable()
-}
-
-function uncancelMapDrag (e) {
-  this._refocusOnMap(e)
-  if (mapWasDragEnabled) {
-    this._map.dragging.enable()
-  }
-  if (mapWasTapEnabled) {
-    this._map.tap.enable()
-  }
-}
-
-// convert arg to an array - returns empty array if arg is undefined
-function asArray (arg) {
-  return (arg === 'undefined') ? [] : Array.isArray(arg) ? arg : [arg]
-}
-
-function noop () {}
-
-L.Control.SideBySide = L.Control.extend({
-  options: {
-    thumbSize: 42,
-    padding: 0
-  },
-
-  initialize: function (leftLayers, rightLayers, options) {
-    this.setLeftLayers(leftLayers)
-    this.setRightLayers(rightLayers)
-    L.setOptions(this, options)
-  },
-
-  getPosition: function () {
-    var rangeValue = this._range.value
-    var offset = (0.5 - rangeValue) * (2 * this.options.padding + this.options.thumbSize)
-    return this._map.getSize().x * rangeValue + offset
-  },
-
-  setPosition: noop,
-
-  includes: L.Evented.prototype || L.Mixin.Events,
-
-  addTo: function (map) {
-    this.remove()
-    this._map = map
-
-    var container = this._container = L.DomUtil.create('div', 'leaflet-sbs', map._controlContainer)
-
-    this._divider = L.DomUtil.create('div', 'leaflet-sbs-divider', container)
-    var range = this._range = L.DomUtil.create('input', 'leaflet-sbs-range', container)
-    range.type = 'range'
-    range.min = 0
-    range.max = 1
-    range.step = 'any'
-    range.value = 0.5
-    range.style.paddingLeft = range.style.paddingRight = this.options.padding + 'px'
-    this._addEvents()
-    this._updateLayers()
-    return this
-  },
-
-  remove: function () {
-    if (!this._map) {
-      return this
-    }
-    if (this._leftLayer) {
-      this._leftLayer.getContainer().style.clip = ''
-    }
-    if (this._rightLayer) {
-      this._rightLayer.getContainer().style.clip = ''
-    }
-    this._removeEvents()
-    L.DomUtil.remove(this._container)
-
-    this._map = null
-
-    return this
-  },
-
-  setLeftLayers: function (leftLayers) {
-    this._leftLayers = asArray(leftLayers)
-    this._updateLayers()
-    return this
-  },
-
-  setRightLayers: function (rightLayers) {
-    this._rightLayers = asArray(rightLayers)
-    this._updateLayers()
-    return this
-  },
-
-  _updateClip: function () {
-    var map = this._map
-    var nw = map.containerPointToLayerPoint([0, 0])
-    var se = map.containerPointToLayerPoint(map.getSize())
-    var clipX = nw.x + this.getPosition()
-    var dividerX = this.getPosition()
-
-    this._divider.style.left = dividerX + 'px'
-    this.fire('dividermove', {x: dividerX})
-    var clipLeft = 'rect(' + [nw.y, clipX, se.y, nw.x].join('px,') + 'px)'
-    var clipRight = 'rect(' + [nw.y, se.x, se.y, clipX].join('px,') + 'px)'
-    if (this._leftLayer) {
-      this._leftLayer.getContainer().style.clip = clipLeft
-    }
-    if (this._rightLayer) {
-      this._rightLayer.getContainer().style.clip = clipRight
-    }
-  },
-
-  _updateLayers: function () {
-    if (!this._map) {
-      return this
-    }
-    var prevLeft = this._leftLayer
-    var prevRight = this._rightLayer
-    this._leftLayer = this._rightLayer = null
-    this._leftLayers.forEach(function (layer) {
-      if (this._map.hasLayer(layer)) {
-        this._leftLayer = layer
-      }
-    }, this)
-    this._rightLayers.forEach(function (layer) {
-      if (this._map.hasLayer(layer)) {
-        this._rightLayer = layer
-      }
-    }, this)
-    if (prevLeft !== this._leftLayer) {
-      prevLeft && this.fire('leftlayerremove', {layer: prevLeft})
-      this._leftLayer && this.fire('leftlayeradd', {layer: this._leftLayer})
-    }
-    if (prevRight !== this._rightLayer) {
-      prevRight && this.fire('rightlayerremove', {layer: prevRight})
-      this._rightLayer && this.fire('rightlayeradd', {layer: this._rightLayer})
-    }
-    this._updateClip()
-  },
-
-  _addEvents: function () {
-    var range = this._range
-    var map = this._map
-    if (!map || !range) return
-    map.on('move', this._updateClip, this)
-    map.on('layeradd layerremove', this._updateLayers, this)
-    on(range, getRangeEvent(range), this._updateClip, this)
-    on(range, L.Browser.touch ? 'touchstart' : 'mousedown', cancelMapDrag, this)
-    on(range, L.Browser.touch ? 'touchend' : 'mouseup', uncancelMapDrag, this)
-  },
-
-  _removeEvents: function () {
-    var range = this._range
-    var map = this._map
-    if (range) {
-      off(range, getRangeEvent(range), this._updateClip, this)
-      off(range, L.Browser.touch ? 'touchstart' : 'mousedown', cancelMapDrag, this)
-      off(range, L.Browser.touch ? 'touchend' : 'mouseup', uncancelMapDrag, this)
-    }
-    if (map) {
-      map.off('layeradd layerremove', this._updateLayers, this)
-      map.off('move', this._updateClip, this)
-    }
-  }
-})
-
-L.control.sideBySide = function (leftLayers, rightLayers, options) {
-  return new L.Control.SideBySide(leftLayers, rightLayers, options)
-}
-
-module.exports = L.Control.SideBySide
-
-}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
-},{"./layout.css":2,"./range.css":4}],2:[function(require,module,exports){
-var inject = require('./node_modules/cssify');
-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";
-inject(css, undefined, '_i6aomd');
-module.exports = css;
-
-},{"./node_modules/cssify":3}],3:[function(require,module,exports){
-'use strict'
-
-function injectStyleTag (document, fileName, cb) {
-  var style = document.getElementById(fileName)
-
-  if (style) {
-    cb(style)
-  } else {
-    var head = document.getElementsByTagName('head')[0]
-
-    style = document.createElement('style')
-    if (fileName != null) style.id = fileName
-    cb(style)
-    head.appendChild(style)
-  }
-
-  return style
-}
-
-module.exports = function (css, customDocument, fileName) {
-  var doc = customDocument || document
-  /* istanbul ignore if: not supported by Electron */
-  if (doc.createStyleSheet) {
-    var sheet = doc.createStyleSheet()
-    sheet.cssText = css
-    return sheet.ownerNode
-  } else {
-    return injectStyleTag(doc, fileName, function (style) {
-      /* istanbul ignore if: not supported by Electron */
-      if (style.styleSheet) {
-        style.styleSheet.cssText = css
-      } else {
-        style.innerHTML = css
-      }
-    })
-  }
-}
-
-module.exports.byUrl = function (url) {
-  /* istanbul ignore if: not supported by Electron */
-  if (document.createStyleSheet) {
-    return document.createStyleSheet(url).ownerNode
-  } else {
-    var head = document.getElementsByTagName('head')[0]
-    var link = document.createElement('link')
-
-    link.rel = 'stylesheet'
-    link.href = url
-
-    head.appendChild(link)
-    return link
-  }
-}
-
-},{}],4:[function(require,module,exports){
-var inject = require('./node_modules/cssify');
-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";
-inject(css, undefined, '_1tlt668');
-module.exports = css;
-
-},{"./node_modules/cssify":3}]},{},[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){
+(function (global){
+var L = (typeof window !== "undefined" ? window['L'] : typeof global !== "undefined" ? global['L'] : null)
+require('./layout.css')
+require('./range.css')
+
+var mapWasDragEnabled
+var mapWasTapEnabled
+
+// Leaflet v0.7 backwards compatibility
+function on (el, types, fn, context) {
+  types.split(' ').forEach(function (type) {
+    L.DomEvent.on(el, type, fn, context)
+  })
+}
+
+// Leaflet v0.7 backwards compatibility
+function off (el, types, fn, context) {
+  types.split(' ').forEach(function (type) {
+    L.DomEvent.off(el, type, fn, context)
+  })
+}
+
+function getRangeEvent (rangeInput) {
+  return 'oninput' in rangeInput ? 'input' : 'change'
+}
+
+function cancelMapDrag () {
+  mapWasDragEnabled = this._map.dragging.enabled()
+  mapWasTapEnabled = this._map.tap && this._map.tap.enabled()
+  this._map.dragging.disable()
+  this._map.tap && this._map.tap.disable()
+}
+
+function uncancelMapDrag (e) {
+  this._refocusOnMap(e)
+  if (mapWasDragEnabled) {
+    this._map.dragging.enable()
+  }
+  if (mapWasTapEnabled) {
+    this._map.tap.enable()
+  }
+}
+
+// convert arg to an array - returns empty array if arg is undefined
+function asArray (arg) {
+  return (arg === 'undefined') ? [] : Array.isArray(arg) ? arg : [arg]
+}
+
+function noop () {}
+
+L.Control.SideBySide = L.Control.extend({
+  options: {
+    thumbSize: 42,
+    padding: 0
+  },
+
+  initialize: function (leftLayers, rightLayers, options) {
+    this.setLeftLayers(leftLayers)
+    this.setRightLayers(rightLayers)
+    L.setOptions(this, options)
+  },
+
+  getPosition: function () {
+    var rangeValue = this._range.value
+    var offset = (0.5 - rangeValue) * (2 * this.options.padding + this.options.thumbSize)
+    return this._map.getSize().x * rangeValue + offset
+  },
+
+  setPosition: noop,
+
+  includes: L.Evented.prototype || L.Mixin.Events,
+
+  addTo: function (map) {
+    this.remove()
+    this._map = map
+
+    var container = this._container = L.DomUtil.create('div', 'leaflet-sbs', map._controlContainer)
+
+    this._divider = L.DomUtil.create('div', 'leaflet-sbs-divider', container)
+    var range = this._range = L.DomUtil.create('input', 'leaflet-sbs-range', container)
+    range.type = 'range'
+    range.min = 0
+    range.max = 1
+    range.step = 'any'
+    range.value = 0.5
+    range.style.paddingLeft = range.style.paddingRight = this.options.padding + 'px'
+    this._addEvents()
+    this._updateLayers()
+    return this
+  },
+
+  remove: function () {
+    if (!this._map) {
+      return this
+    }
+    if (this._leftLayer) {
+      this._leftLayer.getContainer().style.clip = ''
+    }
+    if (this._rightLayer) {
+      this._rightLayer.getContainer().style.clip = ''
+    }
+    this._removeEvents()
+    L.DomUtil.remove(this._container)
+
+    this._map = null
+
+    return this
+  },
+
+  setLeftLayers: function (leftLayers) {
+    this._leftLayers = asArray(leftLayers)
+    this._updateLayers()
+    return this
+  },
+
+  setRightLayers: function (rightLayers) {
+    this._rightLayers = asArray(rightLayers)
+    this._updateLayers()
+    return this
+  },
+
+  _updateClip: function () {
+    var map = this._map
+    var nw = map.containerPointToLayerPoint([0, 0])
+    var se = map.containerPointToLayerPoint(map.getSize())
+    var clipX = nw.x + this.getPosition()
+    var dividerX = this.getPosition()
+
+    this._divider.style.left = dividerX + 'px'
+    this.fire('dividermove', {x: dividerX})
+    var clipLeft = 'rect(' + [nw.y, clipX, se.y, nw.x].join('px,') + 'px)'
+    var clipRight = 'rect(' + [nw.y, se.x, se.y, clipX].join('px,') + 'px)'
+    if (this._leftLayer) {
+      this._leftLayer.getContainer().style.clip = clipLeft
+    }
+    if (this._rightLayer) {
+      this._rightLayer.getContainer().style.clip = clipRight
+    }
+  },
+
+  _updateLayers: function () {
+    if (!this._map) {
+      return this
+    }
+    var prevLeft = this._leftLayer
+    var prevRight = this._rightLayer
+    this._leftLayer = this._rightLayer = null
+    this._leftLayers.forEach(function (layer) {
+      if (this._map.hasLayer(layer)) {
+        this._leftLayer = layer
+      }
+    }, this)
+    this._rightLayers.forEach(function (layer) {
+      if (this._map.hasLayer(layer)) {
+        this._rightLayer = layer
+      }
+    }, this)
+    if (prevLeft !== this._leftLayer) {
+      prevLeft && this.fire('leftlayerremove', {layer: prevLeft})
+      this._leftLayer && this.fire('leftlayeradd', {layer: this._leftLayer})
+    }
+    if (prevRight !== this._rightLayer) {
+      prevRight && this.fire('rightlayerremove', {layer: prevRight})
+      this._rightLayer && this.fire('rightlayeradd', {layer: this._rightLayer})
+    }
+    this._updateClip()
+  },
+
+  _addEvents: function () {
+    var range = this._range
+    var map = this._map
+    if (!map || !range) return
+    map.on('move', this._updateClip, this)
+    map.on('layeradd layerremove', this._updateLayers, this)
+    on(range, getRangeEvent(range), this._updateClip, this)
+    on(range, L.Browser.touch ? 'touchstart' : 'mousedown', cancelMapDrag, this)
+    on(range, L.Browser.touch ? 'touchend' : 'mouseup', uncancelMapDrag, this)
+  },
+
+  _removeEvents: function () {
+    var range = this._range
+    var map = this._map
+    if (range) {
+      off(range, getRangeEvent(range), this._updateClip, this)
+      off(range, L.Browser.touch ? 'touchstart' : 'mousedown', cancelMapDrag, this)
+      off(range, L.Browser.touch ? 'touchend' : 'mouseup', uncancelMapDrag, this)
+    }
+    if (map) {
+      map.off('layeradd layerremove', this._updateLayers, this)
+      map.off('move', this._updateClip, this)
+    }
+  }
+})
+
+L.control.sideBySide = function (leftLayers, rightLayers, options) {
+  return new L.Control.SideBySide(leftLayers, rightLayers, options)
+}
+
+module.exports = L.Control.SideBySide
+
+}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
+},{"./layout.css":2,"./range.css":4}],2:[function(require,module,exports){
+var inject = require('./node_modules/cssify');
+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";
+inject(css, undefined, '_i6aomd');
+module.exports = css;
+
+},{"./node_modules/cssify":3}],3:[function(require,module,exports){
+'use strict'
+
+function injectStyleTag (document, fileName, cb) {
+  var style = document.getElementById(fileName)
+
+  if (style) {
+    cb(style)
+  } else {
+    var head = document.getElementsByTagName('head')[0]
+
+    style = document.createElement('style')
+    if (fileName != null) style.id = fileName
+    cb(style)
+    head.appendChild(style)
+  }
+
+  return style
+}
+
+module.exports = function (css, customDocument, fileName) {
+  var doc = customDocument || document
+  /* istanbul ignore if: not supported by Electron */
+  if (doc.createStyleSheet) {
+    var sheet = doc.createStyleSheet()
+    sheet.cssText = css
+    return sheet.ownerNode
+  } else {
+    return injectStyleTag(doc, fileName, function (style) {
+      /* istanbul ignore if: not supported by Electron */
+      if (style.styleSheet) {
+        style.styleSheet.cssText = css
+      } else {
+        style.innerHTML = css
+      }
+    })
+  }
+}
+
+module.exports.byUrl = function (url) {
+  /* istanbul ignore if: not supported by Electron */
+  if (document.createStyleSheet) {
+    return document.createStyleSheet(url).ownerNode
+  } else {
+    var head = document.getElementsByTagName('head')[0]
+    var link = document.createElement('link')
+
+    link.rel = 'stylesheet'
+    link.href = url
+
+    head.appendChild(link)
+    return link
+  }
+}
+
+},{}],4:[function(require,module,exports){
+var inject = require('./node_modules/cssify');
+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";
+inject(css, undefined, '_1tlt668');
+module.exports = css;
+
+},{"./node_modules/cssify":3}]},{},[1]);

package.json

@@ -1,49 +1,49 @@
-{
-  "name": "leaflet-side-by-side",
-  "version": "2.0.0",
-  "description": "Compare two Leaflet layers side by side",
-  "main": "index.js",
-  "browserify": {
-    "transform": [
-      "css-img-datauri-stream",
-      "cssify",
-      "browserify-shim"
-    ]
-  },
-  "browserify-shim": {
-    "leaflet": "global:L"
-  },
-  "scripts": {
-    "build": "browserify index.js > leaflet-side-by-side.js",
-    "postbuild": "uglifyjs leaflet-side-by-side.js -cm -o leaflet-side-by-side.min.js",
-    "preversion": "npm test && npm run build",
-    "lint": "standard index.js",
-    "start": "budo index.js:leaflet-side-by-side.js --live",
-    "test": "npm run lint"
-  },
-  "keywords": [
-    "leaflet"
-  ],
-  "author": "Gregor MacLennan / Digital Democracy",
-  "license": "MIT",
-  "devDependencies": {
-    "browserify": "^16.2.2",
-    "budo": "^11.2.0",
-    "standard": "^11.0.1",
-    "uglify-js": "^3.3.24"
-  },
-  "dependencies": {
-    "browserify-shim": "^3.8.14",
-    "css-img-datauri-stream": "^0.1.5",
-    "cssify": "^1.0.3",
-    "leaflet": ">=0.7.7 <2.0.0"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/digidem/leaflet-side-by-side.git"
-  },
-  "bugs": {
-    "url": "https://github.com/digidem/leaflet-side-by-side/issues"
-  },
-  "homepage": "https://github.com/digidem/leaflet-side-by-side#readme"
-}
+{
+  "name": "leaflet-side-by-side",
+  "version": "2.0.0",
+  "description": "Compare two Leaflet layers side by side",
+  "main": "index.js",
+  "browserify": {
+    "transform": [
+      "css-img-datauri-stream",
+      "cssify",
+      "browserify-shim"
+    ]
+  },
+  "browserify-shim": {
+    "leaflet": "global:L"
+  },
+  "scripts": {
+    "build": "browserify index.js > leaflet-side-by-side.js",
+    "postbuild": "uglifyjs leaflet-side-by-side.js -cm -o leaflet-side-by-side.min.js",
+    "preversion": "npm test && npm run build",
+    "lint": "standard index.js",
+    "start": "budo index.js:leaflet-side-by-side.js --live",
+    "test": "npm run lint"
+  },
+  "keywords": [
+    "leaflet"
+  ],
+  "author": "Gregor MacLennan / Digital Democracy",
+  "license": "MIT",
+  "devDependencies": {
+    "browserify": "^16.2.2",
+    "budo": "^11.2.0",
+    "standard": "^11.0.1",
+    "uglify-js": "^3.3.24"
+  },
+  "dependencies": {
+    "browserify-shim": "^3.8.14",
+    "css-img-datauri-stream": "^0.1.5",
+    "cssify": "^1.0.3",
+    "leaflet": ">=0.7.7 <2.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/digidem/leaflet-side-by-side.git"
+  },
+  "bugs": {
+    "url": "https://github.com/digidem/leaflet-side-by-side/issues"
+  },
+  "homepage": "https://github.com/digidem/leaflet-side-by-side#readme"
+}

range.css

@@ -1,99 +1,99 @@
-.leaflet-sbs-range {
-    -webkit-appearance: none;
-    display: inline-block!important;
-    vertical-align: middle;
-    height: 0;
-    padding: 0;
-    margin: 0;
-    border: 0;
-    background: rgba(0, 0, 0, 0.25);
-    min-width: 100px;
-    cursor: pointer;
-    pointer-events: none;
-    z-index: 999;
-}
-.leaflet-sbs-range::-ms-fill-upper {
-    background: transparent;
-}
-.leaflet-sbs-range::-ms-fill-lower {
-    background: rgba(255, 255, 255, 0.25);
-}
-/* Browser thingies */
-
-.leaflet-sbs-range::-moz-range-track {
-    opacity: 0;
-}
-.leaflet-sbs-range::-ms-track {
-    opacity: 0;
-}
-.leaflet-sbs-range::-ms-tooltip {
-    display: none;
-}
-/* For whatever reason, these need to be defined
- * on their own so dont group them */
-
-.leaflet-sbs-range::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    margin: 0;
-    padding: 0;
-    background: #fff;
-    height: 40px;
-    width: 40px;
-    border-radius: 20px;
-    cursor: ew-resize;
-    pointer-events: auto;
-    border: 1px solid #ddd;
-    background-image: url(range-icon.png);
-    background-position: 50% 50%;
-    background-repeat: no-repeat;
-    background-size: 40px 40px;
-}
-.leaflet-sbs-range::-ms-thumb {
-    margin: 0;
-    padding: 0;
-    background: #fff;
-    height: 40px;
-    width: 40px;
-    border-radius: 20px;
-    cursor: ew-resize;
-    pointer-events: auto;
-    border: 1px solid #ddd;
-    background-image: url(range-icon.png);
-    background-position: 50% 50%;
-    background-repeat: no-repeat;
-    background-size: 40px 40px;
-}
-.leaflet-sbs-range::-moz-range-thumb {
-    padding: 0;
-    right: 0    ;
-    background: #fff;
-    height: 40px;
-    width: 40px;
-    border-radius: 20px;
-    cursor: ew-resize;
-    pointer-events: auto;
-    border: 1px solid #ddd;
-    background-image: url(range-icon.png);
-    background-position: 50% 50%;
-    background-repeat: no-repeat;
-    background-size: 40px 40px;
-}
-.leaflet-sbs-range:disabled::-moz-range-thumb {
-    cursor: default;
-}
-.leaflet-sbs-range:disabled::-ms-thumb {
-    cursor: default;
-}
-.leaflet-sbs-range:disabled::-webkit-slider-thumb {
-    cursor: default;
-}
-.leaflet-sbs-range:disabled {
-    cursor: default;
-}
-.leaflet-sbs-range:focus {
-    outline: none!important;
-}
-.leaflet-sbs-range::-moz-focus-outer {
-    border: 0;
-}
-
+.leaflet-sbs-range {
+    -webkit-appearance: none;
+    display: inline-block!important;
+    vertical-align: middle;
+    height: 0;
+    padding: 0;
+    margin: 0;
+    border: 0;
+    background: rgba(0, 0, 0, 0.25);
+    min-width: 100px;
+    cursor: pointer;
+    pointer-events: none;
+    z-index: 999;
+}
+.leaflet-sbs-range::-ms-fill-upper {
+    background: transparent;
+}
+.leaflet-sbs-range::-ms-fill-lower {
+    background: rgba(255, 255, 255, 0.25);
+}
+/* Browser thingies */
+
+.leaflet-sbs-range::-moz-range-track {
+    opacity: 0;
+}
+.leaflet-sbs-range::-ms-track {
+    opacity: 0;
+}
+.leaflet-sbs-range::-ms-tooltip {
+    display: none;
+}
+/* For whatever reason, these need to be defined
+ * on their own so dont group them */
+
+.leaflet-sbs-range::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    margin: 0;
+    padding: 0;
+    background: #fff;
+    height: 40px;
+    width: 40px;
+    border-radius: 20px;
+    cursor: ew-resize;
+    pointer-events: auto;
+    border: 1px solid #ddd;
+    background-image: url(range-icon.png);
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+    background-size: 40px 40px;
+}
+.leaflet-sbs-range::-ms-thumb {
+    margin: 0;
+    padding: 0;
+    background: #fff;
+    height: 40px;
+    width: 40px;
+    border-radius: 20px;
+    cursor: ew-resize;
+    pointer-events: auto;
+    border: 1px solid #ddd;
+    background-image: url(range-icon.png);
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+    background-size: 40px 40px;
+}
+.leaflet-sbs-range::-moz-range-thumb {
+    padding: 0;
+    right: 0    ;
+    background: #fff;
+    height: 40px;
+    width: 40px;
+    border-radius: 20px;
+    cursor: ew-resize;
+    pointer-events: auto;
+    border: 1px solid #ddd;
+    background-image: url(range-icon.png);
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+    background-size: 40px 40px;
+}
+.leaflet-sbs-range:disabled::-moz-range-thumb {
+    cursor: default;
+}
+.leaflet-sbs-range:disabled::-ms-thumb {
+    cursor: default;
+}
+.leaflet-sbs-range:disabled::-webkit-slider-thumb {
+    cursor: default;
+}
+.leaflet-sbs-range:disabled {
+    cursor: default;
+}
+.leaflet-sbs-range:focus {
+    outline: none!important;
+}
+.leaflet-sbs-range::-moz-focus-outer {
+    border: 0;
+}
+