'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:

image

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