Tile layer providers

Now that you have created your first map, you are probably wondering how to change the tile layer to something else. There are several tile layer providers, some of which require registration. This section will present you with two more options: Thunderforest and Stamen. Thunderforest provides tiles that extend OpenStreetMap, while Stamen provides more artistic map tiles. Both of these services can be used to add a different style of basemap to your Leaflet map.

Thunderforest provides five tile services:

To use Thunderforest, you need to point your tile layer to the URL of the tile server. The following code shows how you can add a Thunderforest tile layer:

var layer = new L.TileLayer('http://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png');
map.addLayer(layer);

The preceding code loads the landscape tile layer. To use another layer, just replace landscape in the URL with cycle, transport, or outdoors. The following screenshot shows the Thunderforest landscape layer loaded in Leaflet:

Stamen provides six tile layers; however, we will only discuss the following three layers:

The other three are Burning Map, Mars and Trees, and Cabs & Crime. The Burning Map and Mars layers require WebGL, and Trees and Cabs & Crime are only available in San Francisco. While these maps have a definite wow factor, they are not practical for our purposes here.

Stamen requires you to follow the same steps as Thunderforest, but it includes an additional step of adding a reference to the JavaScript file. After the reference to your Leaflet file, add the following reference:

<script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js?v1.2.4"></script>

Instead of L.TileLayer(), Stamen uses L.StamenTileLayer(tile set name). Replace the tile set name with terrain, watercolor, or toner. Lastly, add addLayer() to the map as shown in the following code:

var layer = new L.StamenTileLayer("watercolor");
map.addLayer(layer);

Stamen's tile layers are not your typical basemap layers; they are works of cartographic art.

The following screenshot shows the Stamen watercolor layer loaded in Leaflet. As you zoom in, you will see more detail: