Leaflet.timeline icon indicating copy to clipboard operation
Leaflet.timeline copied to clipboard

1.0.0 Beta, error: Cannot read 'classList'

Open DrYSG opened this issue 9 years ago • 0 comments

Here is a screen shot of the error.

image

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();
 });

DrYSG avatar Dec 17 '15 18:12 DrYSG