Introduction

I recently shared a screenshot on LinkedIn that showed a heatmap (via Google Maps) that contained live UK crime data within a webpage.  It seemed popular and got over 2000 views in less than 48 hours so I thought I’d put together a short post that covers the main elements and how to implement it.

I also wanted to try out Visual Studio Code (the light weight development environment) so used that to build the heatmap web page.  It’s worth mentioning that I didn’t spend longer that 60 minutes on this so the code was quickly put together!

What’s the verdict on VS Code?

I think it’s great if you want to build out an MVP or prototype.  I installed a few extensions to give me intellisense and built the heatmap relatively quickly without any major blockers.

Google Maps

Before you do anything you need to get a Google API key.  You can get one here.  When you have it, you embed this into the script tag in your HTML page.

<script async defer src=https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY  type="text/javascript"></script>

When you have this, you can write script to generate the map.  You need to setup the map “canvas”, here is an example of the code I used.  Here I have a simple function which performs a little setup.

There are a few config parameters you can pass into the options such as setting the centre of the map when it’s rendered.  After the configuration has been defined, you tell the Google Maps API which DIV your map should be displayed in.  In this case “map-canvas”.  You can see here there’s nothing fancy going on with the DIV.

<div id="map-canvas" style="width:80%; height: 80%; float: left;">
</div>

There were some other bits of JavaScript used to switch the heatmap on/off and change the gradient but I won’t go into that.  You can find more examples on the web regarding those options if you wish.

Police Data

With the basics of the map configuration now setup I had to get some crime data with accompanying location fields.  I done some research and knew I could get this from data.police.uk.

There are loads of datasets you can query here.  You can extract the data to flat file format, consume REST API endpoints and apply numerous filters.  I wanted to build this quick so opted for a flat file extract.

The key fields in this dataset were the latitude and longitude as it’s these fields that had to be passed into the Google Maps API.

The following screenshot details some of the fields in typical dataset from this resource:

Armed with this information, it was then simply a case of extracting the longitude and latitude and passing those into the Google Maps API for rendering.  I opted for a quick and dirty approach just to prove the concept and copied/pasted these values into some JavaScript which you can see here.
With the Google Maps API, my police data and custom JavaScript I was then able to visualise this data in a web page!

Social Feeds

One idea I had was the integration of social feeds from Twitter and Facebook via their APIS to list location specific posts within the context of crimes that were being mapped.  Natural Language Processing (NLP), Named Entity Recognition (NER) or Part Of Speech tagging  (POS) could be applied to identify common words, phrases or locations.  I’ve talked about these things in earlier posts.

Finally

This is very basic but could easily be extended.  The search fields could be implemented to query the REST endpoints and plot the heatmaps in real-time.  Additional analytics could be applied to the datasets as they’re retrieved.

Maybe other datasets from data.gov.uk could be merged with this data to produce mashups.

Have you already used this API?

Have you built something similar?

Any thoughts on this?  Drop me a comment or get in contact.