HW 10 - Hartofelis

assignment/css/main.css

@@ -23,7 +23,7 @@ body {
 }
 
 #button-reset {
-  background-color: tomato;
+  background-color: black;
   padding: 10px;
   position: absolute;
   top: 10px;
@@ -32,6 +32,7 @@ body {
   border: 0;
   border-radius: 3px;
   color: #fff;
-  font-weight: 900;
+  font-weight: 700;
   display: none;
+  opacity: 0.6;
 }

assignment/js/main.js

@@ -55,7 +55,7 @@ var state = {
   count: 0,
   markers: [],
   line: undefined,
-}
+};
 
 /** ---------------
 Map configuration
@@ -85,6 +85,7 @@ var drawControl = new L.Control.Draw({
   }
 });
 
+
 map.addControl(drawControl);
 
 /** ---------------
@@ -96,14 +97,14 @@ function. That being said, you are welcome to make changes if it helps.
 ---------------- */
 
 var resetApplication = function() {
-  _.each(state.markers, function(marker) { map.removeLayer(marker) })
-  map.removeLayer(state.line);
+  _.each(state.markers, function(marker) { map.removeLayer(marker) });
+  if (state.line) {map.removeLayer(state.line);}
 
   state.count = 0;
-  state.markers = []
+  state.markers = [];
   state.line = undefined;
   $('#button-reset').hide();
-}
+};
 
 $('#button-reset').click(resetApplication);
 
@@ -113,10 +114,51 @@ On draw
 Leaflet Draw runs every time a marker is added to the map. When this happens
 ---------------- */
 
+
+function getRoute (x) {
+
+  var coords = "";
+   _.each(state.markers, function(layer) {
+    coords += layer._latlng.lng + "," + layer._latlng.lat + ";";
+  });
+    coords = coords.substring(0 , coords.length-1);
+    console.log("Here are your route coordinates: " + coords);
+
+  var token = "pk.eyJ1Ijoic3RyZWV0ZmlnaHRzIiwiYSI6ImNqdGtlZ2QyZDM5dnozem8zMnQ0MmNxcTgifQ.4HRlIEHjijTwMlVWGkoENw";
+   $.ajax({
+     url: "https://api.mapbox.com/optimized-trips/v1/mapbox/driving/" + coords + "?access_token=" + token,
+     success: function(route) {
+       var result = decode(route.trips[0].geometry);
+       state.line = L.polyline(result, {
+         color: "black",
+         weight: 3,
+         opacity: 0.6,
+       }).addTo(map);
+     }
+   });
+}
+
 map.on('draw:created', function (e) {
   var type = e.layerType; // The type of shape
   var layer = e.layer; // The Leaflet layer for the shape
   var id = L.stamp(layer); // The unique Leaflet ID for the
 
-  console.log('Do something with the layer you just created:', layer, layer._latlng);
+  var marker = L.marker(layer._latlng);
+
+    state.count ++;
+    state.markers.push(marker);
+    console.log("A single marker: " + layer._latlng.lat, layer._latlng.lng);
+    map.addLayer(marker);
+
+  if (state.count > 0) {
+    $('#button-reset').show(); // show if any markers are on the map
+  }
+
+  if (state.count == 2) {
+    getRoute();
+  } else if (state.count > 2) {
+    if (state.line) { map.removeLayer(state.line); } // removes overlapping line when adding adddional markers
+    console.log("Dang, you're busy.");
+    getRoute();
+  }
 });

lab/lab1/js/draw.js

@@ -90,4 +90,19 @@ map.on('draw:created', function (e) {
     var type = e.layerType; // The type of shape
     var layer = e.layer; // The Leaflet layer for the shape
     var id = L.stamp(layer); // The unique Leaflet ID for the layer
+
+
+    if (type === "rectangle") {
+
+      if (myRectangle) {
+        map.removeLayer(myRectangle);
+        $('#shapes').empty();
+      }
+
+      myRectangle = layer;
+
+      map.addLayer(myRectangle);
+      $('#shapes').after("<div class='shape' data-leaflet-id='" + id + "'><h1>Current ID: " + id + "</h1></div>");
+
+    }
 });