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) – Stefan Oct 5 '18 at 21:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.