Code Summary

File Structure

___maproom
|____css
| |____bootstrap.min.css
| |____cartodb.css
| |____mapbox.css
| |____style.css
|____index.html
|____js
  |____bootstrap.min.js
  |____cartodb.js
  |____globals.js
  |____jquery.min.js
  |____list.min.js
  |____mapbox.standalone.js
  |____mdbla.config.js
  |____mdbla.create.js
  |____mdbla.display.js
  |____mdbla.map.js
  |____mdbla.query.js

Index.html

This file governs the basic HTML structure for the site. It imports CSS and javascript libraries, and produces the basic html layout using bootstrap classes. All DIV's come with id's allowing them to be accessed via jQuery.

Libraries

1. Bootstrap
   The over all site layout (grids), buttons, and interactions use the Bootstrap library.
2. cartodb.css and mapbox.css
   The interactive map design elements mostly use the built in css structure from carto. Some elements are borrowed from mapbox, hence the addition of the mapbox.css.
3. style.css
   All other styles are defined in style.css. Mostly for the look and feel of the data panel, waffles, etc.
4. Carto
   The map library.
5. jQuery

Javascript

Introduction

As the project is based on the mdbla object namespace, all relevant variables, arrays, objects, and functions are written inside the mdbla namespace. For example, variables are defined as:

mdbla.map;

Array example:

mdbla.colorPallete = ['#6A3D9A','#FF7F00','#33A02C','#1F78B4','#E31A1C'];

Object example:

mdbla.cartoBookingsTable = {
	'LASDNeighborhoods' : 'lasd_2010_2015_bookings2',
	'LAPDNeighborhoods' : 'lapd_2010_2015_01052017_v2',
	'LBPDNeighorhoods' : 'lbpd_geocode_01_03_17',
}

This way, everything within the project can be accessed by simple outputting the mdbla object. Some useful commands to try out (using the console) when the site is up:

mdbla.data - stores all the data retrieved from the carto database mdbla.highlightedData - stores the data of the currently highlighted polygon

Files

There are five javascript files that are central to the project.

<!-- mdbla javascript -->
<script src="js/mdbla.config.js"></script>
<script src="js/mdbla.query.js"></script>
<script src="js/mdbla.map.js"></script>
<script src="js/mdbla.create.js"></script>
<script src="js/mdbla.display.js"></script>

mdbla.config.js

The config file lists all the parameters that are used under the mdbla namespace. It includes default values for geographies (mdbla.geography), police departments (mdbla.department), and cartoDB layers.

mdbla.query.js

Once the parameters have been configured, this file initiates the carto map (mdbla.map). Once the map is instantiated, the following functions are triggered:

• mdbla.cartoSQL()

This function sends a request to carto to grab the data for the given geography which is stored as mdble.geography (the default is in the config.js file "LASDNeigbhorhoods").

mdbla.map.js

This file stores the function relevant to the map behavior. Notable functions are:

• mdbla.setMap()

setMap generates and draws the carto layer that goes on top of the base map. It includes the pre-rendered jail data as configured in the carto platform. It also instructs on what to do when a user clicks on a feature, and hovers on a feature.

mdbla.create.js