Using different map tiles with Leaflet.js

The newsmap we made is grey. Grey is nice when you want to put a lot of extra stuff on the map. You can place colored markers, polygons, polylines etc on top of the map and it will look quite tidy. I think grey is great for data maps for the same reason, the map doesn’t interfere too much with the data but works as a geographic reference for the data. Grey can also be a bit boring so it really depends what you want with your map. This tutorial will show you how to change the map tiles in the news map. It’s quite easy, just follow these steps.

It is reccommended that you have been through the geojson news map tutorial before you proceed with this. We will use the file from that tutorial. If you don’t have that file you can grab it here:

geojsonOnly.zip

Open the file in your code editor. We want to adjust the code that determines what tiles are used in the map. This is determined by a leaflet function called tileLayer, so just click Ctrl / Cmd + f and use ’tileLayer’ as a search string in the code. The function is around line 181 and looks like this:

 L.tileLayer('http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png', {
                maxZoom: 18,
                attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
            }).addTo(map);

So when we want to replace this we need to find some other tiles. There is a great site for this. Just follow the link below:

https://leaflet-extras.github.io/leaflet-providers/preview/

This site makes it easy to find a wide variety of tiles for your map project. There are several providers listed here so you can choose whatever map style you want. Some of the providers require that you sign up and get an api key. It is also recommended to check pricing for each provider. Some will charge money if you have a lot of traffic on your site.

Click on a tile style from the thumbnails on the right to get a preview of that tile set. You will also get a code for the chosen tiles in the pop up window on the map. There are two types of tiles. If the tile thumbnail has a little circle on it it means that these are regular tiles. If it has a little square that becomes acts as a check box when clicked it means this is a data layer that goes on top of the regular map. We will only focus on the regular tiles in this tutorial. Here is the code for the ‘Spinal map’ tiles. If you want to turn your map up to 11 these are the tiles you want:

var Thunderforest_SpinalMap = L.tileLayer('https://{s}.tile.thunderforest.com/spinal-map/{z}/{x}/{y}.png?apikey={apikey}', {
	attribution: '&copy; <a href="http://www.thunderforest.com/">Thunderforest</a>, &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
	apikey: '<your apikey>',
	maxZoom: 22
});

One thing to note here is that these Spinal map tiles require an api key. Go to thunderforest.com to get an api key for these specific tiles. Or you can chose a set of tiles that doesn’t require an api key if you want to start immediately.

You need to adapt the code above slightly before it will work. This goes for tile codes with or without api keys. At the start of the code you can see that the whole tile layer is assigned to a variable. In our news map we don’t need this so just remove everything before ‘L.tilelayer…’

At the end of the code we need to add the following code just before the semicolon at the very end. This is to add the tilelayer to our map.

.addTo(map)

And that’s it! If you want to keep a few different types of tiles in your code to switch back and forth you can simply comment out the tileLayer code you are not using.