The OpenStreetMap Geocoding API

It’s pretty common that we want to convert between a given address or postcode, a lat/long coordinate or a place name. For example to show the user’s current city or town we’d need to get their lat/long from their browser through the HTML Geolocation API and then we’d need to somehow work out what town or city that corresponds to. Or to search on a map for a certain town or city, we need to convert that into coordinates that we can use to set our map centre.
…click here to read the rest…

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