Stanislav Khromov

Having just started on a new SvelteKit project, I was tasked with implementing a Leaflet component.

Using Leaflet in SvelteKit is a bit tricky due to its dependency on the window object and the way SvelteKit builds its production bundle, but it is fully possible, so let’s do that in this post. We’re going to assume that you have a working SvelteKit app. If not, follow the official guide first!

Let’s start out by installing leaflet:

npm i leaflet

Now we can create a simple Svelte component based on the Leaflet Quick Start guide!

Create the file src/lib/LeafletMap.svelte

<script>
    import { onMount } from 'svelte';
    import { browser } from '$app/env';

    onMount(async () => {
        if(browser) {
            const leaflet = await import('leaflet');

            const map = leaflet.map('map').setView([51.505, -0.09], 13);

            leaflet.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            }).addTo(map);

            leaflet.marker([51.5, -0.09]).addTo(map)
                .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
                .openPopup();
        }
    });
</script>


<main>
    <div id="map"></div>
</main>

<style>
    @import 'https://unpkg.com/leaflet@1.7.1/dist/leaflet.css';
    main #map {
        height: 800px;
    }
</style>

Finally, add your new component to your src/routes/index.svelte file:

<script>
	import LeafletMap from '$lib/LeafletMap.svelte';
</script>

<main>
	<LeafletMap />
</main>

Now it’s time to start the dev server with npm run dev and visit http://localhost:3000/ to marvel at the results:

Web Developer at Aftonbladet (Schibsted Media Group)

View Comments

  • OliverOliver

    Author Reply

    Thanks for sharing! I could also load the css from the installed NodeJS module using

    @import 'leaflet/dist/leaflet.css';


Next Post