Industry case study: Data Eric Brumer 2/19/2014

Agenda Belltower Books Belltower Books Trucking: backend & frontend Google maps & javascript

Textbook buyback company Founded in 2004 at Cornell University

Belltower Books Database PHP & javascript & MySQL 110 tables 105 million records Uses Website (appointments, online store, etc) Selling books (listing, picking, shipping) Data tracking (books bought, cash-in-hands) Report generation (audit, paychecks, etc)

Agenda Belltower Books Belltower Books trucking: backend & frontend Google maps & javascript

trucking_driver id name phone trucking_route id name driver_id start_date turned_in trucking_location id name type latitude longitude trucking_point id route_id location_id ordinal picked_up {0, “6250 S 228 th ”, “ups”, , } {1, “505 W State St”, “ups”, , } {2, “University of Washington”, “school”, , } … {0, “Eric’s first route”, 0, 1/1/2014, 1} {1, “Eric’s second route”, 0, 2/1/2014, 0} … {0, “Eric Brumer”, “ ”} {1, “Bert McClendon”, “ ”} …

Agenda Belltower Books Belltower Books trucking: backend & frontend Google maps & javascript

Google Maps Javascript API Useful as a reference var mapOptions = { zoom: 12, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); var markerOptions = { position:..., map: map }; var marker = new google.maps.Marker(markerOptions); Otherwise kinda sucky

get_data.php webpage containing raw data $year = $_GET["year"]; $data2005 = array( array(name => "New York University", lat => , lng => ), array(name => "LeMoyne College", lat => , lng => ),... array(name => "American University", lat => , lng => ), array(name => "George Washington University", lat => , lng => ) ); $data2013 = array( array(name => "Hampshire College", lat => , lng => ), array(name => "University of Massachusetts", lat => , lng => ),... array(name => "Walla Walla University", lat => , lng => ), array(name => "Whitman College", lat => , lng => ) ); if ($year == "2005") { $ret = $data2005; } else if ($year == "2013") { $ret = $data2013; } else { $ret = array(); } echo json_encode($ret);

HTML Page Layout These buttons access another website asynchronously for data!

Javascript class representing a school marker function School(name, lat, lng) { this.name = name; // name of the school this.lat = lat; // latitude coordinate this.lng = lng; // longitude coordinate this.marker = null; // reference to google maps marker object } School.prototype.CreateMarker = function(map) {... hidden for now... } School.prototype.ClickMarker = function() { alert("clicked marker for " + this.name); this.ClearMarker(); } School.prototype.ClearMarker = function() {... hidden for now... } Global variables var globals = { map: null, schools: null, buttonCounter: 0 };

Functions called to add markers function add_markers(year) { // First, clear any markers on the existing map for (var schoolsIndex in globals.schools) { globals.schools[schoolsIndex].ClearMarker(); } globals.schools = Array(); globals.buttonCounter++; ajax_get(" + year, function(res) { var schools = JSON.parse(res); for (var schoolsIndex in schools) { add_marker(schools[schoolsIndex], schoolsIndex, globals.buttonCounter); } }); } function add_marker(school, delay, buttonCounter) { setTimeout(function() { if (globals.buttonCounter == buttonCounter) { var s = new School(school.name, school.lat, school.lng); s.CreateMarker(globals.map); globals.schools.push(s); } }, delay * 5); }

Function called when the page is ready function initialize() { var mapOptions = { zoom: 4, center: new google.maps.LatLng(38, -97), panControl: false, streetViewControl: false, mapTypeId: google.maps.MapTypeId.ROADMAP }; globals.map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); globals.buttonCounter = 0; } google.maps.event.addDomListener(window, 'load', initialize);

School.prototype.CreateMarker = function(map) { // Create the marker var markerData = { position: new google.maps.LatLng(this.lat, this.lng), title: this.name, map: map }; this.marker = new google.maps.Marker(markerData); // Create a callback to a member function when clicked var thisSchool = this; google.maps.event.addListener(this.marker, "click", function() { thisSchool.ClickMarker(); }); } School.prototype.ClearMarker = function() { if (this.marker) { this.marker.setMap(null); } this.marker = null; }