how to add multiple divIcons to each point in a geoJSON - Leaflet

[المشرف العام]

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 } }).addTo(map); var aDivIcon = L.divIcon({"iconSize": [12,12], "iconAnchor": Anchorvar, "popupAnchor": Popupvar, html: ''}); 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");

أكثر...