HW10 - Mayu Tanaka

assignment/js/main.js

@@ -55,7 +55,7 @@ var state = {
   count: 0,
   markers: [],
   line: undefined,
-}
+};
 
 /** ---------------
 Map configuration
@@ -96,14 +96,13 @@ function. That being said, you are welcome to make changes if it helps.
 ---------------- */
 
 var resetApplication = function() {
-  _.each(state.markers, function(marker) { map.removeLayer(marker) })
+  state.markers.forEach(function(marker) { map.removeLayer(marker); });
   map.removeLayer(state.line);
-
   state.count = 0;
-  state.markers = []
+  state.markers = [];
   state.line = undefined;
   $('#button-reset').hide();
-}
+};
 
 $('#button-reset').click(resetApplication);
 
@@ -112,11 +111,40 @@ On draw
 
 Leaflet Draw runs every time a marker is added to the map. When this happens
 ---------------- */
+function urlCoords() {
+  var coords = "";
+  state.markers.forEach(function(m) {
+    coords+=m._latlng.lng+","+m._latlng.lat+";";
+  });
+  return coords.substring(0,coords.length-1);
+}
+
+function mapRoute() {
+  var access = "pk.eyJ1IjoibWF5dXRhbmFrYSIsImEiOiJjajhieGJ4N3gwMzgzMzNtb2tmMDFiMHJlIn0.qCJLeV-KUvxpAO38a9dPtA";
+  $.ajax({
+    url: "https://api.mapbox.com/optimized-trips/v1/mapbox/driving/"+urlCoords()+"?access_token="+access,
+    success: function(result){
+      var latlngs = decode(result.trips[0].geometry);
+      state.line = L.polyline(latlngs, {color: 'red'}).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+=1;
+  state.markers.push(marker);
+  map.addLayer(marker);
+
+  if (state.count==2) {
+    mapRoute();
+    $('#button-reset').show();
+  } else if (state.count>2) {
+    if (state.line) { map.removeLayer(state.line); }
+    mapRoute();
+  }
 });

lab/lab1/js/draw.js

@@ -2,71 +2,56 @@
 Lab 1: Leaflet Draw
 
 Task 1: Try to draw something on the map
-
 Try to use one or two of the drawing tools. They should allow you to draw
 without needing any additional configuration. These shapes will not be added to
 the map. We'll fix that in the next task.
 
 Task 2: Add rectangles to map
-
 Add the rectangle layers to the map when they are drawn. Hint: you can use the
 addLayer function that we have used in the past.
 
 Task 3: Limit to one rectangle
-
 For our application, we only want one rectangle to be displayed on the map at
 any given time. When a user draws a new rectangle, the old rectangle should be
 removed from the map. To remove a previously drawn rectangle, we will need to
 store some information about it in a global variable. Use the variable
 myRectangle, which is already defined in this document, to store the new Leaflet
 layer before adding it to the map.
-
 You will also need to remove the previous layer from the map.
-
 If you get the error: "Cannot read property '_leaflet_id' of undefined", it
 may be because you are trying to remove a layer that does not yet exist. Can you
 check to see if myRectangle is defined before trying to remove it?
 
 Task 4: Add shape to sidebar
-
 Let's add the shape we've created to the sidebar. In the HTML, there is a
 container with ID #shapes. Use jQuery's append function to add a new div inside
 the #shapes container. The idea should look like the following:
-
 <div class="shape" data-leaflet-id="[the id]"><h1>Current ID: [the id]</h1></div>
-
 Where [the id] is replaced by the Leaflet ID of the layer.
-
 When a new layer is added, you can use jQuery's empty function to clear out the
 #shapes container before appending a new .shape.
 
 Task 5 (Stretch Goal): Store multiple shapes
-
 Instead of showing one shape at a time, let's allow multiple shapes to be drawn.
 Instead of storing one Leaflet layer in the myRectangle variable, we should use
 an array to store multiple layers. There will also be multiple shapes displayed
 in the sidebar.
-
 Change the variable myRectangle to myRectangles and set it to equal an empty
 array. Change the rest of your code to push new layers into the array.
 
 Task 6 (Stretch Goal): Connect sidebar and map
-
 The HTML in the sidebar and the Leaflet layers on the map and in our Javascript
 variable can be linked by using the Leaflet ID. Modify the application so that
 clicking on a shape in the sidebar will do one of the following:
-
-- Change the color of the corresponding shape on the map
-- Delete the corresponding shape on the map (be sure to remove it from the
-sidebar and the myRectanges array)
-- Anything else you can think of!
+  - Change the color of the corresponding shape on the map
+  - Delete the corresponding shape on the map (be sure to remove it from the
+  sidebar and the myRectanges array)
+  - Anything else you can think of!
 
 Task 7 (Stretch Goal): Reverse Task 6
-
 Modify the application so moving your mouse over a rectangle on the map will
 highlight (change style in some way) the corresponding element in the sidebar.
 Moving your mouse outside of the circle should remove the highlighting.
-
 ===================== */
 
 // Global Variables
@@ -90,4 +75,14 @@ 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').append( "<div class='shape' data-leaflet-id='"+ id +"'><h1>Current ID: "+ id +"</h1></div>" );
+    }
 });

lab/lab2/js/main.js

@@ -51,6 +51,8 @@ The docs: https://www.mapbox.com/api-documentation/#geocoding
 (For this first task, the URL pattern you'll want to produce looks like this:
 `https://api.mapbox.com/geocoding/v5/mapbox.places/{geocode_this}.json?access_token={your_mapbox_token}`)
 
+access_token={pk.eyJ1IjoibWF5dXRhbmFrYSIsImEiOiJjajhieGJ4N3gwMzgzMzNtb2tmMDFiMHJlIn0.qCJLeV-KUvxpAO38a9dPtA}
+
 You might note that this task is slightly underspecified: there are multiple different
 ways to transform text into an address. For the lab, the simplest form of geocoding
 (i.e. without any further options being specified) is entirely appropriate. More complex
@@ -126,7 +128,7 @@ var state = {
 };
 
 /* We'll use underscore's `once` function to make sure this only happens
- *  one time even if weupdate the position later
+ *  one time even if we update the position later
  */
 var goToOrigin = _.once(function(lat, lng) {
   map.flyTo([lat, lng], 14);
@@ -173,5 +175,3 @@ $(document).ready(function() {
   });
 
 });
-
-