how to change color of all circlemarkers in leaflet.js

Question

I have a leaflet map that has the data loaded as points, using:

 pointlayer = new L.GeoJSON(geojson, {
    pointToLayer: function (feature, latlng) {
        return L.circleMarker(latlng, geojsonMarkerOptions
        );
    }
});
pointlayer.addTo(mymap);

And the geojsonMarkerOptions are:

var geojsonMarkerOptions = {
    radius: 4,
    fillColor: "#0163FF",
    color: "#0163FF",
    weight: 2,
    opacity: 1,
    fillOpacity: 0.4,
};

What i would like is to change the circleMarker color and fillColor for every circleMarker on baselayerchange. I can get the baselayer change and change the label color just fine, but can't seem to figure out how to do the circleMarker.

mymap.on('baselayerchange', function(e) {
   if (e.name === "Basic") {
       $( ".my-labels" ).css( "color", "#0163FF" );
   } else if (e.name === "Satelite") {
       $( ".my-labels" ).css( "color", "#FEFF01" );
   }
});

I have tried to set a class for the markers, but i can't seem to call it. If I can't get any other solution, I'll have to clear my datalayer and reload it with the new color, but would rather not do that unless necessary.

Answer 1

Within the mymap.on() callback you could iterate over points in the points layer and utilize setStyle() to change the color:

var keys = Object.keys(pointlayer._layers)
keys.forEach(function(key){
  pointlayer._layers[key].setStyle({ 
    color: "#FEFF01"
  })
})

Geometries are stored within a layer's _layer object, it's an object rather than an array, so you have to do the additional step with Object.keys().