Animation of features in OpenLayers3 - javascript

I was curious about the possibilities of animating features in OpenLayers3.
I'm very aware of the examples presented here
http://openlayers.org/en/v3.0.0/examples/animation.html and here
https://gis.stackexchange.com/questions/26546/openlayers-animation-examples-and-algorithms
However, the official examples for OL3 don't quite fit my needs.
Let's assume that I have a layer (geojson for instance) that has a "time" column with lots and lots of time values.
I'd like to implement something like a slider that adds/removes features (or changes their style) depending on the user's actions.
The thing is that there are some APIs that might be able to do that, but they seem to be outdated (code examples were still working with ol2).
Do you have any suggestions on how to build a simple animation slider with OL3?
EDIT: It doesn't necessarily have to be proper animation. A possibility that came to my mind is changing the style of a layer whenever the slider is moved. Still no clue though on how to realise that.
This image illustrates what I have in mind:
EDIT: My current approach is to have a slider, that triggers code everytime it is moved. I somehow try do change the layer style dynamically, but I still haven't gotten a viable result.

Ok. I've come up with a solution myself. It's not really a full-fledged animation, but it works for me.
Basically what I do is that I load a wfs-layer to my map.
Now, here is the trick:
When I do that, I simply sort the time-values of the features one by one and add every feature with the time value of 1 to one layer, every feature with a time value of 2 to another and so and so forth.
This basically does the trick. The rest is simple.
Next step is that I implement a slider that ranges from 1 (the lowest time value) to whatever the highest time value is. Everytime the slider is moved it triggers an event that finds out to which time value the slider is set to and then adds/removes the corresponding layers.
So, if the slider is set to 5. It will add every layer from 1 to 5 to the map and remove every other layer. Again, this is not really an animation, but it does work in my case.
If anyone comes up with another possible solution, please post it here. I'd appreciate it.
(Btw, this is what my solution looks like in action:)
EDIT: I can now also confirm that it is possible to build "proper" animations with this approach. I simply built a js-function that includes multiple "setTimeout"s to time when a layer is added and added a play button that triggers this function. This amounts to an animation that visualises the growth from t=1 to tmax.

Related

How can I set a a state variable from two UI elements?

So, apologies if this is too much of an open and beginner-like question.
I am trying to build a single page app, in which one can control a variable in two ways:
by dragging the corresponding datapoint on a D3 scatterplot chart
by setting its value with a slider
I would like the chart to update when the slider gets moved, and the slider to move when the chart is updated by dragging the data on the chart.
I have thought of handling this through:
a spaghetti tangle of events
a proxy object mediating the changes
However I'm asking myself (and the illustrious SO community) is there a better way to handle this?
The keyword for solving this is 'data binding'. There are several frameworks out there, which are able to solve this. That means, that you have a javascript model, which holds the value, you want to work with and something like a proxy, which handles changes and stuff and applies the changes to the view or respectively to the mode..
In case you might need this more often, which usually applies to single page apps, I would recommend you to use some framework, which does the work for you instead of reinventing the wheel.
If you want to stay with client based Javascript, you might take a look into Angular.js (never used it, but maaaany people do and really do like it) or Knockout.js (I work with it, but there are no more further developments).
Within the last years and now many peoply switched to Node.js and Angular2 (a further development of Angular.js) or React.js or Vue.js. You might also take a look into it, but going into detail would blow up the answer. Moreover I only know some basics right now and other people can do better and already did better.

how to label leaflet slider

i am using the leaflet slider by[dwilhelm89][1], i'm letting it slide through days( i made each day a layer and added it to the slider) but i need to add a label(timeline) so that you can see where the slider will go, any idea how to do that? thanks
var sliderControl = L.control.sliderControl({ position: "topright", layer: layerk, range: true, follow:true,alwaysShowDate : true});
map.addControl(sliderControl);
sliderControl.startSlider();
this code is what i used to make the slider, any options or edits i can use? [1]: https://github.com/dwilhelm89/LeafletSlider
If you mean adding a scale with tick marks, the LeafletSlider doesn't seem to have any options for that. Though I don't have any suggestions for modifying or extending the LeafletSlider code, a couple other approaches spring to mind:
First, if you are only dealing with a few days, and you just need a few labels along the length of the slider, it may be possible to adapt one of the examples from the answers to this stackoverflow question. The top-voted answer in particular looks promising, as it is probably the simplest solution.
[EDIT: After looking into the Leaflet Slider code a bit more, I realised that it does not actually filter the data by the quantity in the time field. It simply steps from one feature to the next as you slide it (i.e. an interval of two seconds is treated the same as an interval of two years). Thus, this first method actually will not work with LeafletSlider unless the time field is monotonically increasing, or very nearly so, from one feature to the next.]
Second, you could adapt another non-Leaflet-specific slider to do the job, like the jQRangeSlider, which has some pretty decent options for scales. Here is an example of that approach:
http://fiddle.jshell.net/nathansnider/p850sr8y/
In addition to the slider itself, it consists of a custom control, which allows you to place the slider on the map, and a function to filter the data, which is called each time the slider is moved. If you want further details on this, I'd be happy to elaborate.

Create a smooth curve from a series of GPS coordinates

I have looked at a lot of Q/A here on SO regarding similar (if not the same) question I have. Yet none had an answer I was able to understand.
I wish to input a series of GPS coordinates, and create a smooth curve that connects them all, and passes through ALL of them. Javascript is my preferred language and I have found this page
http://jsdraw2d.jsfiction.com/demo/curvesbezier.htm
It allows you to plot any number of points and when clicking the 'Draw Curve' button it does exactly what I want (except it is on html5 canvas whereas I want to use lat/lon values)
You can download the jsDraw2D source code here:
http://jsdraw2d.jsfiction.com/download.htm
The function in question is drawCurve() and it appears to calculate the points of the curve, creating a separate 'div' for each point as it goes along, while also appending them to the html page. I am presuming I need to get rid of the code for creating the html divs and instead add each point as it is calculated to an array or string. However, it is simply over my head (perhaps because it seems overwhelming and my understanding is not quite spot on).
I would post the code here, but it is pretty long, plus I am not sure how many other functions it calls/requires from the rest of the script.
The only other thing I can think of that needs to be considered is the +/- values in GPS coordinates. I am hoping that altitude changes would not effect the smooth line created too much, especially since it seems to create the new points so close together.
Any help in modifying that code would be greatly appreciated. If someone has some other approach, I am open to suggestions - however I would prefer a way that passes through ALL the input points (unlike some mathematical curve functions that do not)
Thanks!

How to dynamically load in page elements (i.e. images) with an animation?

I have a 2-row, 3-column grid of large squares that I'm going to place thumbnail links inside of for categorized navigation. I will worry about elements within the squares later, however, as this question pertains to the actual squares themselves.
First, I want to preload all elements and display them at once. This portion doe not require an animation effect. They can just pop in like normal.
Second, I want this grid of squares to come in. The rest of the page and the squares can come in simultaneously since they will be loaded together. This portion does, however, require an animation effect; I want the squares and their respective children elements to zoom in from nothing.
See the "zoom" effect here.
Third, I'd like to load/animate in the squares in a sequential order, from first to last, each one coming in individually (or slightly overlapping). I'm sure we're just talking parameters now.
Well, that's it. I know this a tall order, but I'm pretty new to jQuery so hopefully someone can help with at least some of it!
I created a plugin todo something similar to this. Have a look at it here: https://github.com/navgarcha/jquery-slotload
You could use the onComplete option to move loaded items before the first .loading image so they appear to load in sequence.
As you require a zoom effect rather than a slot machine like effect you can prob replace the animate code todo the zoom.
Feel free to tear apart the code to suit you.

How can I duplicate the UI functionality of Google Fastflip?

Trying to get the same functionality as Google FastFlip. Not just with the thumbnails, but even for the larger images too.
Notice how when you click on a story, you see the main story front and center, and you see smaller half-screens of previous and next stories.
How can I get that functionality? Is there a plugin for one of the JS frameworks that does this already?
I also love the speed and feel of flipping through the images.
Look at jquery. It's a good first step.

Categories