1

I'm using divIcons to visualize some data features by means of icon size and color and am looking for a way to spread overlapping markers so they are all visible when loading my map. I don't want this to be on cost of actual being able to see the exact position when zooming in, so I would like a UX solution so there's a pin/line going from the marker label to the actual point indicated in the data.

My current use scenario is: http://maps.mapfact.com/terrorism/terrorist-attacks-in-turkey-2015-2016

As it's a recurring issue I'm looking for a way to handle this that doesn't require manual positioning of labels or manipulation with the actual coordinates.

I'm also interested in hearing other ideas on how to handle this. I tried clustering so the icons are only visible when zoomed in, but it takes away the overview I would like to achieve.

Any ideas, plugins etc?

JSN
  • 23
  • 4
  • What story are you trying to tell? It looks like each marker is an incident and the diameter is based on qty of casualties. You can customize the cluster plugin pretty easily (it's just using html with `divIcon` I think). So you could try something like use jqPlot to generate a pie chart when markers are clustered: a slice for each organization, sized by ratio of casualties to the total for all markers in the cluster. Also, incidents are not ordered by time which seems a bit weird.. in one case June attack is hidden behind March attack. – nothingisnecessary Jun 30 '16 at 08:42
  • 1
    Yes, incidents are hidden behind each other until a very high zoom level. That's what I'm looking for a solution for in order to provide an overview of terror attacks within the last year that also shows terror organization and number of casualties. I could see it solved much like the way it's done on static maps like this http://www.dw.com/image/0,,19364676_401,00.png (except there's one marker pr incident and text is in popups available on click). Maybe the solution is to customize the cluster login to spiderfy already at load. I'll look into that, thanks. – JSN Jun 30 '16 at 09:31

2 Answers2

2

You might be interested in using https://github.com/IvanSanchez/Leaflet.Marker.Stack.

While implementing some collision detection for Leaflet marker icons is possible (as seen in https://github.com/MazeMap/Leaflet.LayerGroup.Collision), there are no Leaflet implementations that shift markers away from each other when they are too close (that I'm aware of). Do research on D3js: Automatic labels placement to avoid overlaps? (force repulsion), though.

IvanSanchez
  • 18,272
  • 3
  • 30
  • 45
  • Stacking is not a bad idea, here is a similar example, but only shows 2 categories: http://3.bp.blogspot.com/-xucKnlFqYwg/Vg7ftr70xqI/AAAAAAABvgg/Tnx6_a9BW1E/s1600/Data%2BMap.JPG – nothingisnecessary Jun 30 '16 at 08:56
1

Leaflet.markercluster plugin does have the ability to "spiderfy" markers when these are very close even at the maximum zoom.

Since you say you do not like clustering, you could implement the "spiderfication" without the clustering. E.g. you could try Overlapping Marker Spiderfier plugin.

Deals with overlapping markers in a Google Earth-inspired way by gracefully springing them apart on click.

IIRC, Leaflet.markercluster spiderfication is entirely based on an older version of Overlapping Marker Spiderfier.

ghybs
  • 47,565
  • 6
  • 74
  • 99