CODEWITHSUNDEEP
javascriptmapsleaflet
Ska
Ska

Reputation: 6888

Use leaflet.js inside SVG tag

Is it possible to draw the map inside the SVG tag? Which probably means there'd have to be SVG only version of the map without divs.

Upvotes: 1

Views: 322

Answers (1)

nikoshr
nikoshr

Reputation: 33344

You can use a foreignObject element to embed HTML into SVG, and that works quite well with Leaflet:

<svg>
    <foreignobject x="46" y="22" width="200" height="200">
        <div id='map'></div>
    </foreignobject>
</svg>

// setup your map as usual
var map = L.map('map').setView([51.505, -0.09], 12);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18
}).addTo(map);

And a demo

var map = L.map('map').setView([51.505, -0.09], 12);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18
}).addTo(map);
html, body {
  height: 100%;
  margin: 0;
}
#svg {
  width: 100%;
  height: 100%;
}
#map {
  width: 100%;
  height: 100%;
}
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/>

<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script>
   


<svg>
    <foreignobject x="46" y="22" width="200" height="200">
        <div id='map'></div>
    </foreignobject>
</svg>

Upvotes: 1

Related Questions