Icono SVG con Leaflet

Incluye plugin para maximizado.

by José Miguel Sánchez Alés

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://ghostgroup.github.io/Leaflet.DoubleRightClickZoom/src/leaflet.rightclickzoom.js"></script>
<script src="https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css">
<div id="map"></div>
<template id="icono">
      <svg xmlns='http://www.w3.org/2000/svg' viewBox="0 0 20 25">
         <rect x='0' y='0' width='20' height='10' fill='#5a7cd2'/>
         <rect x='0' y='15' width='20' height='10' fill='#5d52cf'/>
      </svg>
</template>

CSS

#map {
  height: 500px;
  width: 100%;
}

JavaScript

encodeSVG = function(svg) {
  var type = "image/svg+xml";

  return "data:" + type + "," +
    svg.outerHTML.replace(/(:?<|>|"|'|#|\s+)/g, function(c) {
      return {
        '<': '%3C',
        '>': '%3E',
        '"': "%22",
        "'": "%27",
        '#': '%23'
      }[c] || " ";
    });
}

var svg = document.getElementById("icono").content.querySelector("svg");

var map = L.map('map').setView([37.07, -6.27], 9);
map.zoomControl.setPosition('bottomright');
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
  maxZoom: 18
}).addTo(map);

var icon = L.Icon.extend({
  options: {
    iconSize: [30, 30],
    shadowSize: [50, 64],
    iconAnchor: [22, 94],
    shadowAnchor: [4, 62],
    popupAnchor: [-3, -76]
  }
});

L.marker([37.07, -6.27], {
  icon: new icon({
    iconUrl: encodeSVG(svg)
  })
}).bindPopup("I am data URI SVG icon.").addTo(map);

// Añade el butón de pantalla completa
map.addControl(new L.Control.Fullscreen({
  position: 'topright'
}));