Adding many markers(10000) using leaflet is slowing down the browser.
markers are moving after every 5 sec.
How can performance issue solved in such scenario.
Note : Clustermarker has one problem. It's difficult to keep track of moving marker.
I'd the same issue, I bypassed it because 1000 markers is too much information.
I put two events:
On specific zoom level, I query my database to have (less) markers. In argument i give the map's coordinates like this example. Tips: i add +1 and -1 on lat and lng to anticipate step 2
I've got an event leafletDirectiveMap.mooveend. When this event is call, I'm doing the step 1. Tips: I'd $timeout with 300ms on this events.
If you need to show all markers, maybe using the heatmaps layer on specific zoom is an another bypass.
Sorry if it's not the solution of your problem but, iIf you try this example, you can see 10000 markers slowdown browser.
Are you using L.marker()? I've had better performance results with L.divIcon().
Alternatively, you could draw your markers directly on the canvas (as is done in Leaflet MaskCanvas). You can also update markers that are drawn on the canvas. Note: this isn't a plug-and-play suggestion; you'll have to do some coding to make this idea work.
Here are some other ideas from this GIS StackExchange question and this other GIS StackExchange question.
Related
I'm creating a map using leaflet and javascript.
I've managed to add custom labels like this:
But when markers are too close, I obviously end up with a mess:
What I 've done so far is add conditions that doesn't display labels on small markers when the zoom is below a certain level. It helps a little.
But I'd like to find a more generic solution.
What would be a good approach to detect if 2 circle markers are overlapping or too close to each other ? (I'm using standard CircleMarkers so far)
I am a bit stuck on this.
Thanks for your help.
Mickael
OK, I don't have too many markers, so what I did is compare a marker to all previous marker using
dist = map.latLngToLayerPoint(p1).distanceTo(map.latLngToLayerPoint(p2));
If the distance is inferior to the sum both radiuses, then I dont add a label.
But it needs to be recalculated when the zoom level changes.
I'm using leaflet to trace underground pipes which I create using the polyline methods.
Since the pipes/lines can sometimes overlap I need to be able to highlight the selected line which requires switching the z-index of the line.
Now it seems that leaflet does offer a setZIndex method, but it's not available for individual layers - so I can change it over an entire featureGroup, but that is less helfpul - and making every line into its own separate featureGroup feels like an overkill.
Any suggestions?
You could create another layer with a superior z-index that would be empty at start. When the mouse is going over a feature, copy the feature into that layer. When the mouse is going out, just remove it from the layer.
It might be a little bit cpu demanding, so I suggest you to debounce the mouseover function in order to make the mouse to wait 1-2 seconds over a feature before copying it into the top layer.
As IvanSanchez noted in a comment, the correct answer seems to be a method called bringToFront.
I am using custom markers to show a semi-live view of the location and orientation (heading) of certain vehicles of interest overlayed on Google Maps. (In my case, I'm depicting aircraft, the same way Uber does for cars, or how FlightAware does for commercial flights).
The coordinates for the markers are being broadcast in JSON format to participating browsers from a server that I control. The JSON data is processed by a JavaScript function at the browser to create / update the markers on the Google map. The refresh (broadcast) rate can sometimes be as fast as once every 2-seconds, or as slow as once every 30 seconds, depending on the particular user's needs of the moment.
Sometimes, it is possible (and valid) for two markers to be thousands of miles apart from each other. For example, one marker could be in Montana, and the other could be somewhere in Africa, and this is a valid condition.
However, sometimes, when I am zoomed into a region of the world so I can look more closely at one marker, a "ghost" marker appears nearby that "isn't really located there". The ghost marker is labeled as one of the other markers that may be hundreds or thousands of miles away, but it's showing up in my zoomed in view for some strange reason. If I momentarily zoom in our out, the ghost disappears, but it may re-appear again.
Interestingly, the ghost image has the proper orientation for the vehicle it represents, but it's just located in the wrong part of the world.
Are there any special things I should be doing when I'm updating multiple markers separated by large distances so they don't show up like this in the wrong place?
I have traced this as far as putting console messages in the browser so I can see the lat/lon of each marker being depicted. I output the latLng object just before it's applied to each marker, and the lat/lon I see in the console log is correct, even when the actual marker shows up in the wrong place.
I don't know if this is a contributor to the problem, but the marker images I'm using are custom PNG files, not standard Google makers. Has anybody run into this before?
As I can see there are a couple of issues reported in the Google issue tracker very similar to the one you described here.
Have a look at them:
https://issuetracker.google.com/issues/74225068
https://issuetracker.google.com/issues/73864685
Feel free to add your comments and star the issues to subscribe to further notifications from Google.
Please note that these issues were reported for the experimental version of Google Maps JavaScript API. Double check which version of the API you are using. Probably loading the release or frozen version will work as a temporary workaround for you.
For more details about versioning model of Google Maps JavaScript API please refer to the documentation:
https://developers.google.com/maps/documentation/javascript/versions
I hope this helps!
I'm currently using Google Maps to display data from over 500 vehicles on a map. Currently, vehicles are updated on average every 60 seconds. I currently use some JavaScript/jQuery to animate each marker from its old position to its new position.
Because the data isn't coming in very frequently it often means that each marker would animate across many buildings, rivers, lakes etc. What I'd like to do is have these markers follow the road, however I'm worried that in doing so it could become expensive.
I see that the Google Maps Directions API would allow me to do this. If I calculate the route from the marker's old position to its new position it would split the route up into many different lines and I could have the markers animate across them. However, with 500 vehicles updating every minute, that's 500 direction requests every minute. Somehow I don't think I'd even survive on the Google Maps for Business API.
If anyone has any ideas as to how I could do this without spending billions, I'd appreciate it.
Thanks
It seems to me that you would only query the Direction API once for each 500 vehicles as long as the destination never changes. You may still run up against API rate limiting nonetheless.
You're going to need to reduce your set of 500 down to something more manageable. I would probably start by only performing animations/calculations on markers that are only immediately visible within the given map viewport. You would still need to update all marker positions in case a marker is about to come into your viewport, but you don't necessarily need to manage this with an actual google.maps.Marker object for each vehicle. You could instead keep track of positions in a separate data structure so you're not having to constantly draw to the map.
As an aside, you may also want to explore clustering options for your markers as having more than a dozen or so on screen at once becomes visually unmanageable.
I'm new to leaflet, looking for some advice.
I'd like to create an animation of a marker of some sort (for example, an html5 filled arc or shape) to replay GPS tracks on a map. I may want several animated markers and I want to stay flexible with the behavior and performance. Can anyone recommend a good way to go about creating this type of animation?
It looks like I could create a canvas layer (L.TileLayer.Canvas) and draw on it using a technique for linear animation (e.g. http://www.html5canvastutorials.com/advanced/html5-canvas-linear-motion-animation/), but I'm not yet sure if this works, or if I need to call redraw() and how the performance would be. Or I could try and make customer markers and move them by setting the lat/lon on them at some interval.
Has anyone come across this and can recommend a solution (above ideas or other)? Ideally as I change zoom levels, the animation will "scale" and have good performance. Thanks!
The RaphaelLayer plugin lets you create some pretty fancy animations:
http://dynmeth.github.com/RaphaelLayer/
yes there are a couple of ways to approach the problem...
drawing onto an interactive map is challenging because you need to recalculate your position on pan and zoom events; in addition to managing your actual animation.
This is an excellent example using the D3 library to manage the animation in a continuous loop, you may be a able to modify the code for multiple animations.
http://zevross.com/blog/2014/09/30/use-the-amazing-d3-library-to-animate-a-path-on-a-leaflet-map/
If you want a little more of the knuts and bolts of how the drawing process works then this project might be a better starting point
http://bl.ocks.org/Sumbera/11114288#L.CanvasOverlay.js
This grabs the overlay pane (a leaflet canvas which you can draw on) and... draws on it...
and you will absolutely want to check out this link which describes the drawing process for an interactive map