Consumer Prices Tracker Click for the full list

At The Outlier we produce 20-30 new charts a month on the key issues of the day. To date we've published more than 450 charts.

See more charts

Data Repository

Data on key issues at your fingertips. Download charts or original datasets.

Tools

Simple tools for when you need clarity and facts

Games

A game a day keeps the doctor away. Stretch your brain and relax a little

Newsletters

Low volume but high value: A different perspective that helps you make sense of the issues

Home

databites

Leaflet and SvelteKit

If you’re planning on building projects in SvelteKit, it needs a slightly different set-up to Leaflet.js. Here’s what you need to do to get it to work.

By Alastair Otter
Sunday, September 10, 2023

Leaflet.js is still my go-to library when I need to make a map. Using Leaflet with vanilla Javascript is pretty simple: add the Leaflet library and CSS file, add a few lines of code and you’re done. The Leaflet site has a fantastic starter tutorial on this.

More recently I’ve been building projects in SvelteKit which needs a slightly different setup to work. Mostly you need to account for things like checking whether the code is running in the browser.

This is the bare-bones SvelteKit-Leaflet setup I use for most projects.

Install Leaflet

Starting with a working SvelteKit app, install Leaflet:

npm i leaflet

Next …

Create a map component

Create a component file in the src/lib directory, or wherever you put your components files. In this example, I created it here: src/lib/Map.svelte/





This loads onMount, OnDestroy and browser from Svelte. Then, if the code is running in a browser, Leaflet is loaded into the mapContainer div. 



In the code above I set the view to a point in Johannesburg, South Africa: 



.setView([-26.1925013,28.0100383]



You can also change the tile layers by altering the tile layer setup. The Leaflet Providers page is a good place to start looking for base maps. 



leaflet.tileLayer(
   'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      { attribution: '&copy;
      OpenStreetMap contributors'
       }
)



Add component to page



Import the map component into the page and display. 











This post is largely based on this post by Stanislav Khromov. I changed a few things and added some additional details.

  More on databites
 
 How to make custom maps — even if you don’t know how to code
 
When programs such as Flourish or Datawrapper don’t have the map format you need, you can make your own custom map. Here’s how.
  
 Leaflet and SvelteKit
 
If you’re planning on building projects in SvelteKit, it needs a slightly different set-up to Leaflet.js. Here’s what you need to do to get it to work. 
  
 Hands-on: 5 reasons to switch to OpenRefine to clean data
 
It has a pretty steep learning curve but it’s definitely worth the effort to learn OpenRefine if you need to clean large amounts of very messy data.
  
 How we create custom charts using Flourish and Figma
 
At The Outlier we publish a lot of static graphics and we like to apply our own styles. Here’s how we do it using Flourish and Figma.
  
 Simple guide to scraping data from PDFs
 
Papers, PDFs and poorly scanned documents are the way most data journalism projects begin. But instead of typing up a new spreadsheet, here’s how to use Adobe Acrobat DC to do all the hard work for you.
  
 10 spreadsheet formulas we use to superpower our data analysis
 
Both Microsoft Excel and Google Sheets are powerful spreadsheet programmes for storing and sorting through mounds of data. Here are our favourite formulas for making sense of data.
  
 How to make a Zimbabwean elections map
 
In the latest in our series on creating African election maps, we explain how to find data on Zimbabwean elections and how to map it.
  
 Working with Open Street Map vector data in QGIS
 
When we teach data journalism most people are eager to make a map but they’re usually unsure of where to get data for a map. And while there are many good sources for map data, if you’re looking for something, like a particular town or neighbourhood, that’s not always so easy. One solution is to […]
  
 How to extract multiple features from a shapefile in QGIS
 
This is a simple(ish) guide to finding and extracting features from a larger map into a smaller one. In this example selected rivers in South Africa are copied into a new GeoJSON format file. Start with a shapefile and QGIS. This shapefile is of rivers in South Africa and is a good example of selecting […]
  
 10 steps to create a custom Svelte component library
 
Although creating complex sites with multiple components in SvelteKit is pretty simple already, creating a library for your most regularly used components adds even more power to your projects. With a set of common components set up as an NPM package you can easily import them into your projects, and when you change one component […]
  
 Loading non-essential data behind the scenes in Svelte
 
Streaming promises makes it simple to fetch data without having the page wait for non-essential data requests to complete before starting to render. 
  
 Remove features from a map with QGIS
 
When you’re working with maps there are often parts you want to remove. For example, most maps of South Africa will include Marion and Prince Edward Island, two small research islands more than 2,000km off the coast of mainland South Africa. In most cases when mapping South African data you do not want to include […]
  
 Creating a grid overlay for a map using QGIS
 
There are a number of reasons you may want to make a grid of points covering a geographic area. In my case, I wanted to work out which point in South Africa was the furthest from a police station. The idea was to create a grid with points 1km apart. Then I could compare the […]
  
 Automating data downloads from a Google spreadsheet
 
Downloading data from a Google Spreadsheet is usually as easy as clicking file->Download->CSV But sometimes you need to automate the download. You can either do this by publishing a CSV version of the file (file→share→Publish to the web) if you have editing access to the file. If you don’t have editing access you can still […]
  
 DataDesk: a better way to collect data in African newsrooms
 
In mid-2022 we set out to build a new tool for collecting, sharing and publishing data, one specifically aimed at African journalists. The motivation to build the tool was born out of our experience tracking Covid-19 data in South Africa first and then across the continent. For two years from March 2020 we had collected Covid-19 […]
  
 How – and why – we switched from interactive to static data visualisations
 
In March 2022 we switched from making interactive data visualisations to focusing on static charts with tight constraints. It has undoubtedly been one of the best decisions we’ve made during the relatively short two-year history of our data journalism and visualisation company. Before switching to predominantly static charts we had a reputation for relatively complex […]
  
 A big list of data journalism tools and resources
 
Getting started with data journalism can be tricky, especially if you’re unsure of the best way to start working with your first dataset, or even where to start looking for your first dataset. At Media Hack, we’ve been working with data and journalism for the past five years. In that time the number of tools […]