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.
Related
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.
I was drawing polygons using Polygon Creator Class on Google Maps. As you see this tool is not easy to use. For example, it's impossible to add new polygon or edit some of them after getting result code.
In following link when you zoom in between polygons you will see gaps that I want to remove. To recreate the issue please open following link and zoom in between polygons:
http://jsbin.com/bovogaqowu/1/edit?js,output
Now question is, how to remove gap between these polygons ? In this case I can't use the tool that I used to create this map.
And which tool is better to use in this situation ?
Thank for your time
I would suggest you using the Google's official tool for drawing, editing, locatiing and even finding driving directions for the markers you have placed on the maps. You can always save these edited maps and retrieve them later when you need them.
Please click the following link and get started!!
Even I tried drawing some polygons side by side and there were no gaps :)
Hope this would help!!
I am trying to add redundancy to map POI since quite a long time for a leaflet map i use on this page : http://worldisbeautiful.net/carte/
I'm sorry if my english isn't clear, that's probably why i'm having hard time to find a solution. See when you zoom out on this map, you have multiple world maps side by side but the POI are only on one map. Is there a way to have POI on each world maps, same positions ?
I understand there is an option nowrap to avoid multiple world maps but i like the idea of moving from left/right and having the earth rotating not just a plain map.
Thanks for the help !
This is a current leaflet limitation. See this support request
I think a workaround might be to replicate the markers with +360 degrees to wrap around the world.
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
Basically, what I'm trying to do is use a map viewer as an image viewer with the same sort of efficient tile-loading, zoom/pan awesomeness without having to build it myself.
Specifically, I need an image viewer that will allow the image to grow and change while not altering the coordinates of any older (unchanged) tiles. This means that the center point (0,0), where the image started growing from, must always remain (0,0). So I'm looking for a library that will allow me to use a very basic Cartesian coordinate system (no map projection!), which will ask for tiles infinitely in all directions with no repetition (as opposed to how map libraries just ignore y-axis above and below the map, but the x axis repeats).
There's another catch. I need zoom level 0 to be zoomed in all the way. Since the image is constantly growing, there's no way to tell what the max zoom level will be, and the coordinates need to be based on the base image layer tiles so that every tile in zoom level z contains 2^z base layer tiles.
I am wondering if this is possible with OpenLayers and how to do it. If it's not, any suggestions of other (open-source javascript) libraries that can do this would be very appreciated! I've tried playing around with Polymaps, but the documentation is lacking too much for me to be able to tell if it will work. So far no luck.
Please let me know if none of this made sense, and I'll try to include some images or better explanations. Thanks!
I ended up using Polymaps after all, since I like it more than OpenLayers, because it's faster and has much smoother scrolling and panning. I wasn't able to do exactly what I wanted, but what I did was close enough.
I ended up writing my own layer (based on the po.image() layer), which disabled infinite horizontal looping of the map. I then wrote my own version of po.url() that modified the requests going to the server for tiles so that zooming was reversed (I just arbitrarily picked a 'max' zoom of 20, then when making a request subtract the zoom level from 20) and the x and y coordinates were converted to cartesian coordinates from the standard row, column coordinates Polymaps uses, based on the zoom level and the map centered at (0,0).
If anyone is interested in the code I can post it here. Let me know!
EDIT: I've posted the code on github at https://github.com/camupod/polymaps
The relevant files are src/Backwards* and examples/backwards (though it actually doesn't work, you might be able to clean some information about how it should work).