Leaflet.timeline
Leaflet.timeline copied to clipboard
1.0.0 Beta, error: Cannot read 'classList'
Here is a screen shot of the error.
Although the documentation does not call for it, it seems that .addTimelines is a public method in the source, and that is how you add the Timelayer to the TimeLinreSlider, that line (38) is where I am getting this error.
38: timeSlider.addTimelines([timeLayer]);
define(['leaflet', 'timeline'],
function (LEAFLET, TIMELINE) {
var myself = function () {
var self = this;
var timeLayer;
var timeSlider;
var carMarkerOptions = {
radius: 0
};
this.setup = function () {
}
this.load = function () {
if (typeof timeLayer != 'undefined') {
console.log('remove the timeline layer');
Mapper.layerControl.removeLayer(timeLayer);
Mapper.theMap.removeLayer(timeLayer);
}
var data = Settings.geojson;
var steps = data.samples;
var ticks = (steps < 500);
var duration = data.duration;
timeLayer = new L.Timeline(data);
timeSlider = new L.TimelineSliderControl( {
style: this.styler,
formatOutput: function (date) {
return date.toISOString();
},
onEachFeature: this.setupFeature,
//filter: this.show,
pointToLayer: this.setupMarker,
steps: steps * 5,
duration: duration,
showTicks: ticks,
waitToUpdateMap: false
});
timeSlider.addTimelines([timeLayer]);
timeLayer.addTo(Mapper.theMap);
timeSlider.addTo(Mapper.theMap);
timeLayer.on('change', this.newTime);
Mapper.layerControl.addOverlay(timeLayer, "Playback");
}
this.show = function (feature, layer) {
var type = feature.properties.type;
switch (type) {
case "Oxford.GPS":
return false;
default:
return true;
}
}
this.setupFeature = function (feature, layer) {
switch (feature.properties.type) {
case "Oxford.GPS":
return;
default:
layer.bindPopup(Tools.popText(feature.properties), { maxWidth: 500 });
}
}
this.setupMarker = function (feature, latlng) {
switch (feature.properties.type) {
case "Oxford.GPS":
return L.circleMarker(latlng, carMarkerOptions);
default:
return L.circleMarker(latlng, carMarkerOptions);
}
}
this.styler = function (feature) {
switch (feature.properties.type) {
case "demo":
return self.demoStyle(feature);
case "Oxford.GPS":
return { "opacity": 0.4 };
case "IBEO.Objects":
return self.lineStyle(feature);
case "SVS":
return self.polyStyle(feature);
default:
alert("overlay.styler: unknown feature type: " + feature.properties.type);
return { "opacity": 0.4 }
}
}
this.newTime = function (e) {
var currentTime = timeLayer.time;
var currentLayers = timeLayer.displayedLayers;
$.each(currentLayers, function (index, layer) {
var bag = layer.geoJSON.properties;
var type = bag.type;
var loc = layer.geoJSON.geometry.coordinates;
switch (type) {
case "Oxford.GPS":
Overlays.doGPS(loc, bag);
break;
case "IBEO.Objects":
break;
case "SVS":
break;
default:
console.log("overlays.newTime: unknown GeoJSON type: " + type);
}
});
}
this.doGPS = function (loc, props) {
CarState.lat = loc[1];
CarState.lon = loc[0];
CarState.alt = loc[2];
CarState.heading = props.heading;
CarState.time = props.start;
CarState.valid = props.valid;
switch (props.correction) {
case 0:
CarState.correction = "None";
break;
case 1:
CarState.correction = "WAAS";
break;
case 2:
CarState.correction = "Differential";
break;
case 3:
CarState.correction = "RTK";
break;
case 4:
CarState.correction = "Other";
break;
}
Mapper.update();
}
this.demoStyle = function (feature) {
var color = "#FFF";
if (feature.properties.confidence == '0.9') {
color = "#FF0000";
} else if (feature.properties.confidence == '0.75') {
color = "#FFFF00";
} else if (feature.properties.confidence == '0.5') {
color = "#00FF00";
}
return {
"color": color,
"weight": 2,
"opacity": 0.4
};
}
this.lineStyle = function (feature) {
var color = "Crimson";
var opacity = (feature.properties.confidence != null) ? feature.properties.confidence : 100;
return {
"color": color,
"weight": 2,
"opacity": opacity
};
}
this.polyStyle = function (feature) {
var color = "YellowGreen";
var opacity = (feature.properties.confidence != null) ? feature.properties.confidence : 100;
return {
"color": "Black",
"weight": 1,
"fillOpacity": opacity,
"fillColor": color
};
}
};
return new myself();
});