CODEWITHSUNDEEP
leafletsvelte-3svelte-component
Markus
Markus

Reputation: 1292

Using Leaflet in a Svelte App - the Correct Way

I have written a Svelte component that displays a map using Leaflet. The following code of the component works.

I'm just wondering if this is the way to do it, or if there is a "more correct" or "smarter" way? Especially in view of the await import('leaflet'); in loadMap() and the way the CSS is loaded from the CDN in onMount()...

<script>
    import { onMount } from 'svelte';

    let map;

    onMount(() => {
        const link = document.createElement('link');
        link.rel = 'stylesheet';
        link.href = 'https://unpkg.com/[email protected]/dist/leaflet.css';
        link.onload = () => loadMap();

        document.head.appendChild(link);

        return () => {
            map.remove();
            link.parentNode.removeChild(link);
        };
    });

    async function loadMap() {
        await import('leaflet');
        map = L.map('map').setView([49, 12], 13);
        L.tileLayer('https://a.tile.openstreetmap.org/{z}/{x}/{y}.png ', {
            attribution:
                'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
            maxZoom: 18,
        }).addTo(map);
    }
</script>

<style>
    #map {
        height: 480px;
    }
</style>

<div id="map" />

Upvotes: 3

Views: 2967

Answers (1)

Gh05d
Gh05d

Reputation: 8982

You could use <svelte:head> to load the css and javascript: According to the docs: This element makes it possible to insert elements into document.head. During server-side rendering, head content is exposed separately to the main html content.

So the head component would look like this:

<svelte:head>
  <link
    rel="stylesheet"
    href="https://unpkg.com/[email protected]/dist/leaflet.css"
    integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
    crossorigin="" />

  <script
    src="https://unpkg.com/[email protected]/dist/leaflet.js"
    integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
    crossorigin="">

  </script>
</svelte:head>

Here is a full REPL to play around.

Upvotes: 2

Related Questions