How to include SVG code into Leaflet.js?

Question

I have a custom SVG code with layers inside.

So far it's working in a web page, I can manipulate with show/hide jQuery functions and now I want to integrate with Leaflet.

I've read the tutorial and documentation on Leafletjs.com. All the examples I saw there are related with integrating image or some link for the OpenStreets maps etc.

First of all I've tried like this as an example:

  <script>

  // initialize the map
    var map = L.map('map-test').setView([42.35, -71.08], 13);

  // load a tile layer
  L.tileLayer('http://tiles.mapc.org/basemap/{z}/{x}/{y}.png',
    {
      attribution: 'Tiles by <a href="http://mapc.org">MAPC</a>, Data by <a href="http://mass.gov/mgis">MassGIS</a>',
      maxZoom: 17,
      minZoom: 9
    }).addTo(map);

</script>

This works fine, it's displayed the map, I can zoom in and zoom out, see the other objects, but from the source code I can see this is displaying like separate images with some logic.

I want to integrate my custom SVG code with all the layers inside, so I can drag, zoom and all other good features with Leaflet.

This website has exactly what I want to do: https://winter.intermaps.com/oetztal?lang=en

From the source code you can see they are integrating the full SVG code inside the <div class="leaflet-pane leaflet-overlay-pane">.

EDIT:

I've uploaded my map.html file into my server and the whole SVG code is inside that file. How can I include it into Leaflet?

Answer 1

Release 1.5.0 adds SVGOverlay layer that extends ImageOverlay.