lab1

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://unpkg.com/@turf/turf/turf.min.js'></script>
     <script src="js/decode.js"></script>
     <script src="js/main.js"></script>
 

assignment/js/main.js

@@ -102,11 +102,44 @@ On draw
 
 Leaflet Draw runs every time a marker is added to the map. When this happens
 ---------------- */
+var coor
+var token='pk.eyJ1IjoibGl6aXF1biIsImEiOiJjazhnZG1kOGkwMGlwM2VwbmVqNXd5eGhjIn0.Pd66q4rj8ncYTNtcFGxUGQ'
+
 
 map.on('draw:created', function (e) {
+  //add the marker
   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
+  $('#button-reset').show();
+  map.addLayer(layer);
+  state.markers.push(layer);
+  //add the route
+  var lat = layer._latlng.lat;
+  var long=layer._latlng.lng;
+  if (state.markers.length ==1){
+    coor=`${long},${lat}`
+  } else{
+    coor = coor +`;${long},${lat}`;
+    var dirRequest =`https://api.mapbox.com/directions/v5/mapbox/walking/${coor}.json?access_token=${token}`
+    $.ajax(dirRequest).done(function(directions){
+       var route = turf.lineString(polyline.decode(directions.routes[0].geometry));
+       var lines = polyline.decode(directions.routes[0].geometry);
+       lines=_.map(lines,function(coordinates){return [coordinates[1],coordinates[0]];});
+       var myStyle = {
+         "color": "#ff7800",
+         "weight": 5,
+         "opacity": 0.65
+       };
+       if (state.line != undefined){
+         map.removeLayer(state.line);
+       }
+       var finalroute=L.geoJSON(turf.lineString(lines),{
+         style:myStyle
+       });
+       state.line=finalroute;
+       finalroute.addTo(map);
+  });
+}
 
-  console.log('Do something with the layer you just created:', layer, layer._latlng);
 });

lab/lab1/js/draw.js

@@ -90,6 +90,7 @@ 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({
@@ -99,6 +100,7 @@ var drawControl = new L.Control.Draw({
     circle: false,
     marker: false,
     circlemarker: false,
+    //task 1
     rectangle: true
   }
 });
@@ -110,4 +112,38 @@ 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
+
+// task 2 & 3 & 4
+/*  if(myRectangle){
+      map.removeLayer(myRectangle);
+      $('#shapes').empty()
+    }
+    myRectangle=layer;
+    map.addLayer(myRectangle);
+    var jhtml=$.parseHTML(`<div data-leaflet-id=${id}><h1>Current ID: ${id}</h1></div>`);
+    $('#shapes').append(jhtml) */
+
+// task 5
+    myRectangle=layer;
+    map.addLayer(myRectangle);
+    myRectangles.push(myRectangle);
+    console.log(myRectangles)
+    var jhtml=$.parseHTML(`<div data-leaflet-id=${id}><h1>Current ID: ${id}</h1></div>`);
+    $('#shapes').append(jhtml)
+
+//task 6
+    $(`div[data-leaflet-id|=${id}]`).click(function(e) {
+       var newId = $(e.currentTarget).data('leaflet-id');
+       map.eachLayer(function (newlayer) {
+         if (L.stamp(newlayer) === newId) {
+           map.removeLayer(newlayer);
+           $(e.currentTarget).remove()}
+       });
+     });
+
+//task 7
+    layer.on("mouseover", function(e) {
+        $(`div[data-leaflet-id=${e.target._leaflet_id}]`).css("background-color", "yellow");
+    });
+
 });

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://unpkg.com/@turf/turf/turf.min.js'></script>
     <script src="js/setup.js"></script>
     <script src="js/main.js"></script>
   </body>

lab/lab2/js/main.js

@@ -116,10 +116,15 @@ Task 6 (stretch): Refocus the map to roughly the bounding box of your route
 
 ===================== */
 
+var token='pk.eyJ1IjoibGl6aXF1biIsImEiOiJjazhnZG1kOGkwMGlwM2VwbmVqNXd5eGhjIn0.Pd66q4rj8ncYTNtcFGxUGQ'
+var origin;
+var destination;
+
 var state = {
   position: {
     marker: null,
-    updated: null
+    updated: null,
+    line: null
   }
 };
 
@@ -146,6 +151,7 @@ $(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) {
+      origin=[position.coords.latitude,position.coords.longitude];
       updatePosition(position.coords.latitude, position.coords.longitude, position.timestamp);
     });
   } else {
@@ -165,10 +171,44 @@ $(document).ready(function() {
   });
 
   // click handler for the "calculate" button (probably you want to do something with this)
+  // add the time and value
+  var jhtml=$.parseHTML(`<h3 class="Distance"></h3><h3 class="Time"></h3>`)
+  $(".sidebar").append(jhtml);
+  //generate the route
   $("#calculate").click(function(e) {
-    var dest = $('#dest').val();
-    console.log(dest);
+    //plot the destination point
+    var destination_value = $('#dest').val();
+    console.log(destination_value);
+    var request = `https://api.mapbox.com/geocoding/v5/mapbox.places/${destination_value}.json?access_token=${token}`;
+    $.ajax({method:'GET',url:request}).done(function(data){
+      destination = data;
+      var destination_coor=destination.features[0].geometry.coordinates;
+      L.circleMarker([destination_coor[1],destination_coor[0]],{color:"red"}).addTo(map);
+    //plot the route
+      var dirRequest = `https://api.mapbox.com/directions/v5/mapbox/walking/${origin[1]},${origin[0]};${destination_coor[0]},${destination_coor[1]}.json?access_token=${token}`;
+      $.ajax(dirRequest).done(function(directions){
+         var route = turf.lineString(polyline.decode(directions.routes[0].geometry));
+         var lines = polyline.decode(directions.routes[0].geometry);
+         lines=_.map(lines,function(coordinates){return [coordinates[1],coordinates[0]];});
+         var myStyle = {
+           "color":'#ff7800',
+           "weight":5,
+           "opacity":0.65
+         };
+         L.geoJSON(turf.lineString(lines),{
+           style:myStyle
+         }).addTo(map);
+      //set the viewport
+        var bbox= turf.bbox(turf.lineString(lines));
+        map.fitBounds([
+          [bbox[1],bbox[0]],
+          [bbox[3],bbox[2]]
+        ])
+      //plot the distance and Duration
+         $(".Distance").text(`Distance:${directions.routes[0].distance} meters`)
+         $(".Time").text(`Duration:${directions.routes[0].duration} seconds`)
+       });
+    });
   });
 
 });
-