hallahan / leafletplayback Goto Github PK

I put the label: true option, but I don't know how to show in markers

Setting the css transitions for the popups does not help with making them animate smoothy and in sync with the markers.

ef88538

Is there a way to draw the GPS Tracks while the Marker is moving.
As it is right now the GPS Tracks are drawn before the marker moves and added as a Layer to the map

When I tried to do an npm install LeafletPlayback --save it shows something like this.

npm ERR! 404 'LeafletPlayback' is not in the npm registry.
npm ERR! 404 Your package name is not valid, because
npm ERR! 404
npm ERR! 404 1. name can no longer contain capital letters

Currently as a workaround I am specifying a git tag to use it. In the long run, however, would you consider republish it on npm as something else, like, leaflet.playback? Thanks.

http://leafletplayback.theoutpost.io/examples/example_3.html

Unless I missed something, it seems like only Unix timestamps are supported for now. It would be useful to also support ISO8601 timestamps, e.g. "2014-02-11T10:22:46Z".

https://github.com/hallahan/LeafletPlayback/blob/master/src/TracksLayer.js#L10

How can I remove the Controlers from the map?

I'm using the LeafletPlaybackWithDeps.js file in the dist folder of the master.I tried to add a new track programmatically using the addTracks function but it fails in the line:

https://github.com/hallahan/LeafletPlayback/blob/master/src/Tick.js#L23

because the map reference is wrong( in my case it points to the map div instead the Leaflet map class).

So what I did was:

1.- Add the line "this.map = map" after line https://github.com/hallahan/LeafletPlayback/blob/master/src/Tick.js#L5 (in the initialization function of L.Playback.Tick.)

2.- Change the reference of "map" to "this.map" in line
https://github.com/hallahan/LeafletPlayback/blob/master/src/Tick.js#L23

Now it works fine, so is ok if I update the code in the repository?

Hi hallahan, I got what was am expecting
i use "type": "LineString" instead of "type": "MultiPoint",
,

Now i would like to ask one i.e, in our marker popup show geojson latlan but i want to show speed on it, how i can do ?

Thank you so much ,

When the data set starts to get large, it does not seem reasonable to have to load everything up front and wait for a loading dialog (though it's nice to have). I think it would make a lot of sense to progressively load tracks based on the set playback time. I'm thinking a simple buffering mechanism where we get back paginated chunks of data would make sense. I would suggest having a PostGIS database in the backend so that we can index the data based on a bounding box of the map rather than just time. Something like:

http://webapi.com/tracks?bbox=[GPSorTileBasedBBox]&tags=[IDsOrTagsDefiningWhichTracksToShow]&time=[timestamp]&page=[pageNum]

The point of pagination would be that the tracks data may be at any given rate, so if we specified a time block, we wouldn't necessarily get back consistently sized responses. With pagination, the server can just shoot back a certain response size and just progressively load. The loading would be likely faster than the actual playback, so the client could just keep paginating rather than changing that initial timestamp in the request.

Hi, could there be a way of adding the playback layers to a layer instead of directly to map? And then, having the option in the layers control of switching it off?

When adding recent tracks in 2014, the playback control does not work properly when there are older 2013 tracks.

The logic of how the slider deals with tracks that occur very far apart in time needs to be refined.

How can i get the actual position of a marker that has been drawn by the plugin?

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.

It would be useful to have a function that could delete tracks so the playback control can be reused

As a second suggestion another function to delete cleanly the controls (playback control and GPS tracks control).

Hello guys!
So i have been trying to use Example1 with different epoch times,but i couldnt,when i use custom time,blank page loads,chrome slows down ( hangs out ) also no error appears on console.Its looks very weird.

below my custom "demo-track.js"

var trial_path= {
  "type": "Feature",
  "geometry": {
    "type": "MultiPoint",
    "coordinates": [
       [28.9795309, 41.015137 ],

       [36.33, 41.28667 ]]
  },
  "properties": {    
    "time": [1284404781000,1347563181000]
  }
}
var demoTracks = [trial_path];

edit : I opened in firefox and this dropped to console;
"uncaught exception: out of memory"

My GeoJSON is look like this:

var mycode = {
"type": "Feature",
"geometry": {
"type": "MultiPoint",
"coordinates": coord
},
"properties": {
"path_options": {"color": "red"},
"time": timeStamp,
"adv" : adv
}
where coord, timeStamp, adv are array of data

Each marker has different adv data. I am trying to put the adv data on each marker using:

marker: function(featureData) {
return{
getPopup: function(feature){
return feature.properties.adv
}
};
}

But I get value of adv array show on the popup instead of one marker show one adv data.

I am wondering how can I make each popup's marker show one data in the array, not the whole array data.

Good morning,
i have test the togeojson.html,
i gìchage the name of source GPX file and th edestination name of geojson, but not functions.

......
var xmlStr = '';
$.ajax('Dog.gpx').done(function(xml) {
......
....
}
save(geojson, 'Dog.geojson');

where is my error?
i have tested it ffrom my computer, not on my web page.

Fabio

Why in L.Playback.PlayControl, onAdd function used

playback.setSpeed(100);

(src/Control.js line 55)?
This code ignores options.speed, may be it shoud be

playback.setSpeed(this.playback._speed);

?

When creating an own LatLon array + timestamps it occurred to me that the time difference between two coordinates can not exceed 300.000ms (Unix timestamp in ms); it will not animate anymore. I tried to play around with the settings, but without success.
Am I overseeing something or is this a bug?

We are using dates before the epoch (for instance -8428752000). This seems to be generating a negative array index in this._ticks and therefore the animation simply does not work. Is there anyway we can solve this problem?

I am wondering if the slider can play back base on each marker when it changes position, not timestamp. Because my marker can stay in the same position for couple hours long and then change position, I just want to know if I can make the slider change base on marker's position I am wont need to wait for time changing to see the new marker's position.

Hi,
I have forked your repository and starting from your demo I have built another demo with my data: http://aborruso.github.io/LeafletPlayback/

My time is around 1392155552 - 11 february 2014 http://wolfr.am/1qJpcZ1 - but in the timeline I read 17 Jan 1970. What's wrong in my data https://github.com/aborruso/LeafletPlayback/blob/master/data/demo/demo-tracks_andy.js?

Thank you very much,

Andrea

Hello,

I am currently working on a project that live playback (short delay to allow for interpolation). I am curious if you currently have a method to add data to a Track and re-instantiate without loosing current position or if this is something that still needs to be built as mention in Issue #17.

Is this functionality you would like to see in Leaflet.Playback?

Thank you for writing this plugin as it has streamlined a large portion of my project.

Sincerely,

For paths like circles, to enable editing, this is the correct way to do it:

circle.editing.enable();

I am getting following error when trying to use leaflet playback with leaflet version 1.0.3

error: this.callInitHooks is not a function

I am getting this when I call
var playback = L.Playback(map, demoTracks, null, {});
and it seems like error is coming from this piece of code

L.Map.addInitHook(function () {
    if (this.options.playback) {
        this.playback = new L.Playback(this);
    }
});

I have a question regarding to the popup on each marker.

https://stackoverflow.com/questions/45307367/leaflet-popup-on-each-marker-using-leaflet-playback

Can anyone help me with this?

I am using the Example 2 but i dont understand where in the playbackOptions do we pass the different icons that we want to show in each route....

Currently it is not possible to launch the LeafletPlayback library without providing at least a single geoJSON track. It appears that the initialize method for the Playback object tries to load tracks, the clock and controls when it is called. If the track is not include then the whole library fails to load.

I'd suggest refactoring this section into multiple methods so we can cleanly create/delete these objects if we need. This will also help if we want to delete all the tracks and reload them as suggested in #8.

I've very quickly hacked something together and made use of the addTracks function we recently fixed here lbutler@55d35f6.

Let me know what you think, I'll keep working on it and see what I can come up with if you think this is a good way forward.

Is it possible to animate polygons from a dataset like they do here? http://timemap.googlecode.com/svn/tags/2.0.1/examples/polytween.html

Hey guys,
I have got a couple of questions:

1. I will like to use LineString instead of MultiPoints with this API, is this even possible? I tried changing the geometry.type in my data to LineString but all the lines changed to same color. I will like to retain the distinct colors that come with each track.
2. I want more data displayed in the popup like time, speed etc - I tried this also but could not manage to get it change as the markers move along the tracks (just like lat lang)

Every help is appreciated.

Allow the ability to directly add GPS tracks.

Hi,

This is Ravi, can you please tell me how to integrate it with angular 2+.

Thanks,

Regards,
Ravi.

Is there a way to enable iconAngle without a rotation transition? Because it give me a weird rotation animation like a compass. I need to do rotation without the transition animation.

Hello,

I am having this issue regarding the slider (I am currently testing on example 2 - the one that is created in the html code):
I add the data to the map, the track is working - it shows all my coordinates, the POI image is showing, but the slider is sort of disabled. I used the 'playback.addData' function, but I cannot scroll at all the slider's button to move around the POI icon.

Have you encountered this ? If you did, how did you surpass this problem?

1000 thanks in advance.
Berta

Local storage operation is interfering with the clock. Simplify or use worker thread.

The documentation says

layer - Object or function with signature (featureData) that returns geoJSON layer options object. Useful for setting path color. Default: {}.

However, that throws an error. But I CAN use a function with the style sub-property of layer. Spent a bit of time learning this.

Is your lib able to display points fading in/out in time?

I noticed, when adding a track for the marker to move along that if I set the 'orientIcons' option to true, the marker rotates as advertised, but it's translated away from the actual path.

This is true for the default marker as well as the svg icons I would like to be using.

It appears that the icon manipulation takes place in this chunk of code at around line 161:
_updateImg: function (i, a, s) {
a = L.point(s).divideBy(2)._subtract(L.point(a));
var transform = '';
transform += ' translate(' + -a.x + 'px, ' + -a.y + 'px)';
transform += ' rotate(' + this.options.iconAngle + 'deg)';
transform += ' translate(' + a.x + 'px, ' + a.y + 'px)';
i.style[L.DomUtil.TRANSFORM] += transform;
},

I wonder if there is an easy fix to this.

The plugin is working great, but I want to add the ability to show or hide markers and their tracks individually.

Marker part works easily: I put each member of playback._trackController._tracks into an indexed array, then I can manipulate the .marker property of that to add or remove.

How can I grab the track line also?

Thanks!

hi everybody, i have some problems at moment to load my data with cords and tie from xml . this is my issue:
geo = {
"type": "Feature",
"geometry": {
"type": "MultiPoint",
"coordinates": []
},
"properties": {
"time": []
}
};
t = L.Playback.Util.ParseGPX(geo);
t.geometry.coordinates = cor;
t.properties.time = fech;

when i check de console.log(t); can see the data the obj t as i want

bbox: Array []
​
geometry: {…}
​​
coordinates: (3) […]
​​​
0: Array [ -76.491099, 3.48861 ]
​​​
1: Array [ -76.546984, 3.483693 ]
​​​
2: Array [ -76.489434, 3.473348 ]
​​​
length: 3
​​​
: Array []
​​
type: "MultiPoint"
​​
: Object { … }
​
properties: {…}
​​
altitude: Array []
​​
speed: Array []
​​
time: Array(3) [ 1529525230000, 1542210423000, 1542210907000 ]
​​
: Object { … }
​
type: "Feature"
​
: Object { … }

next, try to initialize the playback

var playback = new L.Playback(mapaEventos,t, null, playbackOptions);

but i receibe this issue about empty data at start,end and I have no idea why does not read me the data that loads.

err: cant interpolate a point LeafletPlayback.min.js:1:4764
Array [ "start", undefined ]
LeafletPlayback.min.js:1:4809
Array [ "end", undefined ]
LeafletPlayback.min.js:1:4834
Array [ "ratio", NaN ]

can someone give me some advice to solve this, please

I need to make a dynamic popup showing speed, time coordinates as I change the time slider.
There is playback.getTime() but since the popup content is declared in playbackOptions before playback is declared it makes it harder for me to do it..
I use getPopup: function(featureData){ to make the popup.
Is there any way to show time or speed dynamically with current LeafletPlayback code?

Thanks.

Allow the ability to load tracks from a CSV file.

I need to draw line on leaflet playback map instead of circle, i try following code but didn't work well.

L.Playback = L.Playback || {};

L.Playback.TracksLayer = L.Class.extend({
initialize: function (map, options) {
var layer_options = options.layer || {};

    if (jQuery.isFunction(layer_options)) {
        layer_options = layer_options(feature);
    }

    if (!layer_options.pointToLayer) {
        layer_options.pointToLayer = function (featureData, latlng) {
            //return new L.polyline(latlng, { radius: 5 });

            **return new L.polyline(latlng, {
                color: 'red',
                weight: 3,
                opacity: 0.5,
                smoothFactor: 1

            });
        };**
    }

    this.layer = new L.GeoJSON(null, layer_options);

    var overlayControl = {
        'GPS Tracks': this.layer
    };

    L.control.layers(null, overlayControl, {
        collapsed: false
    }).addTo(map);
},

// clear all geoJSON layers
clearLayer: function () {
    for (var i in this.layer._layers) {
        this.layer.removeLayer(this.layer._layers[i]);
    }
},

// add new geoJSON layer
addLayer: function (geoJSON) {
    this.layer.addData(geoJSON);
}

});
My Json coords are below,

var tillicum=[{'type': 'Feature','geometry': {'type': 'MultiPolygon','coordinates': [ [ 79.825108,11.958093 ],[ 79.826233,11.957887 ],[ 79.826267,11.957808 ], ] }, 'properties': { 'title': 'tillicum', 'path_options': { 'color': 'red' }, 'time':[ 1468905535000,1468905595000,1468905597000,],'speed':[13.5023626],'altitude':[158.33] },}]

Hello,

http://leafletplayback.theoutpost.io/
displays:
An error has occurred: {"code":"ECONNREFUSED","errno":"ECONNREFUSED","syscall":"connect"}

Right now only a single Feature per file is supported. Would be nice to be able to load multiple tracks at a time using a FeatureCollection wrapper.

Hi, I'm having a problem with realtime play.
My geometry coordinates are constantly updated,
when the setData method called during the icon moving,
the moving will be interrupted, how to aviod this?

Hey there!

I have a collection of "reports", containing a lat, long, and timestamp. There are a lot of data points collected over the course of a couple years.

I wanted to use leafletPlayback to display these points chronologically -- each point will only have one lat/lng/timestamp. They will become visible when the timeline hits the day they first appeared, remain visible for a couple more days in the timeline, then disappear after about a week of time has elapsed.

Is that doable for LeafletPlayback? the examples all seem to relate to tracking the movement of a point over time. I just want to have static points with their visibility mapped to the playback scrubber.

Thank you!

First of all your plugin is great !

I have two questions.

• Is it possible to fit the track in my map (fitToBounds) How to get bounds ?
• Is it possible to use panning (pan to marker) ?
  I'd like to zoom to a certain level and follow the marker using panning (keep marker centered on screen).
  Now marker is sometimes out of view.