I am adding a geoJSON to a map using a custom divIcon (from svg) for point markers with Leaflet. The divIcon needs to resize on different zoom levels. Currently I can see the icons and the popup works, but they do not resize (and actually, they are not anchored correctly either). I have tried to reset the iconSize property on a zoom event, but that is not working; the zoom event is hit but the icon does not change. I also tried to add multiple icons to each feature (points) in the geoJSON using the 'pointToLayer' function as described in the Leaflet docs, thinking that I could toggle the opacity at different zoom levels, but this does not work either (only one icon is added). How can I use divIcons that will resize?
some code snippets:
geoJSONLayer = L.geoJson(newFeatures, {//onEachFeature: onEachFeature,pointToLayer: function (feature, latLng) { return new L.Marker(latLng, { icon: aDivIcon, clickable:false, opacity:1 }).bindPopup(popupContent, popupOptions), new L.Marker(latLng, { icon: aDivIcon2, clickable:false, opacity:0 }).bindPopup(popupContent, popupOptions); /// this doesn't work }}).addTo(map);var aDivIcon = L.divIcon({"iconSize": [12,12], "iconAnchor": Anchorvar, "popupAnchor": Popupvar, html: ''});(event example)
map.on('zoomend', function(e) { if (map.getZoom() === 15) { iconSize = [12,12]; Anchorvar = [12,12] ; Popupvar = [ 0, -12]; } ...}
أكثر...
some code snippets:
geoJSONLayer = L.geoJson(newFeatures, {//onEachFeature: onEachFeature,pointToLayer: function (feature, latLng) { return new L.Marker(latLng, { icon: aDivIcon, clickable:false, opacity:1 }).bindPopup(popupContent, popupOptions), new L.Marker(latLng, { icon: aDivIcon2, clickable:false, opacity:0 }).bindPopup(popupContent, popupOptions); /// this doesn't work }}).addTo(map);var aDivIcon = L.divIcon({"iconSize": [12,12], "iconAnchor": Anchorvar, "popupAnchor": Popupvar, html: ''});(event example)
map.on('zoomend', function(e) { if (map.getZoom() === 15) { iconSize = [12,12]; Anchorvar = [12,12] ; Popupvar = [ 0, -12]; } ...}
أكثر...