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

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

3. Textbook buyback company Founded in 2004 at Cornell University

4. 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)

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

7. 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”, 47.3984, -122.258} {1, “505 W State St”, “ups”, 46.9702, -123.821} {2, “University of Washington”, “school”, 47.6542, -122.308} … {0, “Eric’s first route”, 0, 1/1/2014, 1} {1, “Eric’s second route”, 0, 2/1/2014, 0} … {0, “Eric Brumer”, “123-1234”} {1, “Bert McClendon”, “567-5678”} …

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

9. Google Maps Javascript API https://developers.google.com/maps/documentation/ https://developers.google.com/maps/documentation/javascript/tutorial 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

10. get_data.php webpage containing raw data $year = $_GET["year"]; $data2005 = array( array(name => "New York University", lat => 40.7294, lng => -73.9959), array(name => "LeMoyne College", lat => 43.0497, lng => -76.0855),... array(name => "American University", lat => 38.9368, lng => -77.0902), array(name => "George Washington University", lat => 38.8992, lng => -77.0471) ); $data2013 = array( array(name => "Hampshire College", lat => 42.3240, lng => -72.5294), array(name => "University of Massachusetts", lat => 42.3923, lng => -72.5249),... array(name => "Walla Walla University", lat => 46.0468, lng => -118.391), array(name => "Whitman College", lat => 46.0716, lng => -118.33) ); if ($year == "2005") { $ret = $data2005; } else if ($year == "2013") { $ret = $data2013; } else { $ret = array(); } echo json_encode($ret);

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

12. 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 };

13. 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("http://belltowerbooks.com/uw/get_data.php?year=" + 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); }

14. 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);

15. 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; }