diff --git a/assignment/js/main.js b/assignment/js/main.js
index 08ee891..2b29090 100644
--- a/assignment/js/main.js
+++ b/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();
+ }
});
diff --git a/lab/lab1/js/draw.js b/lab/lab1/js/draw.js
index 9fb7ccc..1a3a677 100644
--- a/lab/lab1/js/draw.js
+++ b/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:
-
Current ID: [the id]
-
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( "Current ID: "+ id +"
" );
+ }
});
diff --git a/lab/lab2/js/main.js b/lab/lab2/js/main.js
index d4f7867..25306cc 100644
--- a/lab/lab2/js/main.js
+++ b/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() {
});
});
-
-