How can I cluster my markers with GeoJSON file?

Question

I'm here because I spent so many hours again trying to figure out how to make the leaflet.cluster.js plugin work on my map.

Here is my code (very long, sorry) :

I first build my custom marker with the leaflet.awesome-markers plugin's method.
Then I build my onEachFeature function with all the GeoJSON properties. Inside of it, I add some function to inject the properties values in a sidebar (instead of popup). I also add some class for the mobile display.
Then I use the getJson method to build all my layerGroups

I don't know how to loop through all data, so I use a simple Click function to show hide markers.

            $(document).ready(function(){
            var cartoDb = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
                    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
                    subdomains: 'abcd',
                    maxZoom: 19
                });
                var ccl18Icon = L.AwesomeMarkers.icon({
                    prefix: 'fa', //font awesome rather than bootstrap
                    iconColor: 'white',
                    markerColor: 'orange', // see colors above
                    icon: 'ambulance' //http://fortawesome.github.io/Font-Awesome/icons/
                });
                var chit1Icon = L.AwesomeMarkers.icon({
                    prefix: 'fa', //font awesome rather than bootstrap
                    iconColor: 'white',
                    markerColor: 'darkgreen', // see colors above
                    icon: 'ambulance' //http://fortawesome.github.io/Font-Awesome/icons/
                });
                var chitotriosidaseIcon = L.AwesomeMarkers.icon({
                    prefix: 'fa', //font awesome rather than bootstrap
                    iconColor: 'white',
                    markerColor: 'darkblue', // see colors above
                    icon: 'ambulance' //http://fortawesome.github.io/Font-Awesome/icons/
                });

                var glucocerebrosidaseIcon = L.AwesomeMarkers.icon({
                    prefix: 'fa', //font awesome rather than bootstrap
                    markerColor: 'red', // see colors above
                    iconColor: 'white',
                    icon: 'ambulance' //http://fortawesome.github.io/Font-Awesome/icons/
                });
                var gbaIcon = L.AwesomeMarkers.icon({
                    prefix: 'fa', //font awesome rather than bootstrap
                    iconColor: 'white',
                    markerColor: 'green', // see colors above
                    icon: 'ambulance' //http://fortawesome.github.io/Font-Awesome/icons/
                });

                var lysoglucosylceramideIcon = L.AwesomeMarkers.icon({
                    prefix: 'fa', //font awesome rather than bootstrap
                    iconColor: 'white',
                    markerColor: 'lightred', // see colors above
                    icon: 'ambulance' //http://fortawesome.github.io/Font-Awesome/icons/
                });
                var psapIcon = L.AwesomeMarkers.icon({
                    prefix: 'fa', //font awesome rather than bootstrap
                    iconColor: 'white',
                    markerColor: 'purple', // see colors above
                    icon: 'ambulance' //http://fortawesome.github.io/Font-Awesome/icons/
                });

                var map = L.map('map')
                    .addLayer(cartoDb)
                    .setView([46.85, 2.3518], 6); // LIGNE 14

                function onEachFeature(feature, layer) {

                    var html = '';
                    if (feature.properties.Prelevement) {
                        html += '<p>' + feature.properties.Prelevement + '</p>';
                    }
                    if (feature.properties.Envoi) {
                        html += '<p>' + feature.properties.Envoi + '</p>';
                    }
                    if (feature.properties.Laboratoire) {
                        html += '<p>' + feature.properties.Laboratoire + '</p>';
                    }
                    if (feature.properties.Chu) {
                        html += '<p>' + feature.properties.Chu + '</p>';
                    }
                    if (feature.properties.Adresse) {
                        html += '<p>' + feature.properties.Adresse + '</p>';
                    }
                    if (feature.properties.Cp) {
                        html += '<p>' + feature.properties.Cp + '</p>';
                    }
                    if (feature.properties.Professeur) {
                        html += '<p>' + feature.properties.Professeur + '</p>';
                    }
                    if (feature.properties.Tel) {
                        html += '<p>' + feature.properties.Tel + '</p>';
                    }
                    if (feature.properties.Fax) {
                        html += '<p>' + feature.properties.Fax + '</p>';
                    }
                    if (feature.properties.Mail) {
                        html += '<p>' + feature.properties.Mail + '</p>';
                    }
                       if (feature.properties.Professeur2) {
                        html += '<p>' + feature.properties.Professeur2 + '</p>';
                    }
                    if (feature.properties.Tel2) {
                        html += '<p>' + feature.properties.Tel2 + '</p>';
                    }
                    if (feature.properties.Fax2) {
                        html += '<p>' + feature.properties.Fax2 + '</p>';
                    }
                    if (feature.properties.Mail2) {
                        html += '<p>' + feature.properties.Mail2 + '</p>';
                    }
                    if (feature.properties.Renseignement) {
                        html += '<p>' + feature.properties.Renseignement + '</p>';
                    }
                    layer.on('click', function() {
                        $('#layer_infos .fill').html(html);
                    })
                    $('input[type="checkbox"]').on('click', function() {

                        $('#layer_infos .fill').html('<p>Cliquez sur une icône pour voir le détail</p>');

                    })
                    if (L.Browser.mobile) {
                        layer.on('click', function() {
                            $('#infos').addClass("slide");
                        })

                        $('.hamburger').click(function() {
                            $(this).toggleClass("is-active");
                            $('#filters').toggleClass("slide");
                        })
                        $('.close').click(function() {
                            $('#infos').removeClass("slide");
                        })
                    }



                }


                var promise = $.getJSON("examen.json");

                promise.then(function(data) {
                    var allexamens = L.geoJson(data);


                    var ccl18 = L.geoJson(data, {
                        filter: function(feature, layer) {
                            return feature.properties.Examen == "ccl18";
                        },
                        onEachFeature: onEachFeature,
                        pointToLayer: function(feature, latlng) {

                            return L.marker(latlng, {
                                icon: ccl18Icon
                            })
                        }

                    });

                    var chit1 = L.geoJson(data, {
                        filter: function(feature, layer) {
                            return feature.properties.Examen == "chit1";
                        },
                        onEachFeature: onEachFeature,
                        pointToLayer: function(feature, latlng) {

                            return L.marker(latlng, {
                                icon: chit1Icon
                            })
                        }
                    });

                    var chitotriosidase = L.geoJson(data, {
                        filter: function(feature, layer) {
                            return feature.properties.Examen == "chitotriosidase";
                        },
                        onEachFeature: onEachFeature,
                        pointToLayer: function(feature, latlng) {

                            return L.marker(latlng, {
                                icon: chitotriosidaseIcon
                            })
                        }
                    });
                    var gba = L.geoJson(data, {
                        filter: function(feature, layer) {
                            return feature.properties.Examen == "gba";
                        },
                        onEachFeature: onEachFeature,
                        pointToLayer: function(feature, latlng) {

                            return L.marker(latlng, {
                                icon: gbaIcon
                            })
                        }
                    });
                    var glucocerebrosidase = L.geoJson(data, {
                        filter: function(feature, layer) {
                            return feature.properties.Examen == "glucocerebrosidase";
                        },
                        onEachFeature: onEachFeature,
                        pointToLayer: function(feature, latlng) {

                            return L.marker(latlng, {
                                icon: glucocerebrosidaseIcon
                            })
                        }
                    });
                    var lysoglucosylceramide = L.geoJson(data, {
                        filter: function(feature, layer) {
                            return feature.properties.Examen == "lysoglucosylceramide";
                        },
                        onEachFeature: onEachFeature,
                        pointToLayer: function(feature, latlng) {

                            return L.marker(latlng, {
                                icon: lysoglucosylceramideIcon
                            })
                        }
                    });
                    var psap = L.geoJson(data, {
                        filter: function(feature, layer) {
                            return feature.properties.Examen == "psap";
                        },
                        onEachFeature: onEachFeature,
                        pointToLayer: function(feature, latlng) {

                            return L.marker(latlng, {
                                icon: psapIcon
                            })
                        }
                    });





                    map.fitBounds(allexamens.getBounds(), {
                        padding: [50, 50]
                    });

                  //  map.addLayer(ccl18)
                   // map.addLayer(chit1)
                   // map.addLayer(chitotriosidase)
                   // map.addLayer(gba)
                   // map.addLayer(glucocerebrosidase)
                   // map.addLayer(lysoglucosylceramide)
                   // map.addLayer(psap)

                    $("#ccl18").click(function() {
                        if (this.checked) {
                            map.addLayer(ccl18)
                            map.removeLayer(glucocerebrosidase)
                            map.removeLayer(chit1)
                            map.removeLayer(chitotriosidase)
                            map.removeLayer(gba)
                            map.removeLayer(lysoglucosylceramide)
                            map.removeLayer(psap)

                        } else {
                            map.removeLayer(ccl18)
                            map.removeLayer(glucocerebrosidase)
                            map.removeLayer(chit1)
                            map.removeLayer(chitotriosidase)
                            map.removeLayer(gba)
                            map.removeLayer(lysoglucosylceramide)
                            map.removeLayer(psap)
                        }
                    });
                    $("#chit1").click(function() {
                        if (this.checked) {
                            map.addLayer(chit1)
                            map.removeLayer(ccl18)
                            map.removeLayer(glucocerebrosidase)
                            map.removeLayer(chitotriosidase)
                            map.removeLayer(gba)
                            map.removeLayer(lysoglucosylceramide)
                            map.removeLayer(psap)

                        } else {
                            map.removeLayer(chit1)
                            map.removeLayer(ccl18)
                            map.removeLayer(glucocerebrosidase)
                            map.removeLayer(chitotriosidase)
                            map.removeLayer(gba)
                            map.removeLayer(lysoglucosylceramide)
                            map.removeLayer(psap)
                        }
                    });
                    $("#chitotriosidase").click(function() {
                        if (this.checked) {
                            map.addLayer(chitotriosidase)
                            map.removeLayer(ccl18)
                            map.removeLayer(glucocerebrosidase)
                            map.removeLayer(chit1)
                            map.removeLayer(gba)
                            map.removeLayer(lysoglucosylceramide)
                            map.removeLayer(psap)

                        } else {
                            map.removeLayer(chitotriosidase)
                            map.removeLayer(ccl18)
                            map.removeLayer(glucocerebrosidase)
                            map.removeLayer(chit1)
                            map.removeLayer(gba)
                            map.removeLayer(lysoglucosylceramide)
                            map.removeLayer(psap)
                        }
                    });
                    $("#gba").click(function() {
                        if (this.checked) {
                            map.addLayer(gba)
                            map.removeLayer(glucocerebrosidase)
                            map.removeLayer(ccl18)
                            map.removeLayer(chit1)
                            map.removeLayer(chitotriosidase)
                            map.removeLayer(lysoglucosylceramide)
                            map.removeLayer(psap)
                        } else {
                            map.removeLayer(gba)
                            map.removeLayer(glucocerebrosidase)
                            map.removeLayer(ccl18)
                            map.removeLayer(chit1)
                            map.removeLayer(chitotriosidase)
                            map.removeLayer(lysoglucosylceramide)
                            map.removeLayer(psap)
                        }
                    });
                    $("#glucocerebrosidase").click(function() {
                        if (this.checked) {
                            map.addLayer(glucocerebrosidase)

                            map.removeLayer(ccl18)
                            map.removeLayer(chit1)
                            map.removeLayer(chitotriosidase)
                            map.removeLayer(gba)
                            map.removeLayer(lysoglucosylceramide)
                            map.removeLayer(psap)

                        } else {
                            map.removeLayer(glucocerebrosidase)
                            map.removeLayer(ccl18)
                            map.removeLayer(chit1)
                            map.removeLayer(chitotriosidase)
                            map.removeLayer(gba)
                            map.removeLayer(lysoglucosylceramide)
                            map.removeLayer(psap)
                        }
                    });
                    $("#lysoglucosylceramide").click(function() {
                        if (this.checked) {
                            map.addLayer(lysoglucosylceramide)

                            map.removeLayer(ccl18)
                            map.removeLayer(chit1)
                            map.removeLayer(chitotriosidase)
                            map.removeLayer(gba)
                            map.removeLayer(glucocerebrosidase)
                            map.removeLayer(psap)
                        } else {
                            map.removeLayer(lysoglucosylceramide)
                            map.removeLayer(ccl18)
                            map.removeLayer(chit1)
                            map.removeLayer(chitotriosidase)
                            map.removeLayer(gba)
                            map.removeLayer(glucocerebrosidase)
                            map.removeLayer(psap)
                        }
                    });
                        $("#psap").click(function() {
                        if (this.checked) {
                            map.addLayer(psap)

                            map.removeLayer(ccl18)
                            map.removeLayer(chit1)
                            map.removeLayer(chitotriosidase)
                            map.removeLayer(gba)
                            map.removeLayer(glucocerebrosidase)

                        } else {
                            map.removeLayer(lysoglucosylceramide)
                            map.removeLayer(ccl18)
                            map.removeLayer(chit1)
                            map.removeLayer(chitotriosidase)
                            map.removeLayer(gba)
                            map.removeLayer(glucocerebrosidase)
                            map.removeLayer(psap)
                        }
                    });
                    $("#allexamens").click(function() {
                        if (this.checked) {

                            map.addLayer(ccl18)
                            map.addLayer(chit1)
                            map.addLayer(chitotriosidase)
                            map.addLayer(gba)
                            map.addLayer(glucocerebrosidase)
                            map.removeLayer(lysoglucosylceramide)
                            map.addLayer(psap)

                        } else {

                            map.removeLayer(ccl18)
                            map.removeLayer(chit1)
                            map.removeLayer(chitotriosidase)
                            map.removeLayer(gba)
                            map.removeLayer(glucocerebrosidase)
                            map.removeLayer(lysoglucosylceramide)
                            map.removeLayer(psap)
                        }
                    });

                });

          $('input[type="checkbox"]').on('click', function() {
            $('input[name="' + this.name + '"]').not(this).prop('checked', false);
            });
        });

This is working well, until I try to add cluster. I'm using the plugin leaflet.markercluster.js and I load my files like this

 <script src="js/leaflet.js"></script>
<script src="js/leaflet.awesome-markers.js"></script>
<script src="js/leaflet.markercluster-src.js"></script>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/main.js"></script>

I thought I had to load jQuery first but I saw many examples doing like this so...

I don't know if I have to add this code

var clusters = L.markerClusterGroup();
clusters.addLayer(promise);
map.addLayer(clusters);

to the global promise variable or individually to each layergroup. In fact I don't know either where to put it !! I tried everywhere, at the end, just after le get.Json function, after each "L.geoJson(data, {", inside my onEachFeature function... It doen't work..

Nothing's happening, the map shows my markers but no clusters...

I'd like to have my custom markers on the map, and when some of them have the same coordinates, to group them in clusters... So there would be custom markers and clusters together... Is it possible ?

How can you expect somebody will answer you if you give no real feedback to the answer to your previous question: gis.stackexchange.com/questions/356961/…? — TomazicM, Apr 3, 2020 at 18:44
Yes I understand your question, but I'm building two maps in a different way, looking for the better way to do it. This map is working, and if the code kindly provided by TomazicM works, I'll try to adapt it to my other map in order to get the best result.. Do you understand ? — blogob, Apr 3, 2020 at 19:18

blogob · Accepted Answer · 2020-04-03 22:07:15Z

Ok just after posting my question I found a first solution. Here is my modified code..where I needed to have clusters, I added the following :

         var markers = L.markerClusterGroup();//added this
         var glucocerebrosidase = L.geoJson(data, {
         filter: function(feature, layer) {
         return feature.properties.Examen == "glucocerebrosidase";
         },
         onEachFeature: onEachFeature,
         pointToLayer: function(feature, latlng) {

         return L.marker(latlng, {                          
         icon: glucocerebrosidaseIcon
        })
       }
    })
    markers.addLayer(glucocerebrosidase);//added this
    map.addLayer(markers);//added this

In my click function:

 $("#glucocerebrosidase").click(function() {
 if (this.checked) {
 map.addLayer(glucocerebrosidase)....

In fact it doesn't really solve my problem : It shows all my markers AND the clusters together.

As I'm using "category" filters (checkboxes) to show/hide markers, and each "category" markers have different colors,

I still need a solution to make clusters appear only when needed (when two point have exact same coordinates for example),
to connect filters with clusters, and finaly...
to give to clusters a custom color !!

I'll come back to give the solution if ever I find it !!

EDIT: I finaly found a solution to my problem. In fact I misplaced my code.

So here is the correct code :

Where culsters are needed, I just add "var myvarname= L.markerClusterGroup();"

     var glucomarker = L.markerClusterGroup();//added this
     var glucocerebrosidase = L.geoJson(data, {
      filter: function(feature, layer) {
      return feature.properties.Examen == "glucocerebrosidase";
      },
      onEachFeature: onEachFeature,
      pointToLayer: function(feature, latlng) {                            
      return L.marker(latlng, {                                
     icon: glucocerebrosidaseIcon //generated by leaflet.awesome-markers.js plugin
         })

        }
      })

And in my clik function :

 $("#glucocerebrosidase").click(function() {
  if (this.checked) {
  map.addLayer(glucomarker);//added this
  glucomarker.addLayer(glucocerebrosidase);//added this

I removed my initial : map.addLayer(glucocerebrosidase) with all markers
I Added all my makers melted with clusters like this :

map.addLayer(glucomarker); glucomarker.addLayer(glucocerebrosidase);

Now when I click on my glucocerebrosidase checkbox, all my correlating markers appear, and only those that are close together are grouped in a cluster !

To remove these markers I use

map.removeLayer(glucomarker)

instead of

map.removeLayer(glucocerebrosidase)

Stack Exchange Network

How can I cluster my markers with GeoJSON file?

1 Answer 1

Your Answer

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

Linked

Hot Network Questions

How can I cluster my markers with GeoJSON file?

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

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

Linked

Related

Hot Network Questions

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