From 28e30812467cd3c9afffd8d316db3753061a6acb Mon Sep 17 00:00:00 2001 From: Yichen-Lei <54689123+Yichen-Lei@users.noreply.github.com> Date: Fri, 17 Apr 2020 14:03:11 -0400 Subject: [PATCH 1/2] Lab1 lab1 --- lab/lab1/index.html | 1 + lab/lab1/js/draw.js | 55 ++++++++++++++++++++++++++++++++++++++++----- 2 files changed, 51 insertions(+), 5 deletions(-) diff --git a/lab/lab1/index.html b/lab/lab1/index.html index d5f3c86..c7d434f 100644 --- a/lab/lab1/index.html +++ b/lab/lab1/index.html @@ -10,6 +10,7 @@
+

Clicking ID to remove the new polygon

diff --git a/lab/lab1/js/draw.js b/lab/lab1/js/draw.js index 178c3e3..5316d8a 100644 --- 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(`

Current ID:${id}

`); + // $('#shapes').append(jhtml); + + myRectangle = layer; + map.addLayer(myRectangle); + + // task 5 + myRectangles.push(myRectangle); + + var jhtml=$.parseHTML(`

Current ID: ${id}

`); + $('#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"); + }); }); From 167b8b015726141ff3632c2c76233cb24e87ffbf Mon Sep 17 00:00:00 2001 From: Yichen-Lei <54689123+Yichen-Lei@users.noreply.github.com> Date: Mon, 27 Apr 2020 03:18:40 -0400 Subject: [PATCH 2/2] lab2 and as lab2 and as --- assignment/index.html | 2 ++ assignment/js/main.js | 29 +++++++++++++++++++++++++++-- lab/lab2/index.html | 1 + lab/lab2/js/main.js | 24 +++++++++++++++++++++--- 4 files changed, 51 insertions(+), 5 deletions(-) diff --git a/assignment/index.html b/assignment/index.html index aae97d1..f62d111 100644 --- a/assignment/index.html +++ b/assignment/index.html @@ -19,6 +19,8 @@ + + diff --git a/assignment/js/main.js b/assignment/js/main.js index 7bc1f6e..fdfb4a6 100644 --- 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/lab2/index.html b/lab/lab2/index.html index fe07142..2099179 100644 --- a/lab/lab2/index.html +++ b/lab/lab2/index.html @@ -31,6 +31,7 @@

From here to + diff --git a/lab/lab2/js/main.js b/lab/lab2/js/main.js index 3239b74..6f57911 100644 --- 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); + }); + }); }); - }); -