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

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.


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)
    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().

| improve this answer | |

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.