6

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

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

  • 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 '16 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 '16 at 2:34
4

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/

  • 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 '16 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 '16 at 8:08
  • Aha, you need to use setIcon – Shiko Nov 4 '16 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 '16 at 8:18
  • answer updated, check please – Shiko Nov 4 '16 at 8:26

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.