Leaflet: Resize markers in layer when zoom in

Question

May I ask how to resize markers in layer when zoom in?

var map = L.map('map', {
     center: [23.364739, 115.187951],
     zoom: 11,
     minZoom: 11, 
     maxZoom: 18,
});

var ar_icon = L.Icon.extend({
});

var ar_icon_1 = new ar_icon({iconUrl: '../_image/arrows/line_ar_0.png',     iconSize: [11, 11]});
var ar_icon_2 = new ar_icon({iconUrl: '../_image/arrows/line_ar_1.png',     iconSize: [22, 22]});

var all_testptLayer = new L.GeoJSON.AJAX("../data/test_geojson.php", {
    pointToLayer: function (feature, latlng) {.
        if (feature.properties.num < 0.5)
            return L.marker(latlng, {icon: ar_icon_1});
        else if (feature.properties.num < 1.0)
            return L.marker(latlng, {icon: ar_icon_2});
    }
}

all_testptLayer.addTo(map);

map.on('zoomend', function() {
   var currentZoom = map.getZoom();
   if (currentZoom>12) {
   // what should I do here to access all markers in the all_testptLayer and change the size of all markers to double in size?
   }
});

Answer 1

You have all your markers inside a L.GeoJSON, which is a subclass of L.LayerGroup, so you can use the eachLayer method, like...

all_testptLayer.eachLayer(function(layer) {
    // Do something with each marker inside all_testptLayer
});

You will have to combine this with the setIcon method of L.Marker, and the fact that layers created from a GeoJSON factory have a reference to the GeoJSON data inside their feature property, so something like:

var ar_icon_1 = ...;
var ar_icon_2 = ...;
var ar_icon_1_double_size = ...;
var ar_icon_2_double_size = ...;


map.on('zoomend', function() {
    var currentZoom = map.getZoom();
    if (currentZoom > 12) {
        all_testptLayer.eachLayer(function(layer) {
            if (layer.feature.properties.num < 0.5)
                return layer.setIcon(ar_icon_1);
            else if (feature.properties.num < 1.0)
                return layer.setIcon(ar_icon_2);
        });
    } else {
        all_testptLayer.eachLayer(function(layer) {
            if (layer.feature.properties.num < 0.5)
                return layer.setIcon(ar_icon_1_double_size);
            else if (feature.properties.num < 1.0)
                return layer.setIcon(ar_icon_2_double_size);
        });
    }
});

Further optimizations are possible. The most obvious one is to tore the state of the icon size, in order to not change the icons at each zoom level change (that code will change the icons on every zoom change, most probably to the same icons, wasting CPU time and needless DOM changes). 

Answer 2

Use setIcon() to change the markers icon in a layer:

var layer = '';//define the layer that contains the markers
map.on('zoomend', function() {
    var currentZoom = map.getZoom();

    //Update X and Y based on zoom level
    var x= 50; //Update x 
    var y= 50; //Update Y         
    var LeafIcon = L.Icon.extend({
        options: {
            iconSize:     [x, y] // Change icon size according to zoom level
        }
    });
    layer.setIcon(LeafIcon);
});

Reference:
http://leafletjs.com/examples/custom-icons/

Answer 3

The solution is to define special class name while creating your markers and then on zoomend event to change the scale in CSS for defined class name