[GIS] How to change icons for Leaflet markers when using cluster plugin

leafletmarkersweb-mapping

I'm using Leaflet MarkerCluster. I created a MarkerClusterGroup as markers1 as you can see. There's about a hundred points I have written like var addressPoints in this format:

   var addressPoints = [
    [40.747344,-73.994985, "***", "***", "University", "***", "***", "***"],

This is my code:

var markers1 = new L.MarkerClusterGroup( { showCoverageOnHover: false } );


        ......
    for (var i = 0; i < addressPoints.length; i++) {
        var a = addressPoints[i];
        var title = a[2];
        var direct = a[3];
        var univ = a[4];
        var city = a[5];
        var state = a[6];
        var country = a[7];
var marker = new L.Marker(new L.LatLng(a[0], a[1]), { icon: myIcon } );

        ......

marker.bindPopup(list);

I need to put three different icons for markers for each "University" category (3 categories). That is var univ = a[4] in this list. I don't want to change those nice green circles when markers are clustered, but those icons for standalone markers when we're using big zoom. Is there some way to do that?

Best Answer

You can create three different icon-objects, outside loop, using L.Icon. E.g: iconA, iconB and iconC. Then, inside loop, switch icon according to univ-category.

var myIcon;
switch(univ) {
  case "cat1":
    myIcon = iconA;
  break;
case "cat2":
    myIcon = iconB;
break;
case "cat3":
    myIcon = iconC;
break;
default:
    myIcon = iconX;
}
//Then create the marker
var marker = new L.Marker(new L.LatLng(a[0], a[1]), { icon: myIcon } );
Related Question