Demonstrates how to load SVG's as Leaflet icons via the data URI method.
Following was helpful to figure this out:
- Optimizing SVGs in Data URIs
- http://codepen.io/gabrien/pen/NqGvGq
- http://codepen.io/chriscoyier/pen/ZQgvyG/
This block is a modified example taken from Working with spatial data.
Built with blockbuilder.org
forked from enjalot's block: WWSD #1: Leaflet starter
forked from enjalot's block: WWSD #1: Leaflet starter
How apply some external styles like
:hover
un such URI encoded svg? Can't find any solutions except cssfilter
which is too basic. Let's say i want to pass data into my svg like this:See that
+ markers[i][1] +
in<text>
tag...? This is important for me to pass some information to marker itself.Then i encode it
let url = encodeURI('data:image/svg+xml;utf8,' + svgicon).replace('#','%23');
... and then all the rest stuff.So... next thing is... i want to apply some custom styling for
stroke
,fill
and the rest properties, when user hovers on this icon. Or if some events happen.Have anybody any ideas?
I can't use there
<svg><use xlink:href="file.svg#my-icon">
coz' i don't see a way to inject my dynamic text. Otherwise there would no be a problem to style it.Swapping different styled svg icons ... is kind a solution, but i do not prefer it.