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:

• OpenCycleMap
• Transport
• Landscape
• Outdoors
• Atlas (still in development)

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:

• Terrain (available in the United States only)
• Watercolor
• Toner

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.

Note

Learn about the Stamen tile layers, including Burning Map, Mars and Trees, and Cabs & Crime, at http://maps.stamen.com.

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.

Tip

Stamen has an online tool to edit map layers and save the output as an image. To create your own artistic map images, go to http://mapstack.stamen.com.

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