demo_cumtd_gmaps

demo_cumtd_gmaps/project.json

+{
+	"title": "CUMTD + Google Maps",
+	"index": 20161108,
+	"type": "Demo"
+}

demo_cumtd_gmaps/py/.ipynb_checkpoints/CUMTD-checkpoint.ipynb

+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "# CUMTD API"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 1,
+   "metadata": {
+    "collapsed": true
+   },
+   "outputs": [],
+   "source": [
+    "import urllib.request\n",
+    "import urllib.parse\n",
+    "import json\n",
+    "import datetime"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Your CUMTD API Key\n",
+    "CUMTD limits the number of times any app can get information about buses by a free API key.  You will need to \"Get an API key\" (the section for this is near the bottom of the page) from here: https://developer.cumtd.com/.\n",
+    "\n",
+    "Once you've made the request, you will need to **check your e-mail** _and_ **click the link in the e-mail** to get the key.  Once you have it, add it (as a string) to `myKey`:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {
+    "collapsed": true
+   },
+   "outputs": [],
+   "source": [
+    "myKey = \"\""
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.5.2"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 0
+}

demo_cumtd_gmaps/py/CUMTD.ipynb

+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "# CUMTD API"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 1,
+   "metadata": {
+    "collapsed": true
+   },
+   "outputs": [],
+   "source": [
+    "import urllib.request\n",
+    "import urllib.parse\n",
+    "import json\n",
+    "import datetime"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Your CUMTD API Key\n",
+    "CUMTD limits the number of times any app can get information about buses by a free API key.  You will need to \"Get an API key\" (the section for this is near the bottom of the page) from here: https://developer.cumtd.com/.\n",
+    "\n",
+    "Once you've made the request, you will need to **check your e-mail** _and_ **click the link in the e-mail** to get the key.  Once you have it, add it (as a string) to `myKey`:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {
+    "collapsed": true
+   },
+   "outputs": [],
+   "source": [
+    "myKey = \"\""
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.5.2"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 0
+}

demo_cumtd_gmaps/py/compute.py

+# Import the libraries we will use in this file
+import urllib.request
+import urllib.parse
+import json
+import datetime

demo_cumtd_gmaps/res/.keep

+ 

demo_cumtd_gmaps/web/index.html

+{% extends "static/templates/projectBase.html" %}
+{% block projectContent %}
+
+<script src="web/vis.js"></script>
+<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAIxgBuB4MT9drInjsHwjWgEkMuGSgp8r8&callback=gmap_api_loaded"></script>
+
+<h2>CUMTD on Google Maps</h2>
+<div id="cumtd"></div>
+<div id="gmaps" style="width: 100%; height: 700px; border-top: solid 1px black; border-bottom: solid 1px black;"></div>
+
+
+
+{% endblock %}

demo_cumtd_gmaps/web/vis.js

+$(function() {
+  $.getJSON("res/buses.json")
+   .done(function (data) { visualize(data); })
+   .fail(function() { alert("Failed to load the JSON file!\n(Did your Python run?)"); });
+});
+
+var visualize = function(data) {
+  // boilerplate
+  var margin = { top: 0, right: 0, bottom: 0, left: 10 },
+     width = 970 - margin.left - margin.right,
+     height = (data.length * 20) - margin.top - margin.bottom;
+
+  var svg = d3.select("#cumtd")
+              .append("svg")
+              .attr("width", width + margin.left + margin.right)
+              .attr("height", height + margin.top + margin.bottom)
+              .style("width", width + margin.left + margin.right)
+              .style("height", height + margin.top + margin.bottom)
+              .append("g")
+              .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
+  // simple text output
+  svg.selectAll("routes")
+     .data(data)
+     .enter()
+     .append("text")
+     .attr("x", 0)
+     .attr("y", function (d, i) { return i * 20; })
+     .attr("fill", function (d) { return "#" + d["route_color"]; })
+     .text(function (d) { return d["route"] + ": " + d["expected"] + " minutes away"; });
+};
+
+
+
+
+var gmap_api_loaded = function() {
+  $.getJSON("res/busesAndShapes.json")
+   .done(function (data) { showGoogleMap(data); })
+   .fail(function () { alert("Failed to load JSON for Part 2."); })
+};
+
+var showGoogleMap = function(data) {
+  var mapOptions = {
+    center: { lat: 40.108564, lng: -88.227134},
+    zoom: 15
+  };
+
+  var map = new google.maps.Map(
+	   document.getElementById("gmaps"),
+     mapOptions
+  );
+
+  for (var i = 0; i < data.length; i++) {
+    var d = data[i];
+
+    console.log(d);
+
+    var d_loc = { lat: d.loc.lat, lng: d.loc.lon};
+    var title = d.route;
+    var color = d.route_color;
+
+    var d_marker = new google.maps.Marker({
+      position: d_loc,
+      map: map,
+      title: title,
+      icon: "http://www.googlemapsmarkers.com/v1/" + color + "/"
+    });
+
+    var d_path = [];
+    d["shapes"].forEach(function (p) {
+      d_path.push({
+        lat: p["shape_pt_lat"],
+        lng: p["shape_pt_lon"]
+      });
+    });
+
+    var poly = new google.maps.Polyline({
+      path: d_path,
+      geodesic: true,
+      strokeColor: "#" + color,
+      strokeOpacity: 1,
+      strokeWeight: 2
+    });
+    poly.setMap(map);
+  }
+};