1

I've created a web map. There are several markers on it, each representing something, and a tooltip shows related info.

Several markers are in the very same location (lat, lon). So there are two problems:

  1. you can't say how many markers are there actually, where you see a marker, one? Or 4, or... 1000?

  2. you can't access the info for each marker, using the tooltip, because you can trigger only the top marker's tooltip.

How do you deal with this kind of situation?

I'm using Kepler.gl for Jupyter, so it would be nice to find a specific solution for it, but not necessary: I'm interested in understanding if there are some (technical and/or practical) solutions for this kind of cases, for web maps.

0

This isn't your exact technology, but you might want to look through the code for some of Leaflet's Clustering/Decluttering plugins.

If I recall, we use the Leaflet.markercluster plugin in our stuff. It looks kinda like this..

enter image description here

Then, if you click on one of the clustering icons (I chose a VERY busy one for example), notice how it offsets the individual icons that would otherwise be overlapping using a spiral sequence? I'm pretty sure they just take the icon's original coordinates (that is, screen or div coordinates) then adjust them against a Fibonacci sequence..

enter image description here

Unfortunately it looks like the screenshotting process removed our icon popups from these examples for some reason, but hopefully this is enough to give you some ideas.

I'm not familiar with Kepler.gl and honestly have never heard of it, which makes me think finding something ready-to-go will be difficult. However if you're knee-deep into some application development around it, I suspect it wouldn't be too difficult to adapt a mechanism for icon offsetting, and IMO the plugin I demonstrated made a wise choice to use a Fibonacci displacement, because it will scale very well depending on whether you have 4 or 400 features all clustered together. I hope this helps.

| improve this answer | |
  • This is exactly the kind of technical and/or practical solution that I was searching for. Yes, that Fibonacci displacement is a smart move. – akel Jul 11 at 8:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.