Is there a way to change the icon image depending on the zoom level? (leaflet.js)

Question

I am making an area drawing tool for a web application, and I use markers as anchors that the user can use to change the shape of the polygon.

This is what I still have. http://demos.nodeline.com/leaflet_development/

repo is at https://github.com/SpencerCooley/Leaflet_development

$(document).ready(function(){ var map, cloudmade, sanAntonio, polygonPoints map = new L.Map('map'); cloudmade = new L.TileLayer('http://{s}.tile.cloudmade.com/d4334cd6077140e3b92ccfae2b363070/997/256/{z}/{x}/{y}.png', { attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>', maxZoom: 18 }); sanAntonio = new L.LatLng(29.4238889, -98.4933333); // geographical point (longitude and latitude) map.setView(sanAntonio, 13).addLayer(cloudmade); polygonPoints = []; var polygon = new L.Polygon(polygonPoints); map.addLayer(polygon); map.on('click', function(e) { var marker = new L.Marker(e.latlng, {draggable:true}); polygonPoints.push(e.latlng); var markerId = polygonPoints.length -1 map.addLayer(marker); polygon.setLatLngs(polygonPoints); marker.on('drag', function(){ var locationWhileDrag = marker.getLatLng(); $('#first_marker').val(locationWhileDrag); polygonPoints.splice(markerId,1,locationWhileDrag); polygon.setLatLngs(polygonPoints); }); }); }); 

I want the markers to be normal size when the user is zoomed in to street level. When you zoom out, normal sized markers completely drown out the polygon. I looked through the docs but couldn't find anything about it.

I'm mostly looking for suggestions / brainstorming. I think maybe there is a way to determine what zoom state you are in right now. If so, I can use the if statement to change the icon.

Answer 1

Ok, so I found some methods and came up with the following:

 //this sets up an icon to be replaced on redraw. var MyIcon = L.Icon.extend({ iconUrl: 'marker.png', iconSize: new L.Point(10, 16), shadowSize: new L.Point(10, 16), iconAnchor: new L.Point(10, 16) }); var icon = new MyIcon(); //When view resets use the smaller icon if zoom level is less than 13 map.on('viewreset', function(){ if(map.getZoom() < 13){ marker.setIcon(icon); } }); 

The setIcon () method was not in the docs, I found it on the google forum and worked. I made a smaller icon, and basically I just replace the original icon when the zoom level is less than 13. I will now implement different markers for different zoom levels to give the effect of “farther” markers.

Here is the revised code.

 $(document).ready(function(){ var map, cloudmade, sanAntonio, polygonPoints map = new L.Map('map'); cloudmade = new L.TileLayer('http://{s}.tile.cloudmade.com/d4334cd6077140e3b92ccfae2b363070/997/256/{z}/{x}/{y}.png', { attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>', maxZoom: 18 }); sanAntonio = new L.LatLng(29.4238889, -98.4933333); // geographical point (longitude and latitude) map.setView(sanAntonio, 13).addLayer(cloudmade); polygonPoints = []; var polygon = new L.Polygon(polygonPoints); map.addLayer(polygon); map.on('click', function(e) { //this sets up an icon to be replaced when redraw. var MyIcon = L.Icon.extend({ iconUrl: 'marker.png', iconSize: new L.Point(10, 16), shadowSize: new L.Point(10, 16), iconAnchor: new L.Point(10, 16) }); var icon = new MyIcon(); //this sets up an icon to be replaced when redraw. var marker = new L.Marker(e.latlng, {draggable:true}); polygonPoints.push(e.latlng); var markerId = polygonPoints.length -1 map.addLayer(marker); polygon.setLatLngs(polygonPoints); marker.on('drag', function(){ var locationWhileDrag = marker.getLatLng(); $('#first_marker').val(locationWhileDrag); polygonPoints.splice(markerId,1,locationWhileDrag); polygon.setLatLngs(polygonPoints); }); //When view resets use the small icon if zoom level is less than 13 map.on('viewreset', function(){ if(map.getZoom() < 13){ marker.setIcon(icon); } }); }); }); 

here is a demo: http://demos.nodeline.com/leaflet_development/

Answer 2

You can also change the general class when scaling and make changes to CSS.

 map.on('zoomend', function(event) { document.body.className = "zoom"+map.getZoom(); }); 

then your CSS will be:

 .myIcon{background:red;} .zoom4 .myIcon{background:pint;} 

I use it to hide the name of my marker until you increase the size of the previous level 10.