Monday, 1 August 2016

geojson - Leaflet / JQuery -cannot add or remove class to divIcon marker


(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: ''});

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.




No comments:

Post a Comment

arcpy - Changing output name when exporting data driven pages to JPG?

Is there a way to save the output JPG, changing the output file name to the page name, instead of page number? I mean changing the script fo...