From 389ae784ccfa3853f231191f886215c1b04a3c04 Mon Sep 17 00:00:00 2001 From: falke-design Date: Thu, 16 Apr 2020 21:18:16 +0200 Subject: [PATCH 01/10] Update Slider and closed issues --- Gruntfile.js | 13 +- README.md | 73 ++++++--- dist/leaflet.SliderControl.min.js | 2 +- examples/epoch.html | 59 +++++-- points.json => examples/points.json | 0 index.html | 4 +- package.json | 9 +- SliderControl.js => src/SliderControl.js | 196 ++++++++++++++++------- 8 files changed, 250 insertions(+), 106 deletions(-) rename points.json => examples/points.json (100%) rename SliderControl.js => src/SliderControl.js (55%) diff --git a/Gruntfile.js b/Gruntfile.js index 6ebabc0..9deae49 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -10,12 +10,23 @@ module.exports = function( grunt ) { concat: { dist: { src: [ - 'SliderControl.js' + 'src/SliderControl.js' ], dest: 'dist/leaflet.SliderControl.min.js' } + }, + watch: { + css: { + files: ['./src/*.scss'], + tasks: ['sass:dev'] + }, + js: { + files: ['./src/*.js'], + tasks: ['default'] + } } }); + grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.registerTask('default', ['concat', 'uglify']); diff --git a/README.md b/README.md index 7d3bd1a..85d9246 100644 --- a/README.md +++ b/README.md @@ -5,13 +5,13 @@ The [Leaflet](http://leafletjs.com/) Time-Slider enables you to dynamically add ](http://jqueryui.com/slider/). -Check out the [Demo](http://dwilhelm89.github.io/LeafletSlider/)! +Check out the [Demo](https://falke-design.github.io/LeafletSlider/)! Usage ----- Add: -* ``SliderControl.js`` +* ``SliderControl.js`` [CDN](https://cdn.jsdelivr.net/gh/Falke-Design/LeafletSlider/src/SliderControl.js) * [JQuery](http://code.jquery.com/jquery-1.9.1.min.js) * [JQueryUI - CSS](http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css) * [JQueryUI - JS](http://code.jquery.com/ui/1.9.2/jquery-ui.js) @@ -36,28 +36,38 @@ map.addControl(sliderControl); sliderControl.startSlider(); ```` -Adjust the used time property so that it fits your project: +The layers must have the following structure: + +`layer.options.time = ` (if timeAttribute is `time`) + +`layer.feature.properties.time = ` (if timeAttribute is `time`) + +#### Options +| Option | Default | Description | +|---|---|---| +| position | 'topright' | The position of the Slider | +| layer | null | **Required** The layergroup with the layers (markers) | +| timeAttribute | 'time' | The attribute for the slider | +| isEpoch | false | Whether the time attribute is seconds elapsed from epoch | +| startTimeIdx | 0 | Where to start looking for a timestring| +| timeStrLength | 19 | the size of yyyy-mm-dd hh:mm:ss - if millis are present this will be larger | +| maxValue | -1 | The max value of the slider | +| minValue | 0 | The min value of the slider | +|showAllOnStart| false | Show all layers on start| +|range| false | To enable the range slider| +| follow | 0 | To show only the last n layers, 0 means show all previous markers | +|sameDate| false | Show only all markers with the current date| +|alwaysShowDate| false | Show allways the date box| +|rezoom| null | You can use the rezoom property to ensure the markers being displayed remain in view. The integer value will be the maximum zoom level.| +|orderMarkers| true| Orders the markers by the timeAttribute | +|orderDesc| false | Order the markers descending (only work if orderMarkers is true)| + +Add options on creating the control ```javascript -$('#slider-timestamp').html(options.markers[ui.value].feature.properties.time.substr(0, 19)); -```` - -You can also use a range-slider by using the range property: -```javascript -sliderControl = L.control.sliderControl({position: "topright", layer: testlayer, range: true}); -```` - -If you would prefer to display only the markers at the specific timestamp specified by the slider, use -the follow property: -```javascript -sliderControl = L.control.sliderControl({position: "topright", layer: testlayer, follow: 3}); +var sliderControl = L.control.sliderControl({options}); ``` -This example will display the current marker and the previous 2 markers on the screen. Specify a value -of 1 (or true) to display only a single data point at a time, and a value of null (or false) to display the current marker and all previous markers. The range property overrides the follow property. -You can use the rezoom property to ensure the markers being displayed remain in view. Nothing happens with a value of null (or false), but an integer value will be the maximum zoom level Leaflet uses as it updates the map's bounds for the markers displayed. -```javascript -sliderControl = L.control.sliderControl({position: "topright", layer: testlayer, rezoom: 10}); -``` +####Mixed features The Leaflet Slider can also be used for usual LayerGroups with mixed features (Markers and Lines, etc.) ```javascript @@ -71,10 +81,10 @@ var pointList = [pointA, pointB]; var polyline = new L.Polyline(pointList, { time: "2013-01-22 10:24:59+01", - color: 'red', - weight: 3, - opacity: 1, - smoothFactor: 1 + color: 'red', + weight: 3, + opacity: 1, + smoothFactor: 1 }); @@ -84,6 +94,17 @@ map.addControl(sliderControl); sliderControl.startSlider(); ```` +#### Event +You can listen on the slider if range has changed. +```javascript +sliderControl.on('rangechanged',function (e) { + console.log(e.markers); +}); +``` +Returns the visible markers. + + +#### Touch Support For touch support add: ```javascript @@ -103,3 +124,5 @@ bower install leaflet-slider Author ----- Dennis Wilhelm, 2013 + +Updated by @Falke-Design 2020 \ No newline at end of file diff --git a/dist/leaflet.SliderControl.min.js b/dist/leaflet.SliderControl.min.js index 014b2ff..ed83da2 100644 --- a/dist/leaflet.SliderControl.min.js +++ b/dist/leaflet.SliderControl.min.js @@ -1 +1 @@ -L.Control.SliderControl=L.Control.extend({options:{position:"topright",layers:null,timeAttribute:"time",isEpoch:!1,startTimeIdx:0,timeStrLength:19,maxValue:-1,minValue:0,showAllOnStart:!1,markers:null,range:!1,follow:!1,alwaysShowDate:!1,rezoom:null},initialize:function(a){L.Util.setOptions(this,a),this._layer=this.options.layer},extractTimestamp:function(a,b){return b.isEpoch&&(a=new Date(parseInt(a)).toString()),a.substr(b.startTimeIdx,b.startTimeIdx+b.timeStrLength)},setPosition:function(a){var b=this._map;return b&&b.removeControl(this),this.options.position=a,b&&b.addControl(this),this.startSlider(),this},onAdd:function(a){this.options.map=a;var b=L.DomUtil.create("div","slider",this._container);$(b).append('
'),$(b).mousedown(function(){a.dragging.disable()}),$(document).mouseup(function(){a.dragging.enable(),(c.range||!c.alwaysShowDate)&&$("#slider-timestamp").html("")});var c=this.options;if(this.options.markers=[],this._layer){var d=0;this._layer.eachLayer(function(a){c.markers[d]=a,++d}),c.maxValue=d-1,this.options=c}else console.log("Error: You have to specify a layer via new SliderControl({layer: your_layer});");return b},onRemove:function(a){for(i=this.options.minValue;i<=this.options.maxValue;i++)a.removeLayer(this.options.markers[i]);$("#leaflet-slider").remove()},startSlider:function(){_options=this.options,_extractTimestamp=this.extractTimestamp;var a=_options.minValue;for(_options.showAllOnStart&&(a=_options.maxValue,_options.range?_options.values=[_options.minValue,_options.maxValue]:_options.value=_options.maxValue),$("#leaflet-slider").slider({range:_options.range,value:_options.value,values:_options.values,min:_options.minValue,max:_options.maxValue,step:1,slide:function(a,b){var c=_options.map,d=L.featureGroup();if(_options.markers[b.value]){void 0!==_options.markers[b.value].feature?_options.markers[b.value].feature.properties[_options.timeAttribute]?_options.markers[b.value]&&$("#slider-timestamp").html(_extractTimestamp(_options.markers[b.value].feature.properties[_options.timeAttribute],_options)):console.error("Time property "+_options.timeAttribute+" not found in data"):_options.markers[b.value].options[_options.timeAttribute]?_options.markers[b.value]&&$("#slider-timestamp").html(_extractTimestamp(_options.markers[b.value].options[_options.timeAttribute],_options)):console.error("Time property "+_options.timeAttribute+" not found in data");var e;for(e=_options.minValue;e<=_options.maxValue;e++)_options.markers[e]&&c.removeLayer(_options.markers[e]);if(_options.range)for(e=b.values[0];e<=b.values[1];e++)_options.markers[e]&&(c.addLayer(_options.markers[e]),d.addLayer(_options.markers[e]));else if(_options.follow)for(e=b.value-_options.follow+1;e<=b.value;e++)_options.markers[e]&&(c.addLayer(_options.markers[e]),d.addLayer(_options.markers[e]));else for(e=_options.minValue;e<=b.value;e++)_options.markers[e]&&(c.addLayer(_options.markers[e]),d.addLayer(_options.markers[e]))}_options.rezoom&&c.fitBounds(d.getBounds(),{maxZoom:_options.rezoom})}}),!_options.range&&_options.alwaysShowDate&&$("#slider-timestamp").html(_extractTimeStamp(_options.markers[a].feature.properties[_options.timeAttribute],_options)),i=_options.minValue;i<=a;i++)_options.map.addLayer(_options.markers[i])}}),L.control.sliderControl=function(a){return new L.Control.SliderControl(a)}; \ No newline at end of file +L.Control.SliderControl=L.Control.extend({options:{position:"topright",layer:null,timeAttribute:"time",isEpoch:!1,startTimeIdx:0,timeStrLength:19,maxValue:-1,minValue:0,showAllOnStart:!1,markers:null,range:!1,follow:0,sameDate:!1,alwaysShowDate:!1,rezoom:null,orderMarkers:!0,orderDesc:!1},initialize:function(e){L.Util.setOptions(this,e),this._layer=this.options.layer,L.extend(this,L.Mixin.Events)},onAdd:function(e){this.options.map=e,this.container=L.DomUtil.create("div","",this._container),this.sliderBoxContainer=L.DomUtil.create("div","slider",this.container);var t=L.DomUtil.create("div","",this.sliderBoxContainer);t.id="leaflet-slider",t.style.width="200px",L.DomUtil.create("div","ui-slider-handle",t),this.timestampContainer=L.DomUtil.create("div","slider",this.container),this.timestampContainer.id="slider-timestamp",this.timestampContainer.style.cssText="width:200px; margin-top:3px; background-color:#FFFFFF; text-align:center; border-radius:5px;display:none;",L.DomEvent.disableClickPropagation(this.sliderBoxContainer),this._map.on("mouseup",this.clearTimestamp,this);var r=this.options;if(this.options.markers=[],this._layer){var i=0,a=[];this._layer.eachLayer(function(e){a.push(e)}),r.orderMarkers&&(a=a.sort(function(e,t){return e.options[r.timeAttribute]t.options[r.timeAttribute]?1:0}),r.orderDesc&&(a=a.reverse())),a.forEach(function(e){r.markers[i]=e,++i}),r.maxValue=i-1,this.options=r}else console.log("Error: You have to specify a layer via new SliderControl({layer: your_layer});");return this.container},onRemove:function(e){for(i=this.options.minValue;i<=this.options.maxValue;i++)e.removeLayer(this.options.markers[i]);this.container.remove(),e.off("mouseup",this.clearTimestamp,this)},startSlider:function(){var n=this.options,m=this.extractTimestamp,e=n.minValue;n.showAllOnStart&&(e=n.maxValue,n.range?n.values=[n.minValue,n.maxValue]:n.value=n.maxValue);var l=this.timestampContainer,u=this;$(this.sliderBoxContainer).slider({range:n.range,value:n.value,values:n.values,min:n.minValue,max:n.maxValue,sameDate:n.sameDate,step:1,slide:function(e,t){var r=n.map,i=L.featureGroup();if(n.markers[t.value]){void 0!==n.markers[t.value].feature?n.markers[t.value].feature.properties[n.timeAttribute]?n.markers[t.value]&&(l.style.display="block",$(l).html(m(n.markers[t.value].feature.properties[n.timeAttribute],n))):console.error("Time property "+n.timeAttribute+" not found in data"):n.markers[t.value].options[n.timeAttribute]?n.markers[t.value]&&(l.style.display="block",$(l).html(m(n.markers[t.value].options[n.timeAttribute],n))):console.error("Time property "+n.timeAttribute+" not found in data");var a,s=[];for(a=n.minValue;a<=n.maxValue;a++)n.markers[a]&&r.removeLayer(n.markers[a]);if(n.range)for(a=t.values[0];a<=t.values[1];a++)n.markers[a]&&(s.push(n.markers[a]),r.addLayer(n.markers[a]),i.addLayer(n.markers[a]));else if(0 - + diff --git a/points.json b/examples/points.json similarity index 100% rename from points.json rename to examples/points.json diff --git a/index.html b/index.html index c07981c..1f1042e 100644 --- a/index.html +++ b/index.html @@ -23,7 +23,7 @@ - + - - + + + - + diff --git a/index.html b/index.html index 1f1042e..b6acb95 100644 --- a/index.html +++ b/index.html @@ -7,20 +7,20 @@ - - - + +
- - - + + + + - + diff --git a/src/SliderControl.js b/src/SliderControl.js index 1ad5a81..628ec4a 100644 --- a/src/SliderControl.js +++ b/src/SliderControl.js @@ -142,7 +142,6 @@ L.Control.SliderControl = L.Control.extend({ console.error("Time property "+ _options.timeAttribute +" not found in data"); } } - var markers = []; var i; // clear markers From cdb2b2330a6c4e2c33775d20d1004c61faa459a0 Mon Sep 17 00:00:00 2001 From: falke-design Date: Thu, 16 Apr 2020 21:30:01 +0200 Subject: [PATCH 03/10] Update to https --- index.html | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index b6acb95..110d5da 100644 --- a/index.html +++ b/index.html @@ -30,8 +30,8 @@ var myMap = L.map('map').setView([52.06, 7.40], 10); - L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { - attribution: '© OpenStreetMap contributors' + L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', { + attribution: '© OpenStreetMap contributors' }).addTo(myMap); @@ -76,6 +76,11 @@ range: true }); + + sliderControl.on('rangechanged',function (e) { + console.log(e.markers) + }); + //Make sure to add the slider to the map ;-) myMap.addControl(sliderControl); //And initialize the slider From f864791520f6d096083f0b942774b68dc721ae5f Mon Sep 17 00:00:00 2001 From: falke-design Date: Thu, 16 Apr 2020 21:34:58 +0200 Subject: [PATCH 04/10] Update CDN Links in Readme --- README.md | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index b45a3f7..b61a623 100644 --- a/README.md +++ b/README.md @@ -12,9 +12,8 @@ Usage ----- Add: * ``SliderControl.js`` [CDN](https://cdn.jsdelivr.net/gh/Falke-Design/LeafletSlider/src/SliderControl.js) -* [JQuery](http://code.jquery.com/jquery-1.9.1.min.js) -* [JQueryUI - CSS](http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css) -* [JQueryUI - JS](http://code.jquery.com/ui/1.9.2/jquery-ui.js) +* [JQuery](https://cdnjs.com/libraries/jquery) +* [JQueryUI](https://cdnjs.com/libraries/jqueryui) to your normal Leaflet map. @@ -107,7 +106,7 @@ Returns the visible markers. #### Touch Support For touch support add: ```javascript - + ```` Bower From f082fb65ac4f9ac6fafc49081e7f592c4840b8b8 Mon Sep 17 00:00:00 2001 From: falke-design Date: Fri, 17 Apr 2020 16:27:13 +0200 Subject: [PATCH 05/10] Add other example --- README.md | 2 ++ examples/epoch.html | 6 ++++-- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index b61a623..9fc1cb3 100644 --- a/README.md +++ b/README.md @@ -7,6 +7,8 @@ The [Leaflet](http://leafletjs.com/) Time-Slider enables you to dynamically add Check out the [Demo](https://falke-design.github.io/LeafletSlider/)! +With two silders [Epoch.html](https://falke-design.github.io/LeafletSlider/examples/epoch.html)! + Usage ----- diff --git a/examples/epoch.html b/examples/epoch.html index 8d99265..7ccb7da 100644 --- a/examples/epoch.html +++ b/examples/epoch.html @@ -50,7 +50,8 @@ layer: testlayer, timeAttribute: "epoch", isEpoch: true, - range: true + range: true, + rezoom: 10, }); //Make sure to add the slider to the map ;-) @@ -78,7 +79,8 @@ layerGroup = L.layerGroup([marker1, marker3, marker2, polyline ]); var sliderControl4 = L.control.sliderControl({ layer: layerGroup, - alwaysShowDate: true + alwaysShowDate: true, + rezoom: 10, }); myMap.addControl(sliderControl4); sliderControl4.startSlider(); From f6c230725bf55268cb0aea4122703ff59a8c524a Mon Sep 17 00:00:00 2001 From: falke-design Date: Mon, 27 Apr 2020 18:46:44 +0200 Subject: [PATCH 06/10] Update orderMarkers function --- README.md | 2 +- dist/leaflet.SliderControl.min.js | 2 +- src/SliderControl.js | 23 +++++++++++++++++++---- 3 files changed, 21 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 9fc1cb3..73f7c3d 100644 --- a/README.md +++ b/README.md @@ -13,7 +13,7 @@ With two silders [Epoch.html](https://falke-design.github.io/LeafletSlider/examp Usage ----- Add: -* ``SliderControl.js`` [CDN](https://cdn.jsdelivr.net/gh/Falke-Design/LeafletSlider/src/SliderControl.js) +* ``SliderControl.js`` [CDN](https://cdn.jsdelivr.net/gh/Falke-Design/LeafletSlider@latest/dist/leaflet.SliderControl.min.js) * [JQuery](https://cdnjs.com/libraries/jquery) * [JQueryUI](https://cdnjs.com/libraries/jqueryui) diff --git a/dist/leaflet.SliderControl.min.js b/dist/leaflet.SliderControl.min.js index ed83da2..2f4878f 100644 --- a/dist/leaflet.SliderControl.min.js +++ b/dist/leaflet.SliderControl.min.js @@ -1 +1 @@ -L.Control.SliderControl=L.Control.extend({options:{position:"topright",layer:null,timeAttribute:"time",isEpoch:!1,startTimeIdx:0,timeStrLength:19,maxValue:-1,minValue:0,showAllOnStart:!1,markers:null,range:!1,follow:0,sameDate:!1,alwaysShowDate:!1,rezoom:null,orderMarkers:!0,orderDesc:!1},initialize:function(e){L.Util.setOptions(this,e),this._layer=this.options.layer,L.extend(this,L.Mixin.Events)},onAdd:function(e){this.options.map=e,this.container=L.DomUtil.create("div","",this._container),this.sliderBoxContainer=L.DomUtil.create("div","slider",this.container);var t=L.DomUtil.create("div","",this.sliderBoxContainer);t.id="leaflet-slider",t.style.width="200px",L.DomUtil.create("div","ui-slider-handle",t),this.timestampContainer=L.DomUtil.create("div","slider",this.container),this.timestampContainer.id="slider-timestamp",this.timestampContainer.style.cssText="width:200px; margin-top:3px; background-color:#FFFFFF; text-align:center; border-radius:5px;display:none;",L.DomEvent.disableClickPropagation(this.sliderBoxContainer),this._map.on("mouseup",this.clearTimestamp,this);var r=this.options;if(this.options.markers=[],this._layer){var i=0,a=[];this._layer.eachLayer(function(e){a.push(e)}),r.orderMarkers&&(a=a.sort(function(e,t){return e.options[r.timeAttribute]t.options[r.timeAttribute]?1:0}),r.orderDesc&&(a=a.reverse())),a.forEach(function(e){r.markers[i]=e,++i}),r.maxValue=i-1,this.options=r}else console.log("Error: You have to specify a layer via new SliderControl({layer: your_layer});");return this.container},onRemove:function(e){for(i=this.options.minValue;i<=this.options.maxValue;i++)e.removeLayer(this.options.markers[i]);this.container.remove(),e.off("mouseup",this.clearTimestamp,this)},startSlider:function(){var n=this.options,m=this.extractTimestamp,e=n.minValue;n.showAllOnStart&&(e=n.maxValue,n.range?n.values=[n.minValue,n.maxValue]:n.value=n.maxValue);var l=this.timestampContainer,u=this;$(this.sliderBoxContainer).slider({range:n.range,value:n.value,values:n.values,min:n.minValue,max:n.maxValue,sameDate:n.sameDate,step:1,slide:function(e,t){var r=n.map,i=L.featureGroup();if(n.markers[t.value]){void 0!==n.markers[t.value].feature?n.markers[t.value].feature.properties[n.timeAttribute]?n.markers[t.value]&&(l.style.display="block",$(l).html(m(n.markers[t.value].feature.properties[n.timeAttribute],n))):console.error("Time property "+n.timeAttribute+" not found in data"):n.markers[t.value].options[n.timeAttribute]?n.markers[t.value]&&(l.style.display="block",$(l).html(m(n.markers[t.value].options[n.timeAttribute],n))):console.error("Time property "+n.timeAttribute+" not found in data");var a,s=[];for(a=n.minValue;a<=n.maxValue;a++)n.markers[a]&&r.removeLayer(n.markers[a]);if(n.range)for(a=t.values[0];a<=t.values[1];a++)n.markers[a]&&(s.push(n.markers[a]),r.addLayer(n.markers[a]),i.addLayer(n.markers[a]));else if(0 b.options[options.timeAttribute] ){ - return 1; + if(valA && valB) { + if (valA < valB) { + return -1; + } + if (valA > valB) { + return 1; + } } return 0; } From 263442dff4120a1d278eee40d6096fdf9502740f Mon Sep 17 00:00:00 2001 From: falke-design Date: Wed, 29 Apr 2020 09:07:48 +0200 Subject: [PATCH 07/10] Fix Bug in orderMarkers --- dist/leaflet.SliderControl.min.js | 2 +- src/SliderControl.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/dist/leaflet.SliderControl.min.js b/dist/leaflet.SliderControl.min.js index 2f4878f..3b2bd1b 100644 --- a/dist/leaflet.SliderControl.min.js +++ b/dist/leaflet.SliderControl.min.js @@ -1 +1 @@ -L.Control.SliderControl=L.Control.extend({options:{position:"topright",layer:null,timeAttribute:"time",isEpoch:!1,startTimeIdx:0,timeStrLength:19,maxValue:-1,minValue:0,showAllOnStart:!1,markers:null,range:!1,follow:0,sameDate:!1,alwaysShowDate:!1,rezoom:null,orderMarkers:!0,orderDesc:!1},initialize:function(e){L.Util.setOptions(this,e),this._layer=this.options.layer,L.extend(this,L.Mixin.Events)},onAdd:function(e){this.options.map=e,this.container=L.DomUtil.create("div","",this._container),this.sliderBoxContainer=L.DomUtil.create("div","slider",this.container);var t=L.DomUtil.create("div","",this.sliderBoxContainer);t.id="leaflet-slider",t.style.width="200px",L.DomUtil.create("div","ui-slider-handle",t),this.timestampContainer=L.DomUtil.create("div","slider",this.container),this.timestampContainer.id="slider-timestamp",this.timestampContainer.style.cssText="width:200px; margin-top:3px; background-color:#FFFFFF; text-align:center; border-radius:5px;display:none;",L.DomEvent.disableClickPropagation(this.sliderBoxContainer),this._map.on("mouseup",this.clearTimestamp,this);var a=this.options;if(this.options.markers=[],this._layer){var r=0,i=[];this._layer.eachLayer(function(e){i.push(e)}),a.orderMarkers&&(i=i.sort(function(e,t){var r=null,i=null;if(e.feature.properties[a.timeAttribute]?r=e.feature.properties[a.timeAttribute]:e.options[a.timeAttribute]&&(r=e.options[a.timeAttribute]),t.feature.properties[a.timeAttribute]?i=t.feature.properties[a.timeAttribute]:t.options[a.timeAttribute]&&(i=t.options[a.timeAttribute]),r&&i){if(r Date: Thu, 30 Apr 2020 11:19:08 +0200 Subject: [PATCH 08/10] Add popup options. Thx to @geyerbri for the idea --- README.md | 5 ++ bower.json | 4 +- dist/leaflet.SliderControl.min.js | 2 +- examples/popup.html | 120 ++++++++++++++++++++++++++++++ package.json | 6 +- src/SliderControl.js | 30 +++++++- 6 files changed, 160 insertions(+), 7 deletions(-) create mode 100644 examples/popup.html diff --git a/README.md b/README.md index 73f7c3d..38e681d 100644 --- a/README.md +++ b/README.md @@ -9,6 +9,7 @@ Check out the [Demo](https://falke-design.github.io/LeafletSlider/)! With two silders [Epoch.html](https://falke-design.github.io/LeafletSlider/examples/epoch.html)! +Popup Demo: [Popup.html](https://falke-design.github.io/LeafletSlider/examples/popup.html) Usage ----- @@ -62,6 +63,10 @@ The layers must have the following structure: |rezoom| null | You can use the rezoom property to ensure the markers being displayed remain in view. The integer value will be the maximum zoom level.| |orderMarkers| true| Orders the markers by the timeAttribute | |orderDesc| false | Order the markers descending (only work if orderMarkers is true)| +|popupContent| ' ' | Custom popup content if marker has no popup| +|popupOptions| {} | Popup options for markers with no default popup [popup-options](https://leafletjs.com/reference-1.6.0.html#popup-l-popup)| +|showAllPopups| true | To show all popups, instead of one. Same as popup option "autoClose: false"| + Add options on creating the control ```javascript diff --git a/bower.json b/bower.json index 539593e..a69449c 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "leaflet-slider", - "homepage": "https://github.com/dwilhelm89/LeafletSlider", - "version": "1.0.4", + "homepage": "https://github.com/Falke-Design/LeafletSlider", + "version": "2.0.0", "main": "dist/leaflet.SliderControl.min.js" } \ No newline at end of file diff --git a/dist/leaflet.SliderControl.min.js b/dist/leaflet.SliderControl.min.js index 3b2bd1b..49525ef 100644 --- a/dist/leaflet.SliderControl.min.js +++ b/dist/leaflet.SliderControl.min.js @@ -1 +1 @@ -L.Control.SliderControl=L.Control.extend({options:{position:"topright",layer:null,timeAttribute:"time",isEpoch:!1,startTimeIdx:0,timeStrLength:19,maxValue:-1,minValue:0,showAllOnStart:!1,markers:null,range:!1,follow:0,sameDate:!1,alwaysShowDate:!1,rezoom:null,orderMarkers:!0,orderDesc:!1},initialize:function(e){L.Util.setOptions(this,e),this._layer=this.options.layer,L.extend(this,L.Mixin.Events)},onAdd:function(e){this.options.map=e,this.container=L.DomUtil.create("div","",this._container),this.sliderBoxContainer=L.DomUtil.create("div","slider",this.container);var t=L.DomUtil.create("div","",this.sliderBoxContainer);t.id="leaflet-slider",t.style.width="200px",L.DomUtil.create("div","ui-slider-handle",t),this.timestampContainer=L.DomUtil.create("div","slider",this.container),this.timestampContainer.id="slider-timestamp",this.timestampContainer.style.cssText="width:200px; margin-top:3px; background-color:#FFFFFF; text-align:center; border-radius:5px;display:none;",L.DomEvent.disableClickPropagation(this.sliderBoxContainer),this._map.on("mouseup",this.clearTimestamp,this);var a=this.options;if(this.options.markers=[],this._layer){var r=0,i=[];this._layer.eachLayer(function(e){i.push(e)}),a.orderMarkers&&(i=i.sort(function(e,t){var r=null,i=null;if(e.features&&e.features.properties&&e.feature.properties[a.timeAttribute]?r=e.feature.properties[a.timeAttribute]:e.options[a.timeAttribute]&&(r=e.options[a.timeAttribute]),t.features&&t.features.properties&&t.feature.properties[a.timeAttribute]?i=t.feature.properties[a.timeAttribute]:t.options[a.timeAttribute]&&(i=t.options[a.timeAttribute]),r&&i){if(r + + + + Leaflet Time Slider Example + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + diff --git a/package.json b/package.json index 6d5847c..55c6f23 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { - "name": "LeafletSlider", - "author": "Dennis Wilhelm", + "name": "leafletslider2.0", + "author": "Falke-Design", "version": "1.0.4", "description": "The Leaflet Time-Slider enables you to dynamically add and remove Markers on a map by using a JQuery UI slider.", "license": "MIT", @@ -16,7 +16,7 @@ }, "repository": { "type": "git", - "url": "https://github.com/dwilhelm89/LeafletSlider.git" + "url": "https://github.com/Falke-Design/LeafletSlider.git" }, "keywords": [ "map", diff --git a/src/SliderControl.js b/src/SliderControl.js index f106a60..47790a9 100644 --- a/src/SliderControl.js +++ b/src/SliderControl.js @@ -17,6 +17,9 @@ L.Control.SliderControl = L.Control.extend({ rezoom: null, orderMarkers: true, orderDesc: false, + popupOptions: {}, + popupContent: '', + showAllPopups: true, }, initialize: function (options) { @@ -91,6 +94,11 @@ L.Control.SliderControl = L.Control.extend({ templayers.forEach(function (layer){ options.markers[index_temp] = layer; + + if(layer._popup){ + options.markers[index_temp]._orgpopup = layer._popup; + } + ++index_temp; }); @@ -203,6 +211,7 @@ L.Control.SliderControl = L.Control.extend({ } } + that._openPopups(markers); that.fire('rangechanged',{ markers: markers, }); @@ -243,7 +252,7 @@ L.Control.SliderControl = L.Control.extend({ markers.push(_options.markers[i]); _options.map.addLayer(_options.markers[i]); } - + this._openPopups(markers); this.fire('rangechanged',{ markers: markers, }); @@ -279,6 +288,25 @@ L.Control.SliderControl = L.Control.extend({ return this; }, + _openPopups: function(markers) { + var options = this.options; + markers.forEach(function (marker) { + if(marker._orgpopup){ + marker._popup = marker._orgpopup; + if(options.showAllPopups){ + marker._popup.options.autoClose = false; + } + marker.openPopup(); + }else if(options.popupContent){ + var popupOptions = options.popupOptions; + if(options.showAllPopups){ + popupOptions.autoClose = false; + } + marker.bindPopup(options.popupContent,popupOptions ).openPopup(); + } + }); + } + }); From a934dd4c2eed4ee3011e5da3ad12d50f75cb8ef2 Mon Sep 17 00:00:00 2001 From: falke-design Date: Thu, 30 Apr 2020 18:26:06 +0200 Subject: [PATCH 09/10] Add showPopups option --- README.md | 1 + dist/leaflet.SliderControl.min.js | 2 +- examples/popup.html | 3 ++- src/SliderControl.js | 9 +++++++-- 4 files changed, 11 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 38e681d..058b645 100644 --- a/README.md +++ b/README.md @@ -66,6 +66,7 @@ The layers must have the following structure: |popupContent| ' ' | Custom popup content if marker has no popup| |popupOptions| {} | Popup options for markers with no default popup [popup-options](https://leafletjs.com/reference-1.6.0.html#popup-l-popup)| |showAllPopups| true | To show all popups, instead of one. Same as popup option "autoClose: false"| +|showPopups| true | To open popups of the markers| Add options on creating the control diff --git a/dist/leaflet.SliderControl.min.js b/dist/leaflet.SliderControl.min.js index 49525ef..50713d9 100644 --- a/dist/leaflet.SliderControl.min.js +++ b/dist/leaflet.SliderControl.min.js @@ -1 +1 @@ -L.Control.SliderControl=L.Control.extend({options:{position:"topright",layer:null,timeAttribute:"time",isEpoch:!1,startTimeIdx:0,timeStrLength:19,maxValue:-1,minValue:0,showAllOnStart:!1,markers:null,range:!1,follow:0,sameDate:!1,alwaysShowDate:!1,rezoom:null,orderMarkers:!0,orderDesc:!1,popupOptions:{},popupContent:"",showAllPopups:!0},initialize:function(e){L.Util.setOptions(this,e),this._layer=this.options.layer,L.extend(this,L.Mixin.Events)},onAdd:function(e){this.options.map=e,this.container=L.DomUtil.create("div","",this._container),this.sliderBoxContainer=L.DomUtil.create("div","slider",this.container);var t=L.DomUtil.create("div","",this.sliderBoxContainer);t.id="leaflet-slider",t.style.width="200px",L.DomUtil.create("div","ui-slider-handle",t),this.timestampContainer=L.DomUtil.create("div","slider",this.container),this.timestampContainer.id="slider-timestamp",this.timestampContainer.style.cssText="width:200px; margin-top:3px; background-color:#FFFFFF; text-align:center; border-radius:5px;display:none;",L.DomEvent.disableClickPropagation(this.sliderBoxContainer),this._map.on("mouseup",this.clearTimestamp,this);var a=this.options;if(this.options.markers=[],this._layer){var r=0,i=[];this._layer.eachLayer(function(e){i.push(e)}),a.orderMarkers&&(i=i.sort(function(e,t){var r=null,i=null;if(e.features&&e.features.properties&&e.feature.properties[a.timeAttribute]?r=e.feature.properties[a.timeAttribute]:e.options[a.timeAttribute]&&(r=e.options[a.timeAttribute]),t.features&&t.features.properties&&t.feature.properties[a.timeAttribute]?i=t.feature.properties[a.timeAttribute]:t.options[a.timeAttribute]&&(i=t.options[a.timeAttribute]),r&&i){if(r Date: Thu, 30 Apr 2020 19:45:36 +0200 Subject: [PATCH 10/10] open popup works now with layergroups --- dist/leaflet.SliderControl.min.js | 2 +- src/SliderControl.js | 48 +++++++++++++++++++++---------- 2 files changed, 34 insertions(+), 16 deletions(-) diff --git a/dist/leaflet.SliderControl.min.js b/dist/leaflet.SliderControl.min.js index 50713d9..9da4673 100644 --- a/dist/leaflet.SliderControl.min.js +++ b/dist/leaflet.SliderControl.min.js @@ -1 +1 @@ -L.Control.SliderControl=L.Control.extend({options:{position:"topright",layer:null,timeAttribute:"time",isEpoch:!1,startTimeIdx:0,timeStrLength:19,maxValue:-1,minValue:0,showAllOnStart:!1,markers:null,range:!1,follow:0,sameDate:!1,alwaysShowDate:!1,rezoom:null,orderMarkers:!0,orderDesc:!1,popupOptions:{},popupContent:"",showAllPopups:!0,showPopups:!0},initialize:function(e){L.Util.setOptions(this,e),this._layer=this.options.layer,L.extend(this,L.Mixin.Events)},onAdd:function(e){this.options.map=e,this.container=L.DomUtil.create("div","",this._container),this.sliderBoxContainer=L.DomUtil.create("div","slider",this.container);var t=L.DomUtil.create("div","",this.sliderBoxContainer);t.id="leaflet-slider",t.style.width="200px",L.DomUtil.create("div","ui-slider-handle",t),this.timestampContainer=L.DomUtil.create("div","slider",this.container),this.timestampContainer.id="slider-timestamp",this.timestampContainer.style.cssText="width:200px; margin-top:3px; background-color:#FFFFFF; text-align:center; border-radius:5px;display:none;",L.DomEvent.disableClickPropagation(this.sliderBoxContainer),this._map.on("mouseup",this.clearTimestamp,this);var o=this.options;if(this.options.markers=[],this._layer){var r=0,i=[];this._layer.eachLayer(function(e){i.push(e)}),o.orderMarkers&&(i=i.sort(function(e,t){var r=null,i=null;if(e.features&&e.features.properties&&e.feature.properties[o.timeAttribute]?r=e.feature.properties[o.timeAttribute]:e.options[o.timeAttribute]&&(r=e.options[o.timeAttribute]),t.features&&t.features.properties&&t.feature.properties[o.timeAttribute]?i=t.feature.properties[o.timeAttribute]:t.options[o.timeAttribute]&&(i=t.options[o.timeAttribute]),r&&i){if(r