'Leaflet image overlay not working in Svelte
I am trying to add image as overlay in leaflet but it is giving me blank map. The whole idea is to plot x,y values on given image. I am trying to use imageoverlay for that. Here is my code.
<script>
import { onMount } from "svelte";
import L from "leaflet";
onMount(() => {
var map = L.map("issmap").setView([51.505, -0.09], 13);
var imageUrl = 'http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
imageBounds = [[40.712216, -74.22655], [40.773941, -74.12544]];
L.imageOverlay(imageUrl, imageBounds).addTo(map);
L.marker([51.5, -0.09])
.addTo(map)
.bindPopup("A")
.openPopup();
});
</script>
<html lang=en>
<head>
<link
rel="stylesheet"
href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""
/>
<script
src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""
></script>
<style>
#issmap {
height: 180px;
}
</style>
</head>
<body>
<div id="issmap">
</div>
</body>
</html>
The output looks like this when I add a marker:

How can I make it work?
Solution 1:[1]
You're using head tags the wrong way, svelte has a specials tags for handling window, head or body in the html, in this case you have to use svelte:head were you can import any cdn inside of it. look the documentation inside the svelte API svelte:head documentation
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Alvaro Fuentes |
