Force layout for points on Leaflet map

Community Help
1

Dear community!

We are trying to make a map that combines Leaflet and the D3 force layout library.

Our map shows points sized based on unique values. When the drawn circles overlap, we want the force layout to move the circles on the map so that they no longer overlap, but remain as close as possible to their original lattitude and longitude.

If there is a way to do this without using force layout, that could also work.

Here is a draft notebook with a Leaflet map and some random points for testing purposes. As you see we have note yet been succesful in applying the force layout library to the points on the map. Any feedback or advice would be greatly appreciated!

Thank you,
Levi

1 Like
2

There’s nothing really specific to Leaflet here, so I suppose this notebook might help. The idea is to use d3.forceCollide together withd3.forceX and and d3.forceY. Here it is in action:

I think it works OK but there might be situations where it doesn’t. I wonder if it might make sense to simply contract the circles about their centers until they no longer overlap?

2 Likes
3

Dear @mcmcclur, everyone

Thank you for providing this example for us. We have been able to apply it to the code. However, the issue remains that when a user zooms in or zooms out on the map, the points are no longer located closest to their original X and Y positions. You can see it in the second map on this notebook.

One notebook that was shared with me by @Fil shows someone who has achieved what we are trying to implement on a mapbox basemap. But we have not yet been succesful in applying it in the context of a Leaflet map.

Thanks for any input or ideas to our problem!
Levi

1 Like
4

I don’t actually see where you’ve used forceX, forceY, or forceCollide in your notebook. In addition, you’ll need to redefine the desired x and y coordinates in the simulation on zoom. This notebook takes those ideas into account:

There’s a line that you can uncomment, if you prefer for the circles to appear in their correct locations instantaneously on zoom. I prefer the positions of the circles to update smoothly to compensate for the jerky behavior I see in Leaflet. If you’d like the smooth behavior that you see in the mapbox map, yet using a free tile server, I suspect you’d have better luck with OpenLayers.

1 Like