ucdd2016 · yeli7289 · Jan 16, 2016 · Jan 16, 2016 · Jan 16, 2016 · Jan 20, 2016
diff --git a/build.js b/build.js
@@ -13,7 +13,8 @@ metalsmith(__dirname)
       .use(markdown({
         smartypants: true,
         gfm: true,
-        tables: true
+        tables: true,
+        langPrefix: ''
       }))
       .use(layouts({
         engine: 'handlebars',

diff --git a/build/apps/garages_map.html b/build/apps/garages_map.html
@@ -0,0 +1,195 @@
+<!DOCTYPE html>
+  <html>
+    <head>
+      <!--Import Google Icon Font-->
+      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+      <!--Import materialize.css-->
+      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
+
+      <!--Import stylesheet for Leaflet to work-->
+      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css" />
+      <link rel="stylesheet" href="/css/leaflet.label.css" />
+
+      <!--Let browser know website is optimized for mobile-->
+      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    </head>
+
+    <style>
+    html { 
+        font-family: GillSans, Calibri, Trebuchet, sans-serif;
+        background: url(images/sf2.jpg) no-repeat center center fixed; 
+        -webkit-background-size: cover;
+        -moz-background-size: cover;
+        -o-background-size: cover;
+        background-size: cover;
+    }
+    </style>
+
+    <body>
+      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
+      <script src="https://cdn.firebase.com/js/client/2.3.2/firebase.js"></script>
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.0.0/lodash.min.js"></script>
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
+      <script src="/js/leaflet.label.js"></script>
+
+      <nav class="transparent">
+        <div class="nav-wrapper">
+          <ul class="left">
+              <li><a href="/" class="black-text">Home</a></li>
+            </ul>
+          <a href="/apps/parking/index.html" class="brand-logo center black-text">
+            <img class="responsive-img" id="logo" src="images/asia.png" alt="Team Asia logo." style="max-height: 55px; position: relative; transform: translateY(10%);"/>
+          </a>
+          <ul class="right">
+            <li><a href="garages.html" class="black-text"><i class="large material-icons">list</i></a></li>
+            <li class="active"><a href="garages_map.html" class="black-text"><i class="large material-icons">location_on</i></a></li>
+          </ul>
+        </div>
+      </nav> 
+
+      <div class="container">
+        <h1> </h1>
+        <div id="map" style="height:500px"></div>
+
+      </div>
+
+      <footer class="transparent page-footer">
+        <div class="footer-copyright">
+          <div class="container black-text">
+          Caleb Hsu, Bader AlShumimiry, Yen-Teh Liu, Varshini Jagannath, Kavya Ravikumar
+          <a class="right" href="https://github.com/calebhsu/book-1">GitHub</a>
+          </div>
+        </div>
+      </footer> 
+
+      <script>
+
+// create a firebase reference to the root
+var ref = new Firebase('https://publicdata-parking.firebaseio.com');
+var data
+
+// read data from the location san_francisco/garages, only once
+ref.child('san_francisco/garages').on('value', function(snapshot){
+  data = snapshot.val()
+  console.log('data is loaded', data)
+
+  var garages = _.filter(data, function(d){
+      return _.has(d, 'open_spaces')
+  })
+  drawGarages(garages) 
+})
+//read data from our customer firebase
+var ref_people = new Firebase('https://sfparking-teamasia.firebaseio.com');
+ref_people.on('value',function(snapshot){
+  people = snapshot.val()
+  drawPeople(people)
+})
+
+
+var attributionText = 'Map data &copy; <a href="https://openstreetmap.org">OpenStreetMap</a> contributors, <a       href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>'
+
+// create the map
+var map = L.map($('#map')[0]).setView([37.78, -122.41], 13)
+L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
+    attribution: attributionText,
+    maxZoom: 18,
+    id: 'varshinij.p0gd1h1f',
+    accessToken: 'pk.eyJ1IjoidmFyc2hpbmlqIiwiYSI6ImNpanhwemV2ajE3bTZ2cW01MDBodDN3MHkifQ.dW1sUpYJi8JBiVYmT7FlFw'
+}).addTo(map)
+
+// create a layer group to hold all the markers
+var garagesLayerGroup = L.layerGroup()
+var peopleLayerGroup = L.layerGroup()
+// add the makers layer group to the map
+garagesLayerGroup.addTo(map)
+peopleLayerGroup.addTo(map)
+// visualize people on the map
+function drawPeople(people){
+  peopleLayerGroup.clearLayers()
+_.forEach(people, function(person){
+  var myPeople = L.icon({
+        iconUrl: 'images/person.png',
+        iconSize: [40, 40],
+        // iconAnchor: [22, 94],    
+    });
+    var latlng = [person.lat, person.lon]
+    var marker = L.marker(latlng,{icon: myPeople}).addTo(map);
+    marker.bindLabel(person.name)
+    peopleLayerGroup.addLayer(marker)
+
+  })
+
+}
+// visualize garages on a map
+function drawGarages(garages){
+
+  // clear all existing markers (if any)
+  garagesLayerGroup.clearLayers()
+
+  _.forEach(garages, function(garage){
+    var points = garage.points
+    var latlng = [points[0], points[1]]
+
+    var label = '<b>' + garage.friendlyName + '</b>';
+    var d = new Date();
+    var currHour = parseInt(d.getHours());
+
+    _.forEach(garage.rates, function(rate){
+      var begTime = parseInt(rate.BEG);
+      var endTime = parseInt(rate.END);
+
+      if(typeof(rate.BEG)!="undefined") {
+        var amPMBeg = rate.BEG.split(" ");
+        if(amPMBeg[1] == "AM") {
+          if(parseInt(amPMBeg[0]) == 12){
+            begTime = 0;
+          }
+        }
+        else {
+          if(parseInt(amPMBeg[0]) < 12) { 
+            begTime = parseInt(amPMBeg[0]) + 12
+          }
+        }
+      }
+
+      if(typeof(rate.END)!="undefined") {
+        var amPMEnd = rate.END.split(" ");
+        if(amPMEnd[1] == "AM") {
+          if(parseInt(amPMEnd[0]) == 12){
+            endTime = 24;
+          }
+        }
+        else {
+          if(parseInt(amPMEnd[0]) < 12) { 
+            endTime = parseInt(amPMEnd[0]) + 12
+          }
+        }
+      }
+
+      if ( (parseInt(begTime) <= parseInt(currHour)) && ( parseInt(currHour) < parseInt(endTime)) ) {
+        label += '<br><b>Opens</b>: ' + rate.BEG + '<br><b>Closes</b>: ' + rate.END + '<br>' + '<i>Rate: $' + rate.RATE + ' '  + rate.RQ.toLowerCase() + '</i>'
+      }
+    })
+
+    var myIcon = L.icon({
+        iconUrl: 'images/marker.png',
+
+        iconSize: [40, 40],
+        iconAnchor: [22, 94],
+        popupAnchor: [-3, -76],
+
+    });
+
+    var marker = L.marker(latlng,{icon: myIcon}).addTo(map);
+    marker.bindPopup(label); 
+
+    garagesLayerGroup.addLayer(marker)
+
+  })
+
+}
+
+      </script>
+    </body>
+  </html>