Was to enjoy being in a local Alameda County hacking event this weekend. The goal of it was to utilize data sets available on data.acgov.org. An initial plan was to provide bus information and tracking services. After looking online however we were able to find several apps that provided local bus information already. After some deliberation I suggested using the local crime data to map over bus stops and routes to provide ideas on what areas are safe. With this idea I started prototyping.
To fulfill the features for the application we needed a few things: A way to plot points on a local map, a way to display heatmaps of crimes and display the current user’s location. I had never done location mapping but was able to read through the google maps api to see that it had all the functionality we need. It was relatively easy to import in the library and the components that you wanted and follow some examples to get a basic setup. Getting the user’s location was an easy task, a navigator.geolocation.getCurrentPosition call with a callback with the current location if approved.
Next was the heatmap display, for this I was able to get a json copy of the crime database and store it in the app. This is done by creating a new google.maps.visualization.HeatmapLayer with a list of locations. It then generates a heatmap based on the weight of the given points relative to the total. The problem I soon discovered was that there were so many points that each point releative to the whole was small so the api would not display it. There were two parts to this: 1 only get the places within 500 meters of the user’s current location or the searched location. 2: this still caused there to be too much data the solution I came up with on the spot there was to run through the json from the data and reduce the duplicate locations by a certain percentage. Since many of the points were exactly at the same point I could add up the count at each point and with the knowledge of the total number of points reduce the number of those points to maintain the same proportion. This not only made the rendering faster it also lead to a more accurate heatmap.
The final step was to map out all the bus stops nearby. This is actually a surprisingly hard bit data to get a hold of. I was not able to find a single source that contained both meaningful names and lat/long coordinates. To get around this I read more into the google maps api to find the places library. This allows you to query nearby locations and display them. Luckily for me Google in all its’ data hording actually has pretty accurate bus stop information. I imagine it is used for the google map public transportation directions. With that I could display the meaningful names of the stops with a heatmap overlay meeting the basic requirements for this event.
In the end we didn’t win. It was a lot of fun though and I was able to learn a popular api I had been meaning to try out.
May 2nd 2015 – Jared Mavis