Creating a Crime Data Tool With Google Maps

In this series of posts I will cover building a simple app using the Google Maps API to display data from a Socrata API.

Open Data BR is a new initiative by the city of Baton Rouge to make public data easily accessible to everyone. This is part of a growing movement toward data transparency going on across the country. Baton Rouge uses the Socrata Open Data API to host and present this data. Governments and municipalities throughout the United States and around the world are using the Socrata platform to transform how public information is presented & consumed. Given the prevalence of Socrata data sets available on the internet, I hope you will be able to easily adapt this project to use data that is more relevant to you.

Socrata provides an extensive set of tools for browsing and manipulating data, especially if you have some experience with other data analysis tools. These tools may be a little advanced for some people so I thought it would be cool to make a really simple app for searching for crime around the City of Baton Rouge. One of the great things about using Socrata is that they take care of the entire back-end. All you need to do to deploy this app is to place the files on a web server.

Here's the source code for the app so you can go ahead and download it and skip the explanation. Here is the finished product.

The goal with this app is to make it as simple as possible so it will only have the following inputs:

Address input
Crime type selector
Radius selector
Date range picker

We are going to use a lot of external libraries to get this done fast. Here's a list:

Bootstrap - this will give us a quick and easy UI structure
Bootstrap Material Theme - this is a cool alternative theme to just stock bootstrap
Bootstrap Date Range Picker - a really nice bootstrap component for selecting date ranges
jQuery - used in this app mostly for DOM manipulation and AJAX
Google Maps JavaScript API - used for customizing our Google Maps experience
Snazzy Maps - the cool site I used for getting a custom Google Maps theme
Font Awesome Markers - this is used for creating dynamic google maps markers with custom colors
Underscore.js - general JavaScript utility library used for data manipulation in this app
Highcharts.js - chart & graph library used for displaying alternate view of the data
Moment.js - library for formatting and manipulating dates

With all these libraries we should barely have to write any code at all!

The main component of this app is the map so we will start there in the next post.