Leaflet-Velocity with TIME ?

[xelaboy]

Hello.
I'm new around here and I'd like to know if it's possible to use this great plugin (Velocity) with any kind of TIME control in Leaflet maps.
Any help will be very appreciated.
Thanks much.

[danwild]

Hi @xelaboy, I haven't personally integrated leaflet-velocity with any time controls, however I don't think it would take much.

It's not mentioned in the README, but there is a public setData() function which could be used to update the layer to reflect change in time slice, although it's worth noting that this tool is best for animating a single point in time, not a transition between a range of times.

[xelaboy]

@danwild , Thanks much for your fast reply.
I've found the setData() function. Do you mean it could be used to get the time information in the JSON file?
Sorry for this kind of question. I'm really new around here, but also I'd like very much to learn how to do it...
Best Regards.

[danwild]

Let me use an example.

In the demo for this project, the layers represent data for a single point in time, e.g. water-gbr.json has refTime with an ISO time stamp.

So - the JSON file has data that represents a single time slice.

If you wanted to have a time control that allows the user to select which time slice they want to look at, you just need to connect the time control to update the velocity layer with the data for the time they want to look at.

The setData function is how you would update the velocity layer with data for a new time slice.

This obviously assumes you have the data for the range of time slices you want to be available to the user.

[xelaboy]

Ok. I THINK I got what you mean! Let me try and see what I can get...
Thanks very much for now.

[xelaboy]

Hello @danwild, FYI.
As I didn't have time to research about how exactly to use the setData function, I just used the event 'on time load' of the time control plugin TimeDimension to add and remove the previous loaded Velocity layers.
I did it without the 'play/pause' button as the Velocity is a animation by itself.
BTW, by now it's working only the 'forward' button as I wasn't able to find out how to set the 'backward' button on.
For now it's kind of ok just to put this part of the site/web page I'm working on to run. BUT I'd like to really do it in the right way...
So, I would like to kindly request that you could indicate/suggest an online training/course of JavaScript AND Object Oriented AND Leaflet, so that I could much better understand and apply at least the main principles/concepts of these amazing tools.
Thanks much in advance and best regards!

[prasanjitdash]

@danwild Hi Dan, so how can the setData() be called. I am comfortable generally speaking with the plugin but need the syntax for setData() to apply on the Layer instance.

Step 1 (setting the first time):

fetch ncepwinddata_doy1 from ncepwinddata_doy1_JSON

lyrNCEPWindSpeed = L.velocityLayer({
displayValues: true,
displayOptions: {...},
data: ncepwinddata_doy1,
//optional options for CT, frame rate etc
}).addTo(map);

Step 2 (public func to update data):

fetch ncepwinddata_doy2 from ncepwinddata_doy2_JSON

lyrNCEPWindSpeed.setData({
 data: ncepwinddata_doy2
});

I need some pointer to the step-2 update call. Thanks

[brentfraser]

Have you tried:
lyrNCEPWindSpeed.setData( ncepwinddata_doy2 );

[prasanjitdash]

@danwild Hi Dan, so how can the setData() be called. I am comfortable generally speaking with the plugin but need the syntax for setData() to apply on the Layer instance.

Step 1 (setting the first time):

fetch ncepwinddata_doy1 from ncepwinddata_doy1_JSON

lyrNCEPWindSpeed = L.velocityLayer({
displayValues: true,
displayOptions: {...},
data: ncepwinddata_doy1,
//optional options for CT, frame rate etc
}).addTo(map);

Step 2 (public func to update data):

fetch ncepwinddata_doy2 from ncepwinddata_doy2_JSON

lyrNCEPWindSpeed.setData({
 data: ncepwinddata_doy2
});

I need some pointer to the step-2 update call. Thanks

I figured out the syntax for step-2 which was simple and close. However, I am not deleting the question and this comment (only closing) in case someone else needs it. The update call on the Layer instance in my Step-2 was simple:
lyrNCEPWindSpeed.setData(ncepwinddata_doy2);

This is very useful and well thought-through as there is no need to create additional LayerGroups and clear them and repopulate. The plugin handles it well.

[prasanjitdash]

Have you tried:
lyrNCEPWindSpeed.setData( ncepwinddata_doy2 );

Thanks, @brentfraser. You literally beat me by a few seconds/minutes. I saw your response shortly after posting my own. Yes, that works.

[prasanjitdash]

Hi, community and @brentfraser, I've another related question. While using setData in the time dimension (let's say looping for 4 UTCs), there is a flicker because it is destroying and firing the animation in a sequence. Is it possible to have a smooth transition, e.g., set Opacity gradually to 0 and then call lyrNCEPWindSpeed.setData( ncepwinddata_doy2 ); and then set Opacity gradually to 1. It seems like opacity is not a direct option in the L.velocityLayer setOptions.

I have tried the following, but the result is less than satisfactory. Also, this is a terrible idea to directly manipulate the factory CSS selector:
$(".velocity-overlay").animate({ opacity: 0.2 }, 500);
lyrNCEPWindSpeed.setData( ncepwinddata_doy2 );
$(".velocity-overlay").animate({ opacity: 1 }, 500);

This is not a critical issue but would be nice to have this feature, which is an animation of the animation with a smooth transition. Thanks

[brentfraser]

The way I've done this for another project (weather radar animation, not wind vectors) was to create a LayerGroup, load the my five weather radar images into five Layers in the LayerGroup, use .setOpacity(0.0) on each to make all of them invisible. To "animate: the layers , I would the loop through the LayerGroup on a timer, setting the opacity to current layer to 1 and the previous to 0.

The important part here is to preload all your data into separate layers, then turn them on/off in sequence without doing a load in between (that would cause a delay and the map would flicker).

[prasanjitdash]

Thanks, @brentfraser. It sounds like a nice workaround but I think this may not work as .setOpacity method did not work on the object (layer) returned from the L.velocityLayer() function. Maybe I am wrong or checked it in a haste in which case I will update the answer after some more investigation. As an alternative, I tried to modify the CSS class .velocity-overlay, as stated in my prev comment but that's not a good idea either. You perhaps implemented your suggestion on raster tile layers?

[brentfraser]

Yes, my radar implementation used tile layers so setOpacity was available. You would need to add the function to the Velocity Layer definition (perhaps review the leaflet source code as a guide).

[danwild]

This plugin is aimed at visualising vectors for a single time, so is not really suited to animate along temporal dimension (would be nice, but out of scope here).

Saying that, if you do want to take an approach similar to that mentioned by brentfraser, off the top of my head I see two reasonable options for frame visibility:

1. Use: layer.setOptions({ opacity: 0 }); (this does cause redraw so will probably flicker)
2. Use a custom map pane for each of your velocity layers, then set opacity on the panes

[prasanjitdash]

Hi @danwild thank you for adding the layer.setOptions({ opacity: value }); option; much appreciated. As it seems, @brentfraser 's idea is the way to go forward at this point in time, with the opacity option available now.

Due to other reasons, however, I've not used the LayerGroup approach yet and simply use opacity manipulation before and after lyrNCEPWindSpeed.setData( ncepwinddata_doy2 );. The reason is, this may be taxing bandwidth to those users who will not visualize all UTC's as it needs to pre-load, but I I will revisit this in the near-future and modify.

On a separate note, even setting opacity to 0 does not make the layer invisible: layer.setOptions({ opacity: 0 });. This is not a problem, just reporting. Two images below (before and after) will make the point clear.

Thank you both @danwild and @brentfraser for this brainstorming and your time.

Before setting layer.setOptions({ opacity: 0 }); 06z

After setting layer.setOptions({ opacity: 0 }); 12z

[danwild]

Thanks @prasanjitdash, please see v1.6.1

[prasanjitdash]

Thank You, @danwild. It does exactly what its supposed to do now. Very useful.