2

I am new to leaflet and javascript and would like to add custom icons to the code below but am not sure where exactly to put the code and what stuff to move around... I am looking at the Leaflet.markerCluster example. I am using the same CSS portion as from the custom icon example as:

<style>
    .mycluster {
        width: 40px;
        height: 40px;
        background-color: greenyellow;
        text-align: center;
        font-size: 24px;
    }
</style>

Here's the rest of my code:

var markerClusters = L.markerClusterGroup();

iconCreateFunction: function (cluster) {
    var markers = cluster.getAllChildMarkers();
    for (var i = 0; i < markers.length; ++i) {
        var n = 0;
        var popup = markers[i].name +
            '<br/>' + markers[i].city +
            '<br/><b>IATA/FAA:</b> ' + markers[i].iata_faa +
            '<br/><b>ICAO:</b> ' + markers[i].icao +
            '<br/><b>Altitude:</b> ' + Math.round(markers[i].alt * 0.3048) + ' m' +
            '<br/><b>Timezone:</b> ' + markers[i].tz;

        var m = L.marker([markers[i].lat, markers[i].lng]).bindPopup(popup);

        markerClusters.addLayer(m);
    }
    return L.divIcon({
        html: n,
        className: 'mycluster',
        iconSize: L.point(40,
            40)
    });
}

map.addLayer(markerClusters);
3

Welcome to GIS SE!

As explained in the Leaflet.markercluster plugin home page, the key is to use the iconCreateFunction option of your L.markerClusterGroup() factory.

In the case of the demo you refer to, it is used in lines 43-50; this is where it specifies the myCluster class name:

var markers = L.markerClusterGroup({
  // ...
  iconCreateFunction: function (cluster) {
    var markers = cluster.getAllChildMarkers();
    var n = 0;
    for (var i = 0; i < markers.length; i++) {
      n += markers[i].number;
    }
    return L.divIcon({
      html: n,
      className: 'mycluster',
      iconSize: L.point(40, 40)
    });
  },
  // ...
});
  • Thank you for your help! I am also sorry for the extremely late reply but I figured it out. – nugg Sep 17 '18 at 16:45

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.