Search
Use data files to import existing data or have an easy way of managing global data in this SvelteKit tutorial.
In this lesson, we’ll put everything together to create a page with a map which lists top dog parks. We’ll generate a .json
file which contains the location and other metadata for a dog walk, then another file which fetches the .json
file and renders the map. Let’s get to it!
All the metadata for the park — the name, latitude and longitude — needs to live somewhere. We’re going to store it in a static JSON file to keep things simple. Create /static/locations.json
with the following content:
[
{
"name": "Rotary Dog Park",
"latitude": "-45.883450",
"longitude": "170.541870"
},
{
"name": "Wakari Dog Park",
"latitude": "-45.8558982",
"longitude": "170.4745478"
},
{
"name": "Kew Park Dog Exercise Area",
"latitude": "-45.8993109",
"longitude": "170.4841993"
},
{
"name": "Jubilee Park",
"latitude": "-45.8792223",
"longitude": "170.4880913"
},
{
"name": "Bayfield Park",
"latitude": "-45.8937276",
"longitude": "170.5249021"
}
]
We’re going to create a reusable component that we can use anywhere on the site to output our favorite dog parks. We’re using a library called Leaflet to create the map and markers so we’ll install the dependencies for this first. In your terminal run:
npm i -D leaflet
With leaflet installed, we can put it to work. Let’s create a new Map component at /src/lib/Map.svelte
with the following:
<script>
import { onMount } from 'svelte';
import { browser } from '$app/env';
onMount(async () => {
if (browser) {
const response = await fetch(`/locations.json`);
const markers = await response.json();
const L = await import('leaflet');
const map = L.map('map');
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'})
.addTo(map);
let bounds = [];
for (let i = 0; i < markers.length; i++ ) {
const marker = L.marker([markers[i].latitude, markers[i].longitude]).addTo(map);
marker.bindPopup(markers[i].name);
bounds.push([markers[i].latitude, markers[i].longitude]);
}
map.fitBounds(bounds);
}
});
</script>
<svelte:head>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" crossorigin=""/>
</svelte:head>
<div id="map" />
<style lang="scss">
#map {
height: 400px;
width: 100%;
}
</style>
I’ll break this down so you can understand what’s going on here.
First, we’re importing two scripts:
So all of this ensures, we’re in the right environment and we’re ready to initalize the map:
import { onMount } from 'svelte';
import { browser } from '$app/env';
onMount(async () => {
if (browser) {
...
}
});
Now we need to get our locations, so we fetch them from the .json
file we created earlier:
const response = await fetch(`/locations.json`);
const markers = await response.json();
Then we import the leaflet library and initialize the map:
const L = await import('leaflet');
const map = L.map('map');
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'})
.addTo(map);
Then we’re adding the markers and setting the bounds so the map is centered and zoomed in on the markers:
let bounds = [];
for (let i = 0; i < markers.length; i++ ) {
const marker = L.marker([markers[i].latitude, markers[i].longitude]).addTo(map);
marker.bindPopup(markers[i].name);
bounds.push([markers[i].latitude, markers[i].longitude]);
}
map.fitBounds(bounds);
We have to include the styles which we’re adding straight to the <head>
:
<svelte:head>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" crossorigin=""/>
</svelte:head>
Add the element that holds the map:
<div id="map" />
And finally add some basic styles:
<style lang="scss">
#map {
height: 400px;
width: 100%;
}
</style>
Phew! Take a look at your hard work and admire the beautiful map you’ve created.
In our final lesson, we'll look at how to add social sharing images and meta.
SvelteKit Beginner Tutorial Series