D3 Examples - Data URI SVG icons with Leaflet

Data URI SVG icons with Leaflet

Demonstrates how to load SVG's as Leaflet icons via the data URI method.

Following was helpful to figure this out:

http://codepen.io/gabrien/pen/NqGvGq

http://codepen.io/chriscoyier/pen/ZQgvyG/

This block is a modified example taken from Working with spatial data.

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
   <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.min.js"></script>
  
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    #map {
      height: 100%;
    }
  </style>
</head>
​
<body>
  <div id="map"></div>
  <script>
    var map = L.map('map').setView([30, 0], 2);
​
    L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);
    
    var CustomIcon = L.Icon.extend({
            options: {
                iconSize:     [40, 40],
                shadowSize:   [50, 64],
                iconAnchor:   [22, 94],
                shadowAnchor: [4, 62],
                popupAnchor:  [-3, -76]
            }
        });
    
    var svgrect = "<svg xmlns='https://www.w3.org/2000/svg'><rect x='0' y='0' width='20' height='10' fill='#5a7cd2'></rect><rect x='0' y='15' width='20' height='10' fill='#5d52cf'></rect></svg>";
    
        /* 
    For data URI SVG support in Firefox & IE it's necessary to URI encode the string
    & replace the '#' character with '%23'. `encodeURI()` won't do this which is
    why `replace()` must be used on the string afterwards.
    */
    var url = encodeURI("data:image/svg+xml," + svgrect).replace('#','%23');
    console.log(url);
   
    var rectIcon = new CustomIcon({iconUrl: url})
    
    L.marker([52, -0.09], {icon: rectIcon}).bindPopup("I am data URI SVG icon.").addTo(map);
​
​
    
  </script>
</body>
​
    