I am trying to add divIcons (SVGs) as markers to a point layer from a GeoJSON in a webapp using Leaflet. I need to have different sized markers at different zoom levels.

I have asked related questions here and here in my attempts to simply resize the svg on a map zoom event, but this has proved harder than I thought (and harder than I think it should be). I would like to now try to add multiple markers to each point, and toggle their opacity at different zoom levels, but I don't see a clear way to do this.

Here is the code that constructs the map layer from a GeoJSON, and adds the icon:

geoJSONLayer = L.geoJson(newFeatures, {
    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); /// adding a 2nd marker in this way doesn't work    

var aDivIcon = L.divIcon({
    "iconSize": [12, 12],
    "iconAnchor": Anchorvar,
    "popupAnchor": Popupvar,
    html: '<svg class="anIcon"><use xlink:href="#marker-anIcon"/></svg>'

I tried to swap the css class this way on a zoom event, but this leaves the old and new marker visible:

$(".icon14").attr("class", "icon14 icon15");
  • Instead of $(".icon14").attr("class", "icon14 icon15"); shouldn't it be $(".icon14").attr("class", "icon15");? (Remove icon14) Oct 5, 2018 at 21:38


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.