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

Scraping the IKEA API in PHP

IKEA’s BILLY bookcase 80x28x106cm in birch veneer. A design classic. £45 for the everyman’s unobtrusive storage solution. Over 40 million BILLY bookcases sold since they were created in 1979. But how many of them are there in the my local branch of IKEA at the moment?

billy-bookcase

Not the most important question in the world but a useful one to do a quick demo of how to automatically pull data out of an API in PHP at a regular interval and store it in a database (MySQL in this case) – something that we commonly want to do to compile data-sets where live data readings are provided but historical data is not.

Where is my data?

The first thing to know is where we can get our live data. In the case of the IKEA website, there is a live stock check in the right hand column where you can select a particular store and see availability for the selected product. Here’s the location of the birch veneer BILLY bookcase on IKEA’s website: http://www.ikea.com/gb/en/catalog/products/80279786/. Note that final 8 digit number – that’s our unique product ID.
…click here to read the rest…

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…

A Super-Simple API Proxy for Angular with PHP

Often in an Angular JS web application (or any other front-end framework) we want to make a call to an API which needs to be authenticated with an API key (a unique code assigned to us by the API provider) using the $http service. We want to keep our API key secret and so don’t want to put in our .js files where it can be viewed, and then used, by anyone but JavaScript is all on the client-side so how do we keep our key safe?

…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…

Bristol Tramways

I think we can all agree that with an average rush-hour traffic speed of 14.5 mph, getting around in Bristol is not as quick as we might like it to be. Between 1875 and 1941 though, long before the days of First buses, you might have taken a Bristol Tramways tram to the office!

[Disclaimer: this is a bit of a diversion from normal posting topics but I’ve never heard anyone talk about Bristol’s trams before so I guess the history isn’t that well known and I thought it was interesting.]

Ever wondered why the Cooperative in the centre has a big clock on it? Well that used to be their offices:

This slideshow requires JavaScript.

Bristol Tramways operated 237 double decker trams like those pictured connecting a surprisingly wide area as shown in this route map from 1911…
…click here to read the rest…

Know Your Place, Bristol!

I stumbled upon this hidden away little BCC project yesterday called Know Your Place.

It’s actually two projects in one:
1. An interactive map viewer where you can compare a current map to historical maps
2. A map-based database of site of historical interest and geo-located historical photos

I lost track of quite a long time looking around at how parts of Bristol have changed over the years! Here’s an example looking at Queen Square:

This slideshow requires JavaScript.

I knew there was once a road going diagonally through Queen Square but I always wondered what they did about the statue. Now I know – they bent the road around it on each side. Obvious really.

That 1880s map is a work of art.
…click here to read the rest…

State of the City

While I was searching around for some city population data yesterday, I came across the document “Bristol State of the City mid-2015” (PDF link) which has some data “fun facts” about Bristol.

Here are a few I found interesting so putting them down for future reference:

  • More than 180 countries of birth and 91 languages spoken (Census 2011)
  • Life expectancy for women is 0.3 years below the national average but for men is 1.2 years below the national average (ONS 2011-2013)
  • 59% of Bristolians are overweight or obese
  • ~35,000 full time students live in Bristol during term time
  • 46% of working aged residents have at least one degree (compared to 36% nationally)
  • Bristol residents are more highly qualified than all the other Core Cities except Cardiff and is the third strongest academic cluster in the UK (after Oxford and Cambridge)
  • 193,000 homes (in 2014) – 55% owner-occupied / 24% private rented / 21% social rented
  • Average house price was £198,600 in Feb 2015 (Rightmove suggests it’s 8% higher than that now at around £215,500)
  • 93 crimes reported per 1000 people
  • 14.5mph is the average speed of traffic in rush hour
  • 45% of household waste is recycled (In 2010 it was only 8%)
  • 71% of residents are concerned about the impacts of Climate Change
  • 70% of shops, cafes, restaurants, pubs are independent
  • £B 350,000 of Bristol Pounds in circulation
  • 40% of the world’s wildlife films are linked to Bristol studios
  • 217,300 people are in employment in Bristol – an employment rate of 70.9% (Dec 2014)

I Want My ABC

Mindful Leadership

I’ve spent this week on a Mindful Leadership training course in the Netherlands. I’ve been working long enough to have been on quite a few training courses by now but, at a full 5 days, this one was certainly the longest and the one in which the participants (18 of us) bonded the most. The goodbyes and “keep in touches” we said earlier today to our colleagues from around the world were much more genuine than they sometimes are at these things.

As with any training course, there are many things I wrote down that I feel I must remember and use. It’s always much harder to keep that feeling a month later but I shall try.

Anyway, one of the things that I kept coming back to during the course was a structure around people’s motivations and psychological needs which is literally as easy as ABC. It goes like this:

People fundamentally want to feel three things……click here to read the rest…