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.
Related
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.
So there seems to be an error when dynamically adding data to a hidden series in Highcharts.
Say I have two series on a chart that both update on the same interval of time. Say also that I'd like to ensure that neither of the two series have more than a certain number of points, therefore leading me to use the optional shift boolean during a series.addPoint() operation.
The problem I run into is that, if one of the series is toggled and made invisible for some time, when re-toggling that series, much of the data that should've been shifted is still present.
I've made an example fiddle of this (just toggle data1 in the chart legend for a few seconds and then re-toggle)
http://jsfiddle.net/mmuelle4/c00cLfs5/ (change funcToTest to see how various fixes don't quite give the "shift" look)
I'm using the latest version at the time of this post (Highcharts JS v4.0.4).
I think what I've uncovered is still an error that will need to be addressed by Highcharts, but I figured I'd ask the question - is there a better way to perform series length checking and data adding/shifting for multiple series than in the linked fiddle that would get around this issue? I can think of some clunky ones off the top of my head, but I thought I'd come to SO for some elegance :)
Link to bug on Github (for tracking): https://github.com/highslide-software/highcharts.com/issues/3420
You can workaround this issue by managing shift on your own. Simply store in some array all points and shift them there. Then call series.setData(array_of_points,redraw,animation) instead of series.addPoint(points,redraw,animation, shift).
In short:
when series is hidden use series.setData()
when series is visible use series.addPoint() with shift-param set to true|false
What I want to achieve is to make it possible to the user to define as many ranges inbetween a start-value 0 and a max value, i.e. 1000. I thought about how to do this in the best way and I came up with either idea:
Either I could dynamically add and remove sliders on the fly to the page. Make the min-value of the first slider fixed to 0. And somehow link them, i.e. when changing the upper-value of the N-th slider, automatically adapt the lower-value of the (N+1)th slider and vice versa. Problem is that it's some hassle to get this working as I need to also adapt the previous slider (N-1) and next slider (N+1) when removing the slider N inbetween.
Then I thought of the following:
Have ONE slider with a fixed lower-value to 0 and with at least two handles, where the user can add and remove handles on the fly himself. There wouldn't be any gaps allowed, i.e. every pair of consecutive two handles would always define one range. Something like this:
jsfiddle.net/NkjQr/1781/ (this example would define two ranges) with fixed value at 0 and on the fly add/remove handles. Is this possible? Couldn't find any jquery plugin to do this easily...
Or do you know an even better solution? Im looking for the one which is the most easy to implement myself.
Thanks a lot
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!
I'm currently trying to create a page for users to select two points from a range, using a slide control. The first point in the range is when an alert will be sent to the user, the second point is a max limit. What I would like to do is have the bar colored green from the 0 point to the first slider point, then orange between the two sliders, and lastly red from the second slider up to the other end of the bar.
Does anyone know of an easy was I can do this or of a slider control that can be skinned to do this?
I didnt manage to find a slider that did exactly what I was after. I ended up going with the JQuery UI slider as seen here. It's a very nice slider although it has its issues it was the simplest one I could find that was still a close match to my original specifications.
This seems to be what you want. See the Mootools documentation for details.