Przeglądaj źródła

initial commit

gh-pages
Gregor MacLennan 9 lat temu
commit
15a3f7583d
11 zmienionych plików z 625 dodań i 0 usunięć
  1. 19
    0
      LICENSE
  2. 50
    0
      README.md
  3. 46
    0
      index.html
  4. 139
    0
      index.js
  5. 17
    0
      layout.css
  6. 198
    0
      leaflet-side-by-side.js
  7. 1
    0
      leaflet-side-by-side.min.js
  8. 53
    0
      package.json
  9. BIN
      range-icon.png
  10. 102
    0
      range.css
  11. BIN
      screencast.gif

+ 19
- 0
LICENSE Wyświetl plik

@@ -0,0 +1,19 @@
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.

+ 50
- 0
README.md Wyświetl plik

@@ -0,0 +1,50 @@
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.
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 layers in this array that are added to the map 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 layers in this array that are added to the map will be shown on the right. These *should not be the same as any layers in `leftLayers`* |
17
+
18
+### Usage
19
+
20
+Add the script to the top of your page (css is included in the javascript):
21
+
22
+```html
23
+<script src="leaflet-side-by-side.js"></script>
24
+```
25
+
26
+Or if you are using browserify:
27
+
28
+```js
29
+var sideBySide = require('leaflet-side-by-side')
30
+```
31
+
32
+Then create a map, add two layers to it, and create the SideBySide control and add it to the map:
33
+
34
+```js
35
+var map = L.map('map').setView([51.505, -0.09], 13);
36
+
37
+var myLayer1 = L.tileLayer(...).addTo(map);
38
+
39
+var myLayer2 = L.tileLayer(...).addTo(map)
40
+
41
+L.Control.sideBySide(myLayer1, myLayer2).addTo(map);
42
+```
43
+
44
+### Example
45
+
46
+[Live Example](http://gmaclennan.github.io/leaflet-side-by-side/) see [source](index.html)
47
+
48
+### License
49
+
50
+MIT

+ 46
- 0
index.html Wyświetl plik

@@ -0,0 +1,46 @@
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/v0.7.7/leaflet-src.js'></script>
8
+    <script src="leaflet-side-by-side.js"></script>
9
+    <link href='http://cdn.leafletjs.com/leaflet/v0.7.7/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('//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>

+ 139
- 0
index.js Wyświetl plik

@@ -0,0 +1,139 @@
1
+var L = require('leaflet')
2
+require('./layout.css')
3
+require('./range.css')
4
+
5
+var mapWasDragEnabled
6
+
7
+// Leaflet v0.7 backwards compatibility
8
+function on (el, types, fn, context) {
9
+  types.split(' ').forEach(function (type) {
10
+    L.DomEvent.on(el, type, fn, context)
11
+  })
12
+}
13
+
14
+function off (el, types, fn, context) {
15
+  types.split(' ').forEach(function (type) {
16
+    L.DomEvent.off(el, type, fn, context)
17
+  })
18
+}
19
+
20
+function getRangeEvent (rangeInput) {
21
+  return 'oninput' in rangeInput ? 'input' : 'change'
22
+}
23
+
24
+function cancelMapDrag () {
25
+  mapWasDragEnabled = this._map.dragging.enabled()
26
+  this._map.dragging.disable()
27
+}
28
+
29
+function uncancelMapDrag (e) {
30
+  if (!mapWasDragEnabled) return
31
+  this._refocusOnMap(e)
32
+  this._map.dragging.enable()
33
+}
34
+
35
+function noop () {
36
+  return
37
+}
38
+
39
+L.Control.SideBySide = L.Control.extend({
40
+  initialize: function (leftLayers, rightLayers) {
41
+    this._leftLayers = Array.isArray(leftLayers) ? leftLayers : [leftLayers]
42
+    this._rightLayers = Array.isArray(rightLayers) ? rightLayers : [rightLayers]
43
+  },
44
+
45
+  getPosition: noop,
46
+
47
+  setPosition: noop,
48
+
49
+  addTo: function (map) {
50
+    this.remove()
51
+    this._map = map
52
+
53
+    var container = this._container = L.DomUtil.create('div', 'leaflet-sbs', map._controlContainer)
54
+
55
+    this._divider = L.DomUtil.create('div', 'leaflet-sbs-divider', container)
56
+    var range = this._range = L.DomUtil.create('input', 'leaflet-sbs-range', container)
57
+    range.type = 'range'
58
+    range.min = 0
59
+    range.max = 1
60
+    range.step = 'any'
61
+    this._addEvents()
62
+    this._updateLayers()
63
+    this._updateClip()
64
+    return this
65
+  },
66
+
67
+  remove: function () {
68
+    if (!this._map) {
69
+      return this
70
+    }
71
+    this._removeEvents()
72
+    L.DomUtil.remove(this._container)
73
+
74
+    this._map = null
75
+
76
+    return this
77
+  },
78
+
79
+  _updateClip: function () {
80
+    var map = this._map
81
+    var rangeValue = this._range.value
82
+    var nw = map.containerPointToLayerPoint([0, 0])
83
+    var se = map.containerPointToLayerPoint(map.getSize())
84
+    var offset = (0.5 - rangeValue) * 44
85
+    var clipX = nw.x + (se.x - nw.x) * rangeValue + offset
86
+
87
+    this._divider.style.left = map.getSize().x * rangeValue + offset + 'px'
88
+    var clipLeft = 'rect(' + [nw.y, clipX, se.y, nw.x].join('px,') + 'px)'
89
+    var clipRight = 'rect(' + [nw.y, se.x, se.y, clipX].join('px,') + 'px)'
90
+    if (this._leftLayer) {
91
+      this._leftLayer.getContainer().style.clip = clipLeft
92
+    }
93
+    if (this._rightLayer) {
94
+      this._rightLayer.getContainer().style.clip = clipRight
95
+    }
96
+  },
97
+
98
+  _updateLayers: function () {
99
+    this._leftLayer = this._rightLayer = null
100
+    this._leftLayers.forEach(function (layer) {
101
+      if (this._map.hasLayer(layer)) this._leftLayer = layer
102
+    }, this)
103
+    this._rightLayers.forEach(function (layer) {
104
+      if (this._map.hasLayer(layer)) this._rightLayer = layer
105
+    }, this)
106
+    this._updateClip()
107
+  },
108
+
109
+  _addEvents: function () {
110
+    var range = this._range
111
+    var map = this._map
112
+    if (!map || !range) return
113
+    map.on('move', this._updateClip, this)
114
+    map.on('layeradd layerremove', this._updateLayers, this)
115
+    on(range, getRangeEvent(range), this._updateClip, this)
116
+    on(range, 'mousedown touchstart', cancelMapDrag, this)
117
+    on(range, 'mouseup touchend', uncancelMapDrag, this)
118
+  },
119
+
120
+  _removeEvents: function () {
121
+    var range = this._range
122
+    var map = this._map
123
+    if (range) {
124
+      off(range, getRangeEvent(range), this._updateClip, this)
125
+      off(range, 'mousedown touchstart', cancelMapDrag, this)
126
+      off(range, 'mouseup touchend', uncancelMapDrag, this)
127
+    }
128
+    if (map) {
129
+      map.off('layeradd layerremove', this._updateLayers, this)
130
+      map.off('move', this._updateClip, this)
131
+    }
132
+  }
133
+})
134
+
135
+L.Control.sideBySide = function (leftLayers, rightLayers, options) {
136
+  return new L.Control.SideBySide(leftLayers, rightLayers, options)
137
+}
138
+
139
+module.export = L.Control.sideBySide

+ 17
- 0
layout.css Wyświetl plik

@@ -0,0 +1,17 @@
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
+}

+ 198
- 0
leaflet-side-by-side.js Wyświetl plik

@@ -0,0 +1,198 @@
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<r.length;o++)s(r[o]);return s})({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
+
9
+// Leaflet v0.7 backwards compatibility
10
+function on (el, types, fn, context) {
11
+  types.split(' ').forEach(function (type) {
12
+    L.DomEvent.on(el, type, fn, context)
13
+  })
14
+}
15
+
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
+  this._map.dragging.disable()
29
+}
30
+
31
+function uncancelMapDrag (e) {
32
+  if (!mapWasDragEnabled) return
33
+  this._refocusOnMap(e)
34
+  this._map.dragging.enable()
35
+}
36
+
37
+function noop () {
38
+  return
39
+}
40
+
41
+L.Control.SideBySide = L.Control.extend({
42
+  initialize: function (leftLayers, rightLayers) {
43
+    this._leftLayers = Array.isArray(leftLayers) ? leftLayers : [leftLayers]
44
+    this._rightLayers = Array.isArray(rightLayers) ? rightLayers : [rightLayers]
45
+  },
46
+
47
+  getPosition: noop,
48
+
49
+  setPosition: noop,
50
+
51
+  addTo: function (map) {
52
+    this.remove()
53
+    this._map = map
54
+
55
+    var container = this._container = L.DomUtil.create('div', 'leaflet-sbs', map._controlContainer)
56
+
57
+    this._divider = L.DomUtil.create('div', 'leaflet-sbs-divider', container)
58
+    var range = this._range = L.DomUtil.create('input', 'leaflet-sbs-range', container)
59
+    range.type = 'range'
60
+    range.min = 0
61
+    range.max = 1
62
+    range.step = 'any'
63
+    this._addEvents()
64
+    this._updateLayers()
65
+    this._updateClip()
66
+    return this
67
+  },
68
+
69
+  remove: function () {
70
+    if (!this._map) {
71
+      return this
72
+    }
73
+    this._removeEvents()
74
+    L.DomUtil.remove(this._container)
75
+
76
+    this._map = null
77
+
78
+    return this
79
+  },
80
+
81
+  _updateClip: function () {
82
+    var map = this._map
83
+    var rangeValue = this._range.value
84
+    var nw = map.containerPointToLayerPoint([0, 0])
85
+    var se = map.containerPointToLayerPoint(map.getSize())
86
+    var offset = (0.5 - rangeValue) * 44
87
+    var clipX = nw.x + (se.x - nw.x) * rangeValue + offset
88
+
89
+    this._divider.style.left = map.getSize().x * rangeValue + offset + 'px'
90
+    var clipLeft = 'rect(' + [nw.y, clipX, se.y, nw.x].join('px,') + 'px)'
91
+    var clipRight = 'rect(' + [nw.y, se.x, se.y, clipX].join('px,') + 'px)'
92
+    if (this._leftLayer) {
93
+      this._leftLayer.getContainer().style.clip = clipLeft
94
+    }
95
+    if (this._rightLayer) {
96
+      this._rightLayer.getContainer().style.clip = clipRight
97
+    }
98
+  },
99
+
100
+  _updateLayers: function () {
101
+    this._leftLayer = this._rightLayer = null
102
+    this._leftLayers.forEach(function (layer) {
103
+      if (this._map.hasLayer(layer)) this._leftLayer = layer
104
+    }, this)
105
+    this._rightLayers.forEach(function (layer) {
106
+      if (this._map.hasLayer(layer)) this._rightLayer = layer
107
+    }, this)
108
+    this._updateClip()
109
+  },
110
+
111
+  _addEvents: function () {
112
+    var range = this._range
113
+    var map = this._map
114
+    if (!map || !range) return
115
+    map.on('move', this._updateClip, this)
116
+    map.on('layeradd layerremove', this._updateLayers, this)
117
+    on(range, getRangeEvent(range), this._updateClip, this)
118
+    on(range, 'mousedown touchstart', cancelMapDrag, this)
119
+    on(range, 'mouseup touchend', uncancelMapDrag, this)
120
+  },
121
+
122
+  _removeEvents: function () {
123
+    var range = this._range
124
+    var map = this._map
125
+    if (range) {
126
+      off(range, getRangeEvent(range), this._updateClip, this)
127
+      off(range, 'mousedown touchstart', cancelMapDrag, this)
128
+      off(range, 'mouseup touchend', uncancelMapDrag, this)
129
+    }
130
+    if (map) {
131
+      map.off('layeradd layerremove', this._updateLayers, this)
132
+      map.off('move', this._updateClip, this)
133
+    }
134
+  }
135
+})
136
+
137
+L.Control.sideBySide = function (leftLayers, rightLayers, options) {
138
+  return new L.Control.SideBySide(leftLayers, rightLayers, options)
139
+}
140
+
141
+module.export = L.Control.sideBySide
142
+
143
+}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
144
+},{"./layout.css":2,"./range.css":4}],2:[function(require,module,exports){
145
+var css = ".leaflet-sbs-range {\n    position: absolute;\n    top: 50%;\n    width: 100%;\n    z-index: 999;\n}\n.leaflet-sbs-divider {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 50%;\n    margin-left: -2px;\n    width: 4px;\n    background-color: #fff;\n    pointer-events: none;\n    z-index: 999;\n}\n"; (require("./node_modules/cssify"))(css, undefined, '/Users/gregor/Dev/DdDev/leaflet-side-by-side/layout.css'); module.exports = css;
146
+},{"./node_modules/cssify":3}],3:[function(require,module,exports){
147
+function injectStyleTag(document, fileName, cb) {
148
+  var style = document.getElementById(fileName);
149
+
150
+  if (style) {
151
+    cb(style);
152
+  } else {
153
+    var head = document.getElementsByTagName('head')[0];
154
+
155
+    style = document.createElement('style');
156
+    style.id = fileName;
157
+    cb(style);
158
+    head.appendChild(style);
159
+  }
160
+
161
+  return style;
162
+}
163
+
164
+module.exports = function (css, customDocument, fileName) {
165
+  var doc = customDocument || document;
166
+  if (doc.createStyleSheet) {
167
+    var sheet = doc.createStyleSheet()
168
+    sheet.cssText = css;
169
+    return sheet.ownerNode;
170
+  } else {
171
+    return injectStyleTag(doc, fileName, function(style) {
172
+      if (style.styleSheet) {
173
+        style.styleSheet.cssText = css;
174
+      } else {
175
+        style.innerHTML = css;
176
+      }
177
+    });
178
+  }
179
+};
180
+
181
+module.exports.byUrl = function(url) {
182
+  if (document.createStyleSheet) {
183
+    return document.createStyleSheet(url).ownerNode;
184
+  } else {
185
+    var head = document.getElementsByTagName('head')[0],
186
+        link = document.createElement('link');
187
+
188
+    link.rel = 'stylesheet';
189
+    link.href = url;
190
+
191
+    head.appendChild(link);
192
+    return link;
193
+  }
194
+};
195
+
196
+},{}],4:[function(require,module,exports){
197
+var css = ".leaflet-sbs-range,\n.leaflet-sbs-range::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    margin: 0;\n    padding: 0;\n    border: 0;\n}\n.leaflet-sbs-range {\n    display: inline-block!important;\n    vertical-align: middle;\n    height: 0;\n    padding: 0;\n    margin: 0;\n    border: 0;\n    background: rgba(0, 0, 0, 0.25);\n    min-width: 100px;\n    cursor: pointer;\n    pointer-events: none;\n    z-index: 999;\n}\n.leaflet-sbs-range::-ms-fill-upper {\n    background: transparent;\n}\n.leaflet-sbs-range::-ms-fill-lower {\n    background: rgba(255, 255, 255, 0.25);\n}\n/* Browser thingies */\n\n.leaflet-sbs-range::-moz-range-track {\n    opacity: 0;\n}\n.leaflet-sbs-range::-ms-track {\n    opacity: 0;\n}\n.leaflet-sbs-range::-ms-tooltip {\n    display: none;\n}\n/* For whatever reason, these need to be defined\n * on their own so dont group them */\n\n.leaflet-sbs-range::-webkit-slider-thumb {\n    background: #fff;\n    height: 40px;\n    width: 40px;\n    border-radius: 20px;\n    cursor: ew-resize;\n    pointer-events: auto;\n    border: 1px solid #ddd;\n    background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABlBMVEV9fX3///+Kct39AAAAAnRSTlP/AOW3MEoAAAA9SURBVFjD7dehDQAwDANBZ/+l2wmKoiqR7pHRcaeaCxAIBAL/g7k9JxAIBAKBQCAQCAQC14H+MhAIBE4CD3fOFvGVBzhZAAAAAElFTkSuQmCC\");\n    background-position: 50% 50%;\n    background-repeat: no-repeat;\n    background-size: 40px 40px;\n}\n.leaflet-sbs-range::-ms-thumb {\n    margin: 0;\n    padding: 0;\n    background: #fff;\n    height: 40px;\n    width: 40px;\n    border-radius: 20px;\n    cursor: ew-resize;\n    pointer-events: auto;\n    border: 1px solid #ddd;\n    background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABlBMVEV9fX3///+Kct39AAAAAnRSTlP/AOW3MEoAAAA9SURBVFjD7dehDQAwDANBZ/+l2wmKoiqR7pHRcaeaCxAIBAL/g7k9JxAIBAKBQCAQCAQC14H+MhAIBE4CD3fOFvGVBzhZAAAAAElFTkSuQmCC\");\n    background-position: 50% 50%;\n    background-repeat: no-repeat;\n    background-size: 40px 40px;\n}\n.leaflet-sbs-range::-moz-range-thumb {\n    padding: 0;\n    right: 0    ;\n    background: #fff;\n    height: 40px;\n    width: 40px;\n    border-radius: 20px;\n    cursor: ew-resize;\n    pointer-events: auto;\n    border: 1px solid #ddd;\n    background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABlBMVEV9fX3///+Kct39AAAAAnRSTlP/AOW3MEoAAAA9SURBVFjD7dehDQAwDANBZ/+l2wmKoiqR7pHRcaeaCxAIBAL/g7k9JxAIBAKBQCAQCAQC14H+MhAIBE4CD3fOFvGVBzhZAAAAAElFTkSuQmCC\");\n    background-position: 50% 50%;\n    background-repeat: no-repeat;\n    background-size: 40px 40px;\n}\n.leaflet-sbs-range:disabled::-moz-range-thumb {\n    cursor: default;\n}\n.leaflet-sbs-range:disabled::-ms-thumb {\n    cursor: default;\n}\n.leaflet-sbs-range:disabled::-webkit-slider-thumb {\n    cursor: default;\n}\n.leaflet-sbs-range:disabled {\n    cursor: default;\n}\n.leaflet-sbs-range:focus {\n    outline: none!important;\n}\n.leaflet-sbs-range::-moz-focus-outer {\n    border: 0;\n}\n\n"; (require("./node_modules/cssify"))(css, undefined, '/Users/gregor/Dev/DdDev/leaflet-side-by-side/range.css'); module.exports = css;
198
+},{"./node_modules/cssify":3}]},{},[1]);

+ 1
- 0
leaflet-side-by-side.min.js
Plik diff jest za duży
Wyświetl plik


+ 53
- 0
package.json Wyświetl plik

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

BIN
range-icon.png Wyświetl plik


+ 102
- 0
range.css Wyświetl plik

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

BIN
screencast.gif Wyświetl plik


Ładowanie…
Anuluj
Zapisz