1

(this is related to a previous question of mine)

I am adding a divIcon (an svg) as the icon for features in a geoJSON, using Leaflet. I can add a class to the html property of the icon, but I cannot seem to dynamically add or remove the class using jQuery. I would like to do this to change the size of the icon at different zoom levels (unless anyone else has a better idea how to do this?)

code snippets below:

this part works as expected; the icon is the size given in the css class (although the 'size' property seems to be ignored)

var icon = L.divIcon({"iconSize":new L.Point(50, 50), "iconAnchor": AnchorIcon,  "popupAnchor": PopIcon, html: '<svg id="thisIcon" class="thisIcon15" ><use xlink:href="#marker"/></svg>'});

but if I try to dynamically find if this class exists on a zoom event with JQuery, the return value is false:

map.on('zoomend', function(e) {
  console.log( $('#thisIcon').hasClass("thisIcon15")  ); // false

I tried directly referencing 'svg' in the JQuery call as well...no luck.

EDIT: I found that 'addClass' and 'removeClass' cannot be used directly with svgs (LINK).

I tried the workaround suggested in that link, but although I get the new SVG at the right size, the old one does not disappear; instead the resized SVG appears on top of the old one. From what I can see, the size property given in the icon declaration is not being honored. If i could find a way to add all the different sized icons to each point, then toggle the opacity of each one, that could work.

Improve this question
3
  • Is your selector correct, #thisIcon or is it supposed to be a particular class? If you have a code sample to post somewhere or like a plinkr, it would make things easier. Worst case would be dynamically removing and adding stylesheets specifically for your markers via jQuery, but you should be able to select it correctly somehow.
    – Branco
    Nov 30, 2015 at 17:28
  • I tried adding and removing dynamically, with the same result. As far as I can tell from the code given above, 'thisIcon' is the correct ID..but there are many instances of this iscon (for many features) so maybe assigning the ID in this way is incorrect.
    – JasonBK
    Nov 30, 2015 at 18:14
  • I also tried adding 'thisIcon' as a class to the html instead of as an id, and use 'addClass' with the class ($('.thisIcon').addClass...) but this also did not work.
    – JasonBK
    Nov 30, 2015 at 18:41

1 Answer 1

Reset to default
2

Here's a codepen example that shows how to add a class to an SVG. No jQuery required.

document.getElementsByTagName('svg')[0].classList.add("anotherclass");
console.log(document.getElementsByTagName('svg')[0].classList)

https://codepen.io/anon/pen/KQLgKL?editors=1111

Improve this answer

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.