is there a way to resize marker icons depending on zoom level in leaflet?

Question

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!!!

Answer 1

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.