Simple way to make custom SVG markers

[Paul Wujek]

Here's a simple way to create SVG markers.

        // here's the SVG for the marker
        var icon = "<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='10' height='10'><path stroke='red' stroke-width='2' fill='none' d='M 0,0 L 10,10 M 10,0 L 0,10 Z'/></svg>";

        // here's the trick, base64 encode the URL
        var svgURL = "data:image/svg+xml;base64," + btoa(icon);
       
        // create icon
        var mySVGIcon = L.icon( {
            iconUrl: svgURL,
            iconSize: [10, 10],
            shadowSize: [12, 10],
            iconAnchor: [5, 5],
            popupAnchor: [5, -5]
        } );

        //
        var marker = L.marker( [ position.latitude, position.longitude ], { icon: mySVGIcon } );

[Adriana Zidu]

Thanks for this solution,Paul

It works great!!