Setting marker cluster icon color dynamically in Leaflet?

Question

In a Leaflet map, when a school point is clicked it passes an id of that school and adds a student point layer specific to that school. The point layer is rendered on the map as marker cluster. So, clicking on another school will add student marker specific to that second school and so on. I want to display student marker cluster of each school with different colors.

Marker Cluster is defined as below:

 var mcStudent= L.markerClusterGroup({
                spiderfyOnMaxZoom: true,
                disableClusteringAtZoom: 14,
                maxClusterRadius: 5,
                spiderfyDistanceMultiplier:10,            
                iconCreateFunction: function(cluster) {
                    var markers = cluster.getAllChildMarkers();
                    var html = markers.length;
                    $('<style>.stdCluster {background-color:'+bgcolor+';}</style>').appendTo('head'); //override class attribute (background color)
                     return new L.DivIcon({ html: html, className: 'stdCluster', iconSize: new L.Point(15, 15) });

                     }            

                });

The button calls a function loadStudent() which is defined as below:

var student;
var bgcolor;
 
function loadStudent(id){
    bgcolor = '#'+(Math.random()*0xFFFFFF<<0).toString(16); //generate color code dynamically
    $.ajax({
            url:'php/findStudent.php', 
            type:'POST',
            data:{id:id},
            success: callbackStd
    });
    
           
    function callbackStd(response){                    
        student = L.geoJSON(JSON.parse(response), {pointToLayer:function(feature,latlng){        
            return mcStudent.addLayer(L.marker(latlng,{icon: studentIcon}));  
        }});
        

    student.addTo(mymap);
            
};

The issue is: marker cluster color changes dynamically as expected but it applies for all school student point clusters. For example, when a first school student point is loaded, the cluster icon color looks like below: When second school point is added. it changes the color for both first and second school: Now, when third school student point is added, it changes the color of all 3 schools. I want to display student marker cluster of each school with different color. I could not work out the logic here.

Answer 1

To achieve what you want to achieve, you should have separate cluster layer for each school. Create random color for each cluster and use it in iconCreateFunction option function for that cluster.

Below is an example of how code could look then. regions is GeoJSON with four polygons where random points are created. number property of points feature is for test just sequential number.

var tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 18,
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}),
latlng = L.latLng(46, 15);

var map = L.map('map', {center: latlng, zoom: 8, layers: [tiles]});

function createCluster() {
  var bgcolor = '#'+(Math.random()*0xFFFFFF<<0).toString(16);
  var markers = L.markerClusterGroup({
    spiderfyOnMaxZoom: true,
    disableClusteringAtZoom: 14,
    maxClusterRadius: 5,
    spiderfyDistanceMultiplier:10,            
    iconCreateFunction: function (cluster) {
      console.log(cluster);
      var markers = cluster.getAllChildMarkers();
      var n = 0;
      for (var i = 0; i < markers.length; i++) {
        n += markers[i].number;
      }
      var html = '<div style="background-color: ' + bgcolor + '">' + n + '</div>';
      return L.divIcon({
        html: html,
        className: 'mycluster',
        iconSize: L.point(60, 30)
      });
    },
    spiderfyOnMaxZoom: false, showCoverageOnHover: false, zoomToBoundsOnClick: false
  });
  return(markers);
}

regions.features.forEach(function(region) {
  var bbox = turf.bbox(region);
  var points = turf.randomPoint(80, {bbox: bbox});
  var markerCluster = createCluster();
  var n = 0;
  L.geoJSON(points, {
    onEachFeature: function(feature, layer) {
      layer.number = ++n;
      markerCluster.addLayers(layer);
    }
  });
  map.addLayer(markerCluster);
});

The above code gives this result: