Leaflet SVG Base Layer

by kzima

HTML

<script src="http://cdn.leafletjs.com/leaflet-1.0.0-b1/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-1.0.0-b1/leaflet.css">
<div id="map"></div>

CSS

#map { 
    height: 400px; 
}

JavaScript

// create the map
var map = L.map('map', {
    center: [40.75, -74.2],
    zoom: 13
});

// create the image
var imageUrl = 'http://blackicemedia.com/presentations/2013-02-hires/img/awesome_tiger.svg',
    imageBounds = [[40.712216, -74.22655], [40.773941, -74.12544]];

L.imageOverlay(imageUrl, imageBounds).addTo(map);