Good day,
I have a map with markers that move every 3 seconds to a new location, using ReactLeafletDriftMarker. I cannot, unfortunately, share my code since it is confidential.
My issue is that the markers do not drift, they just jump/appear in the next location.
Does anyone know what causes this to happen?
I can share this snippet:
{Object.entries(latlng).map(([key, value]) => {
return (
<ReactLeafletDriftMarker
position={value}
duration={4000}
keepAtCenter={false}
icon={markerIcon}
>
</ReactLeafletDriftMarker>
);
})}
It shows how (around) 400 points move on a map.
All help is appreciated, thanks.
It was a simple mistake. I assigned a key to the container, so it re-rendered every time the markers changed position values.
Related
I have a loop where I am constantly updating the position of a marker:
function loop(timestamp) {
marker._lngLat.lng = clientState.markers[room.sessionId].lng;
marker._lngLat.lat = clientState.markers[room.sessionId].lat;
requestAnimationFrame(mainLoop);
}
requestAnimationFrame(loop);
Strangely, the position is updated only for ~ one second and then stops updating. If the camera position is updated, the position of the marker updates once again for ~ one second and then once again stops updating.
What might be the problem? Thank you in advance for your insight.
_lngLat is a private property which has no guarantees, you should use the public method to set location, see the API docs I think it's called setLngLat
I'm totally new to highcharts so excuse any mistake in advance.
I have one chart which illustrates amount of bandwidth used according to datetime. (somehow like this example.) I need to show more data to the user whenever the chart is zoomed on xAxis; means new data should be popped up when we are seeing a period of time in detail. fortunately, I have access to that new data, but the main problem is that I don't know how to combine this new data with my old chart.
To make my question more vivid, lets imagine this scenario: assume that I have bandwidth usage for last 2 years in scale of month (for every month on xAxis, I have one value on yAxis), then I zoom in some part of my chart and the chart gets wider and new points pop up on xAxis (what automatically happens in highcharts when we set zoomtype: 'x'), for some of these points, I have some values corresponded to them on yAxis, which I want these new points to be considered in my chart. what shall I do to do this for large scale of data? (e.g. when I have the data for 2 years and I wanna zoom by accuracy of one minute, it is not feasible to include new points manually in between of old series.)
since my code is too large and makes it more complicated to put it here, I try to illustrate my desired result via pictures:
1) this is my chart before zoom:
2) after zoom:
3) and the final result which I do not know how to make it:
Any help would be very appreciated.
Take a look at this live demo: http://jsfiddle.net/kkulig/6gyfx6n7/
I used afterSetExtremes event to check the currently displayed time span and set the appropriate data. If it's shorter than 30 days then I add additional points. Otherwise I restore the default data. pointsAdded helps me to to control whether these operations are actually needed or not.
events: {
afterSetExtremes: function(e) {
var series = this.series[0];
if (pointsAdded && e.max - e.min > 30 * day) {
console.log('Set default data');
series.setData(data.slice());
pointsAdded = false;
} else if (!pointsAdded) {
console.log('Add points');
additionalData.forEach(function(p) {
series.addPoint(p, false);
series.chart.redraw();
pointsAdded = true;
});
}
}
}
To see it working select the last 20 days or so. Then return to the default view by clicking All button.
API references:
https://api.highcharts.com/highstock/xAxis.events.afterSetExtremes
https://api.highcharts.com/class-reference/Highcharts.Series
I have a leaflet project where I am delivering a continuous stream of 'coordinates' via WebSockets to the client browser. I need to be able to display markers corresponding to those locations for a set period of time (something like 1 or 2 seconds) and then remove them (to make room for more locations).
Can anyone help me out or point me in the direction of resources wherein I could find some help?
Thanks!
Edit : Why the downvote? Its a legitimate and common question and one without a lot of solutions online.
Here is some code from the documentation (http://leafletjs.com/reference-1.0.3.html#layer):
var layer = L.Marker(latLng).addTo(map);
layer.addTo(map);
layer.remove();
So in order to remove it after 2 seconds, I think you could try this one:
var layer = L.Marker(latLng).addTo(map);
layer.addTo(map);
setTimeout(function() {
layer.remove();
}, 2000);
Example
I banged and banged my head on this one for a while and I figured someone else may have this problem down the line. I'm posting my full issue and resolution to those who come later, and to offer a spot for any improvements/simplifications if anyone finds one.
Issue was I am trying to paint VerticalLineAnnotations on my ChartArea. I do not want to anchor it to any data points but merely anchor it to an X axis based on which ChartArea I send in. In my annotation constructor I was trying to set AnchorX.
double maxdate = chart.ChartAreas[0].AxisX.Maximum;
double mindate = chart.ChartAreas[0].AxisX.Minimum;
//use inputdata to find where relative spot is.
if(DateTime.TryParse(date, out ddate)) {
AnchorX = (ddate.ToOADate()) / (maxdate - mindate);
}
I kept getting the mins and maxs to return as NaN, which I found out means the ChartArea will manage itself and set its own max/mins. This was all pre-painting.
I tried post painting but then everytime it painted, it would add annotation, then do postpaint again and infinite loop.
I finally found an event that lets me do this. The Customize() event solved this issue.
private void chart_Customize(object sender, EventArgs e) {
PaintAnnotations();
}
Now immediately before the painting happens, data seems to be loaded and max and mins are already set by this point and I can get values back in the code from above.
Hope this can save someone the hours that I lost!
I did some research into this and couldn't really find anything, so if this is a repetitive question I apologize. but anyway I have made a CCB file in CocosBuilder and I would like to start the timeline, for example, at one second instead of playing from the beginning. Is there a way to do this? Thanks for the help guys.
Edit: i would like this to be done in the code.
I am using 2.2.1 Cocos2DX version. I think there is no option to play it from given interval. But you can tweak yourself to get it done. (Not simple one)
You have to go to CCBAnimationManager and there you get "mNodeSequences".
It is dictionary and you get difference properties there like "rotation position etc..."
values there.
Internally AnimationManager reads this value (These values are specified in your CCB)
and puts in runAction queue.
So you have to break it as you want.(Ex. 5 min timeline you have. But you want to start
from 1 min then you have run first 1 min Actions without delay and for remaining you
have properly calculate tween intervals.
It's long procedure and needs calculation. If you don't know any other simpler way try this. If you know pls let us know (Post it).