MUSA611-CPLN692-spring2020 · Yichen-Lei · Apr 17, 2020 · Apr 27, 2020
diff --git a/assignment/index.html b/assignment/index.html
@@ -19,6 +19,8 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.9/leaflet.draw.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@mapbox/[email protected]/src/polyline.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@turf/turf@5/turf.min.js"></script>
     <script src="js/decode.js"></script>
     <script src="js/main.js"></script>
 

diff --git a/assignment/js/main.js b/assignment/js/main.js
@@ -92,6 +92,7 @@ var resetApplication = function() {
 
   state.markers = []
   state.line = undefined;
+  locations=[]
   $('#button-reset').hide();
 }
 
@@ -102,11 +103,35 @@ On draw
 
 Leaflet Draw runs every time a marker is added to the map. When this happens
 ---------------- */
-
+var locations=[];
 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 lat = e.layer._latlng.lat;
+   var lng = e.layer._latlng.lng;
+   marker = L.marker([lat, lng]);
+   state.markers.push(marker);
+   if(state.markers.length ===2){$('#button-reset').show();};
+   locations.push([lat,lng]);
+   var coordinates = ``
+   for(var i = 0; i< locations.length; i++){
+     if(i ===0){coordinates = `${locations[i][1]},${locations[i][0]}`;}else{
+       coordinates = coordinates + `;${locations[i][1]},${locations[i][0]}`;
+     };
+     state.markers[i].addTo(map);
+   };
+   var mapbox_token = "pk.eyJ1IjoibXl6aGFuZzk2OTYiLCJhIjoiY2s4dWxteHVqMDNkYjNlbXRjMzhtb3N4diJ9.e1rj88wCqjKaKzMZA5UvAA";
+   if( locations.length >= 2){
+     $.ajax(`https://api.mapbox.com/optimized-trips/v1/mapbox/driving/${coordinates}.json?access_token=${mapbox_token}`).done(function(e) {
+       if(typeof(route_map)!=="undefined"){map.removeLayer(route_map);};
+       line = polyline.decode(e.trips[0].geometry);
+       reverse = _.map(line, function(location) {return [location[1],location[0]];});
+       route = turf.lineString(reverse);
+       if( typeof(state.line) !== "undefined"){ map.removeLayer(state.line);};
+       state.line = L.geoJSON(route);
+       state.line.addTo(map);
+     });
+   };
 });
diff --git a/lab/lab1/index.html b/lab/lab1/index.html
@@ -10,6 +10,7 @@
   <body>
     <!-- Sidebar -->
     <div class="sidebar">
+      <p>Clicking ID to remove the new polygon</p>
       <div id="shapes"></div>
     </div>
     <!-- Map -->

diff --git a/lab/lab1/js/draw.js b/lab/lab1/js/draw.js
@@ -89,19 +89,19 @@ Moving your mouse outside of the circle should remove the highlighting.
 ===================== */
 
 // Global Variables
-var myRectangle;
+var myRectangle=[];
 
 // Initialize Leaflet Draw
 var drawControl = new L.Control.Draw({
   draw: {
     polyline: false,
     polygon: false,
-    circle: false,
+    circle: true,
     marker: false,
     circlemarker: false,
-    rectangle: true
-  }
-});
+    rectangle: true  // task 1
+  },
+}).addTo(map);
 
 map.addControl(drawControl);
 
@@ -110,4 +110,49 @@ 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
+    myRectangle = layer;
+    map.addLayer(myRectangle);
+    myRectangles.push(myRectangle);
+
+    myRectangles.push(myRectangle);
+
+    // task 2&3
+    //   if(myRectangle){
+    //     map.removeLayer(myRectangle);
+    //   }
+    //   myRectangle = layer;
+    //   map.addLayer(myRectangle);
+
+    // // task 4
+    //   var jhtml = $.parseHTML(`<div class="shape" data-leaflet-id=${id}><h1>Current ID:${id}</h1></div>`);
+    //   $('#shapes').append(jhtml);
+
+    myRectangle = layer;
+    map.addLayer(myRectangle);
+
+    // task 5
+    myRectangles.push(myRectangle);
+
+    var jhtml=$.parseHTML(`<div data-leaflet-id=${id}><h1>Current ID: ${id}</h1></div>`);
+    $('#shapes').append(jhtml);
+
+    // task 6: remove the layer by clicking the sidebar id
+    $(`div[data-leaflet-id|=${id}]`).click(function(e) {
+       var targetId = $(e.currentTarget).data('leaflet-id');
+
+       map.eachLayer(function (targetlayer) {
+         if (L.stamp(targetlayer) === targetId) {
+           map.removeLayer(targetlayer);
+           $(e.currentTarget).remove();
+         }
+       });
+     });
+
+     //task 7: Mouseover to highlighted in green
+     layer.on("mouseover", function(e) {
+       $(`div[data-leaflet-id=${e.target._leaflet_id}]`).css("background-color", "#38E2B8");
+     });
+     layer.on("mouseout", function(e) {
+       $(`div[data-leaflet-id=${e.target._leaflet_id}]`).css("background-color", "#C9FEF1");
+     });
 });
diff --git a/lab/lab2/index.html b/lab/lab2/index.html
@@ -31,6 +31,7 @@ <h2 class="h3">From <span style="color:blue">here</span> to <span style="color:r
     <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js" integrity="sha256-CNm+7c26DTTCGRQkM9vp7aP85kHFMqs9MhPEuytF+fQ=" crossorigin="anonymous"></script>
     <script src='https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.js'></script>
     <script src="https://cdn.jsdelivr.net/npm/@mapbox/[email protected]/src/polyline.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@turf/turf@5/turf.min.js"></script>
     <script src="js/setup.js"></script>
     <script src="js/main.js"></script>
   </body>

diff --git a/lab/lab2/js/main.js b/lab/lab2/js/main.js
@@ -115,7 +115,8 @@ Task 6 (stretch): Refocus the map to roughly the bounding box of your route
 
 
 ===================== */
-
+var test;
+var lat_1,lng_1,lat_2,lat_2;
 var state = {
   position: {
     marker: null,
@@ -146,6 +147,8 @@ $(document).ready(function() {
   /* This 'if' check allows us to safely ask for the user's current position */
   if ("geolocation" in navigator) {
     navigator.geolocation.getCurrentPosition(function(position) {
+      lat_1 = position.coords.latitude;
+      lng_1 = position.coords.longitude;
       updatePosition(position.coords.latitude, position.coords.longitude, position.timestamp);
     });
   } else {
@@ -168,7 +171,22 @@ $(document).ready(function() {
   $("#calculate").click(function(e) {
     var dest = $('#dest').val();
     console.log(dest);
+    var mapbox_token = "pk.eyJ1IjoibXl6aGFuZzk2OTYiLCJhIjoiY2s4dWxteHVqMDNkYjNlbXRjMzhtb3N4diJ9.e1rj88wCqjKaKzMZA5UvAA";
+    $.ajax(`https://api.mapbox.com/geocoding/v5/mapbox.places/${dest}.json?access_token=${mapbox_token}`).done(function(data) {
+
+      if(typeof(marker)!=="undefined"){map.removeLayer(marker);};
+      lat_2 = data.features[0].center[1];
+      lng_2 = data.features[0].center[0];
+      marker = L.circleMarker([lat_2, lng_2], {color: "orange"});
+      marker.addTo(map);
+      $.ajax(`https://api.mapbox.com/directions/v5/mapbox/driving/${lng_1},${lat_1};${lng_2},${lat_2}.json?access_token=${mapbox_token}`).done(function(e) {
+        if(typeof(route_map)!=="undefined"){map.removeLayer(route_map);};
+        line = polyline.decode(e.routes[0].geometry);
+        reverse = _.map(line, function(location) {return [location[1],location[0]];});
+        route = turf.lineString(reverse);
+        route_map = L.geoJSON(route);
+        route_map.addTo(map);
+      });
+      });
   });
-
 });
-