Week_08 Miaoyan_Zhang

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>
 

assignment/js/main.js

@@ -92,6 +92,7 @@ var resetApplication = function() {
 
   state.markers = []
   state.line = undefined;
+  locations=[]
   $('#button-reset').hide();
 }
 
@@ -102,11 +103,34 @@ 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);
+    });
+  };
 });

lab/lab1/js/draw.js

@@ -90,24 +90,74 @@ Moving your mouse outside of the circle should remove the highlighting.
 
 // Global Variables
 var myRectangle;
-
+var myRectangles = [];
 // Initialize Leaflet Draw
 var drawControl = new L.Control.Draw({
   draw: {
     polyline: false,
     polygon: false,
-    circle: false,
-    marker: false,
+    circle: true,
+    marker: true,
     circlemarker: false,
     rectangle: true
   }
 });
 
 map.addControl(drawControl);
 
-// Event which is run every time Leaflet draw creates a new layer
-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
+map.on(L.Draw.Event.CREATED, function (e) {
+
+  var type = e.layerType;
+  var layer = e.layer;
+  var id = L.stamp(layer);
+  console.log(layer, type,id)
+  // if(myRectangle){ map.removeLayer(myRectangle)}
+  myRectangle = layer
+  map.addLayer(myRectangle)
+
+  //Task 5
+  myRectangles.push(myRectangle);
+
+
+
+  //Task 4
+  var jhtml = $.parseHTML(`<div class = "shape" data-leaflet-id=${id}><h1>Current ID: ${id}</h1></div>`)
+  $('#shapes').append(jhtml)
+
+  //Task 6
+  $(`div[data-leaflet-id|=${id}]`).click(function(e) {
+
+      var remove_id = $(e.currentTarget).data('leaflet-id');
+      map.eachLayer(function (ecly) {
+        if (L.stamp(ecly) === remove_id) {
+          map.removeLayer(ecly);
+          $(e.currentTarget).remove();
+          for (var i = 0; i < myRectangles.length; i++) {
+            if(myRectangles[i]._leaflet_id === remove_id){
+              myRectangles.splice(i, 1);
+            };
+          };
+        };
+      });
+  });
+  //Click rectangle/circle can also delete it
+  layer.on("click", function(e){
+    $(`div[data-leaflet-id |= ${e.target._leaflet_id}]`).remove();
+    map.removeLayer(e.sourceTarget);
+    for (var i = 0; i < myRectangles.length; i++) {
+      if(myRectangles[i]._leaflet_id === e.target._leaflet_id){
+        myRectangles.splice(i, 1);
+      };
+    };
+  })
+
+  //Task 7
+  layer.on("mouseout", function(e) {
+    $(`div[data-leaflet-id=${e.target._leaflet_id}]`).css("background-color", "#ffffff");
+  });
+  layer.on("mouseover", function(e) {
+    $(`div[data-leaflet-id=${e.target._leaflet_id}]`).css("background-color", "#D3FF91");
+  });
+
+
 });

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>

lab/lab2/js/main.js

@@ -115,7 +115,7 @@ Task 6 (stretch): Refocus the map to roughly the bounding box of your route
 
 
 ===================== */
-
+var test;
 var state = {
   position: {
     marker: null,
@@ -142,10 +142,14 @@ var updatePosition = function(lat, lng, updated) {
   goToOrigin(lat, lng);
 };
 
+var lat_1,lng_1,lat_2,lat_2;
+
 $(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 +172,23 @@ $(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);
+      });
 
+    });
+  });
 });
-