Displaying Time, Speed, Altitude and heading on marker popup

[himsashu]

Hi Hallahan, I really thank you for such a good leaflet plugin. I am using this for a while. Presently when I click on marker then current lat/long get displayed on marker popup.

Now I have added other properties like speed, altitude and heading in GPS tracks and the format looks like below:

{ "type": "Feature", "geometry": { "type": "MultiPoint", "coordinates": [/array of [lng,lat] coordinates/] }, "properties": { "time": [/array of UNIX timestamps/], "speed": [/array of speed/], "altitude": [/array of altitude/], "heading": [/array of heading/] } }

Now I want to add speed, altitude and heading to be displayed on marker popup when a user click on Marker.

Can you guide me how can I do this. I am sorry to inform you that I am no expert in javascript and have little knowledge of it.

[anjeludo]

An example about it would be nice.

[existeundelta]

@anjeludo @himsashu did you manage to get it? Thanks

[anjeludo]

Hi @existeundelta,

As @himsashu said, you have to add the properties that you need to your geoJson structure first. Then, in the initialize() function, do the same processing as the sample variable on these new properties (file LeafletPlayback.js, line 223). Finally, in the same way as the lngLat and latLng variables, pass these new values to the move function in order to show them (line 556, tock() function).

You are welcome.

[answerquest]

Hi @anjeludo , could you elaborate a little bit on what you mean by

do the same processing as the sample variable on these new properties

This is the code around line 223:

           var sampleTimes = geoJSON.properties.time;

            this._orientIcon = options.orientIcons;
            var previousOrientation;

            var samples = geoJSON.geometry.coordinates;
            var currSample = samples[0];
            var nextSample = samples[1];

            var currSampleTime = sampleTimes[0];
            var t = currSampleTime;  // t is used to iterate through tick times
            var nextSampleTime = sampleTimes[1];
            var tmod = t % tickLen; // ms past a tick time
            var rem,
            ratio;

and the tock():

    tock : function (timestamp, transitionTime) {
        for (var i = 0, len = this._tracks.length; i < len; i++) {
            var lngLat = this._tracks[i].tick(timestamp);
            var latLng = new L.LatLng(lngLat[1], lngLat[0]);
            this._tracks[i].moveMarker(latLng, transitionTime,timestamp);
        }
    },