22

I'm making a project for the school and I need to resize the marker icons depending on zoom level in a leaflet map, Is there an easy way to accomplish this? Any tutorial on the web? Thanks in advance for the help!!!

Joe Kennedy
  • 9,365
  • 7
  • 41
  • 55

2 Answers2

27

In order to change the size of the markers when you zoom in/out, you'll need to handle the event.

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

The zoomend event will be called whenever the map has finished zooming in or out. See the API here.

Now, inside this function, you can call your custom code in order to change the size of the markers. For example, let's say you wanted to take a simple approach and set the size of a circle marker equal to the size of the maps zoom level. See the API for a CircleMarker here

// Create some marker that will be resized on the map zooming
var myMarker = new L.CircleMarker([10,10], { /* Options */ });

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

Now whenever the map zooms in or out, the size of the marker will change.

Patrick D
  • 6,659
  • 3
  • 43
  • 55
  • 5
    You might wanna change `L.CircleMarker` to `L.circle`. As I understood it `L.CircleMarker` is used for circles which should not change the size accoding to zoomlevel – four-eyes Dec 21 '15 at 16:57
6

I'm not sure what Stophace is referring to regarding circleMarkers not changing size, but, adding to the approved answer... if you want to resize circleMakers or change any other styling options (I find it helpful to change the weight along with radius), you can use the following approach:

    map.on('zoomend', function() {
        var currentZoom = map.getZoom();
        var myRadius = currentZoom*(1/2); //or whatever ratio you prefer
        var myWeight = currentZoom*(1/5); //or whatever ratio you prefer
            layername.setStyle({radius: myRadius, weight: setWeight});
    });

layername will be replaced with the name of whatever layer you have which contains circleMarkers... and of course you can change the fractions to your liking to suit your needs.

I'm guessing the OP's school project is finished, but I hope this helps others who have the same question!

juliabulia245
  • 61
  • 1
  • 3