6

I want to change the outline of a polygon depending on the zoomlevel. I thought it's easy to implement but there must be something wrong. My polygons dissapear when I try it with this code:

  1. to get current zoomlevel:

    map.on('zoomend', function() {
      var currentZoom = map.getZoom();
    });
    
  2. style function to style polygon:

    function myStyle(feature) {
        return {            
            fillColor: '#1c9099',
            color: 'white',
            if (currentZoom == 15) {
                weight: 2
            } else {
                weight: 3
            }
        };
    }
    
4

I slightly changed your code, and this is working for me:

var myStyle =
{
    fillColor: '#1c9099',
    color: 'white',
    weight: 3
};
var polygon = L.polygon(
    [[51.509, -0.08],
    [51.503, -0.06],
    [51.51, -0.047]]);
polygon.setStyle(myStyle).addTo(map);

map.on('zoomend', function () {
    currentZoom = map.getZoom();
    if (currentZoom == 15) {
        polygon.setStyle({weight: 2});
    }
    else {
        polygon.setStyle({weight: 3});
    }
});

First a basic style for the object (here a polygon) is set. By using the setStyle() function it is possible to change specific style attributes, while the rest of the basic style remains the same.

1

Since you revisited your question, here is simpler solution that uses your style function. Just define variable currentZoomoutside zoomend event function, so that it will be accessible inside myStyle function:

var currentZoom = map.getZoom();

map.on('zoomend', function() {
  currentZoom = map.getZoom();
});

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.