├── .gitignore ├── .npmignore ├── CHANGELOG.md ├── LICENSE ├── README.md ├── index.html ├── package-lock.json ├── package.json ├── screencast.gif ├── src ├── index.js ├── layout.css ├── leaflet-splitmap.js ├── range-icon.png └── range.css └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | dist/ 3 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | leaflet-splitmap.js 2 | screencast.gif 3 | -------------------------------------------------------------------------------- /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 | ## [leaflet-splitmap] 7 | 8 | - ADDED: Allows Leaflet version 0.7.7 through 1.x 9 | 10 | ## [leaflet-side-by-side 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 | ## [leaflet-side-by-side v1.1.1] - 2015-12-03 19 | 20 | - FIXED: fix package.json settings for npm distribution 21 | 22 | ## [leaflet-side-by-side 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 | ## [leaflet-side-by-side] v1.0.2 - 2015-12-02 28 | 29 | Initial release 30 | -------------------------------------------------------------------------------- /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-splitmap 2 | 3 | A Leaflet control to add a split screen to compare two map overlays. 4 | 5 | **This project is a fork of the leaflet-side-by-side plugin** 6 | 7 | ![screencast example](screencast.gif) 8 | 9 | ### L.control.splitMap(_leftLayer[s]_, _rightLayer[s]_) 10 | 11 | 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. 12 | 13 | ### Parameters 14 | 15 | | parameter | type | description | 16 | | ---------- | -------------- | ------------- | 17 | | `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 | 18 | | `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` | 19 | | `options` | Object | Options | 20 | | `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 | 21 | 22 | ### Events 23 | 24 | Subscribe to events using [these methods](http://leafletjs.com/reference.html#events) 25 | 26 | | Event | Data | Description | 27 | | ---------- | -------------- | ------------- | 28 | | `leftlayeradd` | [LayerEvent](http://leafletjs.com/reference.html#layer-event) | Fired when a layer is added to the left-hand-side pane | 29 | | `leftlayerremove` | [LayerEvent](http://leafletjs.com/reference.html#layer-event) | Fired when a layer is removed from the left-hand-side pane | 30 | | `rightlayeradd` | [LayerEvent](http://leafletjs.com/reference.html#layer-event) | Fired when a layer is added to the right-hand-side pane | 31 | | `rightlayerremove` | [LayerEvent](http://leafletjs.com/reference.html#layer-event) | You guessed it... fired when a layer is removed from the right-hand-side pane | 32 | | `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. | 33 | 34 | ### Methods 35 | 36 | | Method | Returns | Description | 37 | | ---------- | -------------- | ------------- | 38 | | `setLeftLayers` | `this` | Set the layer(s) for the left side | 39 | | `setRightLayers` | `this` | Set the layer(s) for the right side | 40 | 41 | ### Example 42 | 43 | [Live Example](http://lab.digital-democracy.org/leaflet-side-by-side/) see [source](index.html) 44 | 45 | ### Limitations 46 | 47 | - The divider is not movable with IE. 48 | - Probably won't work in IE8, but what does? 49 | 50 | ### License 51 | 52 | MIT 53 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Leaflet SplitMap 7 | 8 | 9 | 21 | 22 | 23 | 24 |
25 | 26 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "leaflet-splitmap", 3 | "version": "1.0.3", 4 | "description": "Compare two Leaflet layers side by side", 5 | "main": "src/index.js", 6 | "scripts": { 7 | "clean": "rimraf dist", 8 | "build": "webpack", 9 | "prepublish": "npm run clean && npm run build", 10 | "preversion": "npm test && npm run build", 11 | "lint": "standard index.js", 12 | "start": "budo --live", 13 | "test": "npm run lint" 14 | }, 15 | "keywords": [ 16 | "leaflet" 17 | ], 18 | "author": "Gregor MacLennan / Digital Democracy", 19 | "license": "MIT", 20 | "devDependencies": { 21 | "budo": "^7.1.0", 22 | "css-loader": "^0.28.7", 23 | "file-loader": "^0.11.2", 24 | "rimraf": "^2.6.1", 25 | "standard": "^5.4.1", 26 | "style-loader": "^0.18.1", 27 | "webpack": "^3.5.5" 28 | }, 29 | "dependencies": { 30 | "css-img-datauri-stream": "^0.1.5", 31 | "cssify": "^0.8.0", 32 | "leaflet": ">=0.7.7 <2.0.0" 33 | }, 34 | "repository": { 35 | "type": "git", 36 | "url": "git+https://github.com/QuantStack/leaflet-splitmap.git" 37 | }, 38 | "bugs": { 39 | "url": "https://github.com/QuantStack/leaflet-splitmap/issues" 40 | }, 41 | "homepage": "https://github.com/QuantStack/leaflet-splitmap#readme" 42 | } 43 | -------------------------------------------------------------------------------- /screencast.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/QuantStack/leaflet-splitmap/2fa719b418c16d0b25d098d7a8400afe4354872b/screencast.gif -------------------------------------------------------------------------------- /src/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 | return 50 | } 51 | 52 | L.Control.SplitMap = L.Control.extend({ 53 | options: { 54 | thumbSize: 42, 55 | padding: 0 56 | }, 57 | 58 | initialize: function (leftLayers, rightLayers, options) { 59 | this._leftLayers = asArray(leftLayers) 60 | this._rightLayers = asArray(rightLayers) 61 | this._updateClip() 62 | L.setOptions(this, options) 63 | }, 64 | 65 | getPosition: function () { 66 | var rangeValue = this._range.value 67 | var offset = (0.5 - rangeValue) * (2 * this.options.padding + this.options.thumbSize) 68 | return this._map.getSize().x * rangeValue + offset 69 | }, 70 | 71 | setPosition: noop, 72 | 73 | includes: L.version.split(".")[0] === '1' ? L.Evented.prototype : L.Mixin.Events, 74 | 75 | addTo: function (map) { 76 | this.remove() 77 | this._map = map 78 | var container = this._container = L.DomUtil.create('div', 'leaflet-sbs', map._controlContainer) 79 | this._divider = L.DomUtil.create('div', 'leaflet-sbs-divider', container) 80 | var range = this._range = L.DomUtil.create('input', 'leaflet-sbs-range', container) 81 | range.type = 'range' 82 | range.min = 0 83 | range.max = 1 84 | range.step = 'any' 85 | range.value = 0.5 86 | range.style.paddingLeft = range.style.paddingRight = this.options.padding + 'px' 87 | this._addEvents() 88 | this._updateClip() 89 | return this 90 | }, 91 | 92 | remove: function () { 93 | if (!this._map) { 94 | return this 95 | } 96 | this._leftLayers.forEach((left_layer)=> { 97 | if (left_layer.getContainer) { 98 | left_layer.getContainer().style.clip = "" 99 | } 100 | else { 101 | left_layer.getPane().style.clip = "" 102 | } 103 | }) 104 | 105 | this._rightLayers.forEach((right_layer)=>{ 106 | if (right_layer.getContainer) { 107 | right_layer.getContainer().style.clip = "" 108 | } 109 | else { 110 | right_layer.getPane().style.clip = "" 111 | } 112 | }) 113 | this._removeEvents() 114 | L.DomUtil.remove(this._container) 115 | this._map = null 116 | return this 117 | }, 118 | 119 | _updateClip: function () { 120 | if (!this._map) { 121 | return this 122 | } 123 | var map = this._map 124 | var nw = map.containerPointToLayerPoint([0, 0]) 125 | var se = map.containerPointToLayerPoint(map.getSize()) 126 | var clipX = nw.x + this.getPosition() 127 | var dividerX = this.getPosition() 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 | 133 | this._leftLayers.forEach((left_layer)=> { 134 | if (left_layer.getContainer) { 135 | left_layer.getContainer().style.clip = clipLeft 136 | } 137 | else { 138 | left_layer.getPane().style.clip = clipLeft 139 | } 140 | }) 141 | 142 | this._rightLayers.forEach((right_layer)=>{ 143 | if (right_layer.getContainer) { 144 | right_layer.getContainer().style.clip = clipRight 145 | } 146 | else { 147 | right_layer.getPane().style.clip = clipRight 148 | } 149 | }) 150 | }, 151 | 152 | _addEvents: function () { 153 | var range = this._range 154 | var map = this._map 155 | if (!map || !range) return 156 | map.on('move', this._updateClip, this) 157 | map.on('layeradd layerremove', this._updateLayers, this) 158 | on(range, getRangeEvent(range), this._updateClip, this) 159 | on(range, 'ontouchstart' in window ? 'touchstart' : 'mousedown', cancelMapDrag, this) 160 | on(range, 'ontouchend' in window ? 'touchend' : 'mouseup', uncancelMapDrag, this) 161 | }, 162 | 163 | _removeEvents: function () { 164 | var range = this._range 165 | var map = this._map 166 | if (range) { 167 | off(range, getRangeEvent(range), this._updateClip, this) 168 | off(range, 'ontouchstart' in window ? 'touchstart' : 'mousedown', cancelMapDrag, this) 169 | off(range, 'ontouchend' in window ? 'touchend' : 'mouseup', uncancelMapDrag, this) 170 | } 171 | if (map) { 172 | map.off('layeradd layerremove', this._updateLayers, this) 173 | map.off('move', this._updateClip, this) 174 | } 175 | } 176 | }) 177 | 178 | L.control.splitMap = function (leftLayers, rightLayers, options) { 179 | return new L.Control.SplitMap(leftLayers, rightLayers, options) 180 | } 181 | 182 | module.exports = L.Control.SplitMap 183 | -------------------------------------------------------------------------------- /src/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 | -------------------------------------------------------------------------------- /src/leaflet-splitmap.js: -------------------------------------------------------------------------------- 1 | (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o