change width of outline for leaflet map depending on zoomlevel

Question

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
           }
       };
   }
   

Answer 1

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.

Answer 2

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();
});

Answer 3

In my case, @tallistroan 's answer worked for me. I define some parameters for my two vectors, but then after each style I define a "currentZoom" for that vector like @TomazicM explained. Here a part of my code and it works

            var borde = new L.geoJson(data, {                            
                style: function (feature) {                                                                      
                return {color: 'black', opacity: 1, weight: 3};
                }
            }).addTo(map); 

            map.on('zoomend', function () {
                currentZoom = map.getZoom();
                if (currentZoom >= 7) {
                    borde.setStyle({weight: 20});
                }
                else {
                    borde.setStyle({weight: 2});
                }
            });

            var calzada = new L.geoJson(data, {
                style: function (feature) {
                    var c;
                    switch (feature.properties.dpv_cal) {
                    case 'Natural':
                    c = '#ffffff';
                    break;
                    case 'Mejorada':
                    c = '#db6adb';
                    break;
                    case 'Pavimentada':
                    c = '#ff0127';
                    break;
                    default:
                    c = '#000000';
                }
                return {color: c, opacity: 1, weight: 2};
            }
            }).addTo(map);

            map.on('zoomend', function () {
                currentZoom = map.getZoom();
                if (currentZoom >= 7) {
                    calzada.setStyle({weight: 19});
                }
                else {
                    calzada.setStyle({weight: 1});
                }
                });