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.
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.
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>
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:
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.
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.