I have different hiking routes (in geoJSON format) displayed on a map. They contain linestrings, multilinestrings and markers. Currently, it looks like this: http://www.hikethisway.today/Sweden.html.
I would like to cluster the routes in circles where the size of the circle is determined by the length of the route (have a distance attribute in the geoJSON's). Something like this: https://atendesigngroup.com/blog/openlayers-plus
So when zooming out to a certain level, the circle clusters appear and when clicking on a circle cluster the route (line + markers) appear.
I'm currently using Leaflet and the desired output in the second link is using Openlayers to create the visualization. Is it possible to achieve the same result using Leaflet or will I have to move to Openlayers?
Best Answer
Yes, it is definitely possible.
There would be nothing too complex about it, but it depends exactly on how is structured your GeoJSON data for each hiking route (sounds like your route includes a
LineString
and somePoints
).The idea would be to gather your hiking route (i.e. LineString and Points) into a Leaflet Layer Group, and to associate it with its Circle Marker representation. You can adjust the circle radius according to some property of your LineString. The position of the circle could be computed as the center of the route bounds for example, but you could use any other computation you wish.
Then, using the map
"zoomend"
event, you determine whether you want to show the Circle Marker or the Layer Group.Live demo: https://plnkr.co/edit/3E4i8FjgDPrB8bc1uV9z?p=preview