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. import { MapLibre, NavigationControl, ScaleControl, GlobeControl } from 'svelte-maplibre-gl'; 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. import { MapLibre, Marker, NavigationControl, ScaleControl, GlobeControl } from 'svelte-maplibre-gl'; 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. import { MapLibre, Marker, NavigationControl, ScaleControl, GlobeControl } from 'svelte-maplibre-gl'; let lnglat: [number, number] = [141.350714, 43.068564]; Longitude: Latitude: 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)

Feb 26, 2025 - 05:38

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.




    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 }}
>
     />
     />
     />

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.




    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 }}
>
     />
     />
     />

     lnglat={[141.350714, 43.068564]} />

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.




    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 }}
>
     />
     />
     />

     bind:lnglat draggable />



    Longitude:
     type="number" bind:value={lnglat[0]} />


    Latitude:
     type="number" bind:value={lnglat[1]} />

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)