8

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

3 Answers 3

8

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

2
  • Just would like to ask one more question: How to do if I want to change the icon to a circle marker when zoom in? E.g., var activeMarkerOptions = { radius: 10, fillColor: "#afff00", color: "#000", weight: 1, opacity: 1, fillOpacity: 0.9 }; if (layer.feature.properties.num < 0.5) return layer.setIcon(L.circleMarker([How to specify lat long here], activeMarkerOptions));
    – gis_dev
    Nov 18, 2016 at 1:16
  • It seems L.circleMarker is a vector layer.... Maybe the only way I could do this is to create a icon with a circle png file using iconUrl option....
    – gis_dev
    Nov 18, 2016 at 2:34
6

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/

8
  • Thanks for your response. Indeed I have read the suggestion answered by @juliabulia245 before but the suggestion seems applicable to L.CircleMarker only.
    – gis_dev
    Nov 4, 2016 at 8:07
  • I have tried the following but doesn't work: map.on('zoomend', function() { var currentZoom = map.getZoom(); if (currentZoom>12) { all_testptLayer.setStyle({iconSize: [200,200]}); } });
    – gis_dev
    Nov 4, 2016 at 8:08
  • Aha, you need to use setIcon
    – Shiko
    Nov 4, 2016 at 8:11
  • Would you mind to elaborate more? I tried all_testptLayer.setIcon({iconSize: [200,200]}); but it returns test.php:157 Uncaught TypeError: all_testptLayer.setIcon is not a function
    – gis_dev
    Nov 4, 2016 at 8:18
  • answer updated, check please
    – Shiko
    Nov 4, 2016 at 8:26
0

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

1
  • Nope, if you just scale you will change the icon size but coordinates are not correct.
    – Matt
    Jan 21, 2021 at 6:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.