I created a map using Leaflet, with a filtering system, custom icons with the leaflet.awesome-markers plugin, and jquery functions so that when you click on the markers, the corresponding information, inherited from a geoJson file, appears in turn in a div. (Every time I click on a marker, the marker info appears in my div, dynamically). I also use the markercluster plugin to display clusters when several points are in the same place.
Here is the rendering:
The filters are checkbox (multiple) so user can click on all filters to see all markers.
The markers represent hospitals, so when there is a cluster, it shows multiple markers for the same hospital.
The clusters are working well, and if I click on it, I can see the clustured markers.
Here I have two markers for the same hospital. And that's my problem!
Now I have to change the behavior I've gotten.
What I would need to do:
- Keep the cluster system, but make sure that there is only one marker when zooming, and that the information of all the markers of the cluster are displayed in my dynamic div. (with a tabs system or other?)
So I want to keep the cluster system to show that there are multiple informations at that point, but show only one marker when clicking on the cluster.
Is it possible ?
EDIT 1:
I edit this thread because after many search, I read https://digital-geography.com/working-with-clusters-in-leaflet-increasing-useability/ and this one and saw it was possible !
So Now just after my getJson function I added
var promise = $.getJSON("examen.json");
var clusters = L.markerClusterGroup( { <-- this is new
spiderfyOnMaxZoom: false,
showCoverageOnHover: false,
zoomToBoundsOnClick: true
} );
Then, at the end of my onEachFeature function, I added
clusters.on('clusterclick', function(a){
var markers = a.layer.getAllChildMarkers();
for (var i = 0; i < markers.length; i++) {
$('#layer_infos .fill').append(html);
}
});
It is working partialy.
In the documentation, it is written
Returns an array of all markers contained within this cluster
But for me it doesn't show "this" marker info, but all the markers of my geoJson file… ! (image below with the scroll bar) maybe because my cluster function is wrapping all my markers in the code ? So how can I limit it to show only the clicked marker info ?
Best Answer
As suggested by TomazicM, there might be a simplier way to achieve this, with much more cleaner code! Here I'm duplicating a bunch of code, because for the moment I don't know how to simplify it. But it works !
I also managed to remove duplicate properties from a geoJSON file here.
I give here all my js code. It might help other newbies like me, and of course, if there are some advanced coders who want to improve it, you're welcome.
@TomazicM, again thank you very very much for all your help. Thanks to you I can improve my skill little by litte !! : )
Here is my code :
Then a function for each markers, similar to an info window, but I put it in a dynamic panel outside the map with : $('#layer_infos .fill').html(html);
I'm duplicating this last part for my second map in tab 2. Then I create my cluster groups
Here is my cluster click action with associated html. I'm targetting the markers inside the selected cluster only. I'm also duplicating this code for my second map !
Then, here an example of how I get geoJson data
And here is an example of my click action on filters
Thenn I close my "promise.then(function(data) {"
And At the end I call my clusters, and close my $(document).ready(function(){..
With all this code, I have my map working as expected. Single markers, and clusters.
So before I had this :
And now, When I click on clusters, instead of having separated markers, I get the data of the markers contained in "this" cluster only, and display it in a pannel