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

UI Stencils

I was looking for a new ruler online (I know, exciting times!) when I came across these steel UI Stencils for iPhone / Android / website interface design…

This slideshow requires JavaScript.

I’m a big fan of sketching things out with a pencil and paper first but I’m also not that great at drawing so these are right up my street. Just wish I could find a UK supplier. Anyone know of one?

…click here to read the rest…

My Modern Desk

modern desk

I’m not very good at maintaining a tidy desk – usually there’s at least one pile of paper – so I thought I’d take a photo while things are looking neat!

Plus it gives me a chance to mention a few things I like that I have on my desk. Let’s break it down from left to right…

15 minute sand timer

Like this one from the School of Life but I prefer the white sand. I think this came from Amazon but I can’t find it on there anymore. Better not break it!
Handy for Pomodoro-style sprints or for timed breaks!

…click here to read the rest…

Drawing Better Graphs – Have Your Data Tell the Story

Graphs are supposed to communicate data in a meaningful way. That’s the whole point. But too often people miss the opportunity to create graphs that effectively communicate the story they want to tell in a way that’s both easily readable and aesthetically pleasing. In this time of decreasing attention spans, quickly and effectively telling the story of your data has never been more important.

So let’s take an example narrative and look at how we can create a better graph to get our message across. I’ve got some nice data about the usage of Bristol car parks we can use as an example. I have a hunch that Cabot Circus car park (very large capacity and primarily used by shoppers) has a lot of spare capacity that could be better used during weekdays so here’s my message.

Cabot Circus car park is underutilised in the week and they should offer reduced rates to office workers Monday to Friday to monetise that spare capacity.

Let’s start by plotting all the car park data I have for Bristol and Bath car parks for a single weekday using Excel’s default line plot…

carparkplot1

(Of course if I was actually making the case for this I’d be using averaged and max/min data rather than a single day but this post is about charting not data usage so bear with me)

A pretty messy plot. We can find Cabot Circus’s data in there but we have to work for it.
…click here to read the rest…

Minimum Viable Product vs Cutting a Slice

“Minimum Viable Product” or MVP should be pretty familiar to anyone who’s been keeping an eye on the developments in business and software development practices over the last few years, particularly in Silicon Valley and the lean startup movement. If you spend any time on Medium, you’ve probably read an article with a title like “7 Ways to Minimum Viable Product your Life in Just 30 Days”. In fact, I might go ahead and write that article!

Minimum Viable Product

But I digress. When I started talking about minimum viable products with some of my coworkers that are not developers, I did find that many weren’t aware of the concept so briefly the aim with a minimum viable product is to get as quickly and cheaply as possible to the most basic version of your product and get feedback on its value, flaws, potential improvements, etc before spending the time and money required to build a full-featured product. A sort of rapid prototyping (but may not even be a prototype!) Or, to quote Eric Ries:

The minimum viable product is that version of a new product which allows a team to collect the maximum amount of validated learning about customers with the least effort.

…click here to read the rest…