A Guide to Building a Map Application with Svelte

Have you ever wanted to build a map application but found the setup process overwhelming? With Svelte MapLibre GL, you can create a highly interactive and reactive map application with ease.

This guide will take you step by step through the development process. To keep things beginner-friendly, we'll start by setting up a new Svelte project. If you're already comfortable with that part, feel free to jump ahead!

Setting Up the Project

First, set up a Svelte project using the following command:

npx sv create .

There are no specific requirements for the project setup, but for this guide, I'll use the following configuration. Feel free to use it as a reference.

Installing Svelte MapLibre GL

You can install Svelte MapLibre GL with the following command:

npm install --save-dev svelte-maplibre-gl

Adding a Basic Map

Now, let's add a map. Replace the content of src/routes/+page.svelte with the following code.

<script lang="ts">
    import { MapLibre, NavigationControl, ScaleControl, GlobeControl } from 'svelte-maplibre-gl';
</script>

<MapLibre
    class="h-[55vh] min-h-[300px]"
    style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
    zoom={3.5}
    center={{ lng: 137, lat: 36 }}
>
    <NavigationControl />
    <ScaleControl />
    <GlobeControl />
</MapLibre>

Build the Svelte application with the following command.

npm run dev

If everything is set up correctly, you should see a map like the one below.

That's all it takes to add a map. Easy, right?

Adding Markers to the Map

Now that we've added a map, let's have some fun by adding markers wherever you like! As an example, we'll place a marker at Sapporo Station in Japan.

<script lang="ts">
    import {
        MapLibre,
        Marker,
        NavigationControl,
        ScaleControl,
        GlobeControl
    } from 'svelte-maplibre-gl';
</script>

<MapLibre
    class="h-[55vh] min-h-[300px]"
    style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
    zoom={3.5}
    center={{ lng: 137, lat: 36 }}
>
    <NavigationControl />
    <ScaleControl />
    <GlobeControl />

    <Marker lnglat={[141.350714, 43.068564]} />
</MapLibre>

Getting a feel for reactivity

According to the author, the main advantage of this map library is its reactivity. To get a feel for it, let's update the previous code as follows.

<script lang="ts">
    import {
        MapLibre,
        Marker,
        NavigationControl,
        ScaleControl,
        GlobeControl
    } from 'svelte-maplibre-gl';

    let lnglat: [number, number] = [141.350714, 43.068564];
</script>

<MapLibre
    class="h-[55vh] min-h-[300px]"
    style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
    zoom={3.5}
    center={{ lng: 137, lat: 36 }}
>
    <NavigationControl />
    <ScaleControl />
    <GlobeControl />

    <Marker bind:lnglat draggable />
</MapLibre>

<p>
    Longitude:
    <input type="number" bind:value={lnglat[0]} />
</p>
<p>
    Latitude:
    <input type="number" bind:value={lnglat[1]} />
</p>

Try moving the marker or changing the value in the text box. You'll see how Svelte and MapLibre interact with each other in real time.

Exciting, isn't it? If you find it interesting, be sure to give it a try!

You can find this demo in the following repository. Check it out for reference!
https://github.com/nakamori1024/svelte-maplibre-demo

Next Steps

If you're interested, try exploring the following next steps:

• Adding features (Coming Soon)
• Deploying with AWS Amplify (Coming Soon)