Search code examples
javascriptsvgleaflet

Use svg as map using leaflet.js

Is it possible to use SVG image as the base map for leaflet.js ?

In my case I have huge svg file and I wish to allow my users to use all of leaflet's features such as zoom, markers, layers.

Solution

  • Yes, you can just use imageOverlay, like this

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

var imageUrl = 'https://www.amcharts.com/lib/3/maps/svg/australiaHigh.svg',
  imageBounds = [
    [40.712216, -74.22655],
    [40.773941, -74.12544]
  ];

L.imageOverlay(imageUrl, imageBounds).addTo(map);
    #map {
  height: 400px;
}
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<div id="map"></div>