Make Beautiful Maps With Leaflet and Stamen Tiles

Combining the power of Leaflet JavaScript mapping library and Stamen’s map tiles to make beautiful interactive maps like this…

leaflet stamen map of bristol

For an Angular project I’m working on, I’m building a pretty standard map with map markers using Leaflet.js and the excellent angular-leaflet-directive. I was happily working away with the standard Open Street Map tiles but as I started to add my markers I decided the tiles were a bit too cluttered with labels, landmarks, etc and started looking for a cleaner option.

I’d seen Stamen’s Watercolor map tiles before on a design blog so thought I’d see if I could get them working. It was easy enough to just replace the Leaflet baselayer tiles URL to reference the Stamen map tiles instead and that looks really nice – I may use this as the default in my project – but because of the slightly impressionistic nature of the map images, I also wanted to give the user some way to hook into what they were looking at by adding the option to show some road names.

Fortunately Stamen had my back again with their Toner Labels map tiles which just contain country/road/street names but no map features. If I could overlay these labels on my Watercolor map images, I could have the best of both worlds!

This idea is simple but it took me a lot longer to implement than it should have. Partly due to my unfamiliarity with both Leaflet and the angular-leaflet-directive and partly due to the lack of good examples of how to layer multiple map tile sets and how to define layer options on multiple tile layers. As is often the case, the final code was quite simple once I worked out how to wire it all up.

I’ll be using this within a wider Angular app but I put together a simplified demo page for your viewing pleasure. Here’s an embedded demo or you can see it in all it’s full window glory here: Beautiful Leaflet Stamen Tiles Map Demo