then
/
opencoil-paracity
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

added the js for map-timeslider.html

master
user 4 years ago
parent
00d25f4060
commit
2e3041bb3a
1 changed files with 193 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 193
      website/SliderControl.js

193
website/SliderControl.js
View File

@ -0,0 +1,193 @@
L.Control.SliderControl = L.Control.extend({
options: {
position: 'topright',
layers: null,
timeAttribute: 'time',
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,
minValue: 0,
showAllOnStart: false,
markers: null,
range: false,
follow: false,
sameDate: false,
alwaysShowDate : false,
rezoom: null
},
initialize: function (options) {
L.Util.setOptions(this, options);
this._layer = this.options.layer;
},
extractTimestamp: function(time, options) {
if (options.isEpoch) {
time = (new Date(parseInt(time))).toString(); // this is local time
}
return time.substr(options.startTimeIdx, options.startTimeIdx + options.timeStrLength);
},
setPosition: function (position) {
var map = this._map;
if (map) {
map.removeControl(this);
}
this.options.position = position;
if (map) {
map.addControl(this);
}
this.startSlider();
return this;
},
onAdd: function (map) {
this.options.map = map;
// Create a control sliderContainer with a jquery ui slider
var sliderContainer = L.DomUtil.create('div', 'slider', this._container);
$(sliderContainer).append('<div id="leaflet-slider" style="width:200px"><div class="ui-slider-handle"></div><div id="slider-timestamp" style="width:200px; margin-top:13px; background-color:#FFFFFF; text-align:center; border-radius:5px;"></div></div>');
//Prevent map panning/zooming while using the slider
$(sliderContainer).mousedown(function () {
map.dragging.disable();
});
$(document).mouseup(function () {
map.dragging.enable();
//Hide the slider timestamp if not range and option alwaysShowDate is set on false
if (options.range || !options.alwaysShowDate) {
$('#slider-timestamp').html('');
}
});
var options = this.options;
this.options.markers = [];
//If a layer has been provided: calculate the min and max values for the slider
if (this._layer) {
var index_temp = 0;
this._layer.eachLayer(function (layer) {
options.markers[index_temp] = layer;
++index_temp;
});
options.maxValue = index_temp - 1;
this.options = options;
} else {
console.log("Error: You have to specify a layer via new SliderControl({layer: your_layer});");
}
return sliderContainer;
},
onRemove: function (map) {
//Delete all markers which where added via the slider and remove the slider div
for (i = this.options.minValue; i <= this.options.maxValue; i++) {
map.removeLayer(this.options.markers[i]);
}
$('#leaflet-slider').remove();
// unbind listeners to prevent memory leaks
$(document).off("mouseup");
$(".slider").off("mousedown");
},
startSlider: function () {
_options = this.options;
_extractTimestamp = this.extractTimestamp
var index_start = _options.minValue;
if(_options.showAllOnStart){
index_start = _options.maxValue;
if(_options.range) _options.values = [_options.minValue,_options.maxValue];
else _options.value = _options.maxValue;
}
$("#leaflet-slider").slider({
range: _options.range,
value: _options.value,
values: _options.values,
min: _options.minValue,
max: _options.maxValue,
sameDate: _options.sameDate,
step: 1,
slide: function (e, ui) {
var map = _options.map;
var fg = L.featureGroup();
if(!!_options.markers[ui.value]) {
// If there is no time property, this line has to be removed (or exchanged with a different property)
if(_options.markers[ui.value].feature !== undefined) {
if(_options.markers[ui.value].feature.properties[_options.timeAttribute]){
if(_options.markers[ui.value]) $('#slider-timestamp').html(
_extractTimestamp(_options.markers[ui.value].feature.properties[_options.timeAttribute], _options));
}else {
console.error("Time property "+ _options.timeAttribute +" not found in data");
}
}else {
// set by leaflet Vector Layers
if(_options.markers [ui.value].options[_options.timeAttribute]){
if(_options.markers[ui.value]) $('#slider-timestamp').html(
_extractTimestamp(_options.markers[ui.value].options[_options.timeAttribute], _options));
}else {
console.error("Time property "+ _options.timeAttribute +" not found in data");
}
}
var i;
// clear markers
for (i = _options.minValue; i <= _options.maxValue; i++) {
if(_options.markers[i]) map.removeLayer(_options.markers[i]);
}
if(_options.range){
// jquery ui using range
for (i = ui.values[0]; i <= ui.values[1]; i++){
if(_options.markers[i]) {
map.addLayer(_options.markers[i]);
fg.addLayer(_options.markers[i]);
}
}
}else if(_options.follow){
for (i = ui.value - _options.follow + 1; i <= ui.value ; i++) {
if(_options.markers[i]) {
map.addLayer(_options.markers[i]);
fg.addLayer(_options.markers[i]);
}
}
}else if(_options.sameDate){
var currentTime;
if (_options.markers[ui.value].feature !== undefined) {
currentTime = _options.markers[ui.value].feature.properties.time;
} else {
currentTime = _options.markers[ui.value].options.time;
}
for (i = _options.minValue; i <= _options.maxValue; i++) {
if(_options.markers[i].options.time == currentTime) map.addLayer(_options.markers[i]);
}
}else{
for (i = _options.minValue; i <= ui.value ; i++) {
if(_options.markers[i]) {
map.addLayer(_options.markers[i]);
fg.addLayer(_options.markers[i]);
}
}
}
};
if(_options.rezoom) {
map.fitBounds(fg.getBounds(), {
maxZoom: _options.rezoom
});
}
}
});
if (!_options.range && _options.alwaysShowDate) {
$('#slider-timestamp').html(_extractTimeStamp(_options.markers[index_start].feature.properties[_options.timeAttribute], _options));
}
for (i = _options.minValue; i <= index_start; i++) {
_options.map.addLayer(_options.markers[i]);
}
}
});
L.control.sliderControl = function (options) {
return new L.Control.SliderControl(options);
};
Write Preview
Loading…
Cancel
Save