From 3e7185d5f098ee26431fb6980d72f10057d50eab Mon Sep 17 00:00:00 2001 From: Leanne Chan <54755036+LeanneChan@users.noreply.github.com> Date: Sat, 11 Apr 2020 05:16:51 +0800 Subject: [PATCH 1/3] Lab 1 complete --- .DS_Store | Bin 0 -> 6148 bytes README.md | 44 ++++++++++++++++++++++++++++++++ lab/.DS_Store | Bin 0 -> 6148 bytes lab/lab1/.DS_Store | Bin 0 -> 6148 bytes lab/lab1/js/draw.js | 58 +++++++++++++++++++++++++++++++++++++++---- lab/lab1/js/setup.js | 1 - lab/lab2/js/main.js | 9 +++++++ 7 files changed, 106 insertions(+), 6 deletions(-) create mode 100644 .DS_Store create mode 100644 lab/.DS_Store create mode 100644 lab/lab1/.DS_Store diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..eed315b9c1eefa07ba29701eecbe779b53558662 GIT binary patch literal 6148 zcmeHK!EVz)5S>jzYl9FuAhpN6AaRIL+EQ|;kW5GqJs=^B-~gz#vDI2~yix3smJs9% z9|3>Br|<=Q4!qf2swOF?N(fau(d?U@eX}b+$6hZHiT)(nB5D(n2WM>fXf81xXJ4^~ z&8z{1p5vGb8d8e3T4B4y|EK`pyPFhIiC;z+?%zSK-p9F$G0uOEJ^1}!+7J<~<1U|~ zZb&1_DP3ZJUt%}Gi6~xViH*xy@w6P-m4C#eJS(ei_orwyTQ}C$J>U2I+y1-oL`}mg zswQPW8o%M*^QbzBZTwQH{5+20S6MneY~OvViYm&AbgYZBBn9Q|>#RuBw67*bQtEj^ zGoTkbY;VqH+q=6Rx!v2DcjTvrVBok#Pz?`_=MdVFv+Jo`BNH2?gSHNjJW$3WX1 zi+|u70xQCYa9rf7I7WuqKE0rQdO`zw27CZPlO>tHfOS!Nbe%Z`oB~dPt0`b#R^F|v zP2;Ma0#1Qzr~tnoB%Cp@SR2%@4mA1*0Bj+x4KaT%a*ebYSgZ|V1SU)=(3A>$#1N(& zd1-lp#oC}LCt(jC!mcdr2}S7DF~8Jw5`jV2It82piwZPNx6S+i{@>64i$$*I6mSY$ zD+NSr5DxmdB)hk+TpaJU5`F|{V_t3Wyaa*XioxZrcoVJ-dC37Vuvi;J2If8lv<$9s J3j9+Aegn3lfFA$= literal 0 HcmV?d00001 diff --git a/README.md b/README.md index cea37d4..13aa934 100644 --- a/README.md +++ b/README.md @@ -38,3 +38,47 @@ - Complete [Labs](lab) - Complete [Assignment](assignment) +### Notes +- slider (https://codepen.io/lknarf/pen/KWzRed) +- simple statistics (https://simplestatistics.org/) +- Mapbox -gl (graphics) - js (https://docs.mapbox.com/mapbox-gl-js/examples/):: necessity if have more than 1000 points +- chroma.js (nice color scales) +- charting libraries (chartist.js, charts) +- turf.js(create geometries) + - lineArc:specify the coord of the center of the circle, draws arc + - use L.geoJSON(turf geojson feature) to add to map +- json minify (online tool to compress any json code you copy, removing breaks) +- add polygons/lines created from turf to maps by using LEAFLET +- stringify the result, copy and paste it. +- feature collection is not a polygon... so sometimes input wants a polygon and not a feature collectoin. Need to extract out the corresponding polygon. +- templates: way of updating strings with a variable. ${variable} +$.parseHTML(`

Current ID: ${id}

+`) //use backticks so tht $.parseHTml can change the id +- $(#shapes).append +- jQuery, lookup by attribute s +- layer.on("mouseover", function(e){ +e.target._leaflet_id. +// e is the event happeningwhen mouseover +}) +- $('#shapes').append($.parseHTML(`

Current ID: ${id}

`)) + +## Notes - 11 April +MAPBOX +- GEOCODE + + +- polyline.decode('string returned from API') +- If the mapbox API returns a list of points, can use turf.js to turn it into a line +revcoords = _.map(coords, function(coord){return coord[1], coord[0]}) // to flip the coords +- JSON.stringify(truf.lineString(revcoords)) +- L.geoJSON(turf.lineString(revcoords)).addTo(map) + +lab2 +- allow +- get lat lng from the origina name +- decode the polyline that comes back --> polyline.decode + + + + + diff --git a/lab/.DS_Store b/lab/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..70ccfce7c4eab29bccc358292bc77c92f6bc2101 GIT binary patch literal 6148 zcmeHK!AiqG5Z$d&6GiMn&|@xwhaTG0+Jgw8>cN{3(SwR6w%9<-N}F1=R`MJA2Y!lQ z;OFR@-L+uVqoT3{vu}20XOn$lcQcGJ-sm+ej1?JUHk8nsLGy`Fob-bfv}X#)X^x#l zoJEO<(5DHF7zPXjzncNtyB14W$Rbu5+rR6Gt-MH)ix`cI`rS*t&!3{pB<^PA@-r_? zSd&xJw&U2&oO2wsML)>Gtk-RXokQyFhFLq(_MQ;Q$PT0ZxYa)?E^LZ43*)rak;!qh zg&{`=aoQC9hUlfuuAC=O0r{Yl;?iK?)oLZzt5=65cTlgFOYUlQZ8&u7#pTMz&gsSV z&ER%;cdxz!$3Z1!UgH})z!)v?D(Iw%NYCM;@o#=_jG#xvJ|oEc?*w^c1c3)5e~tmY z73|qR_vYq>4FiUO?`D9`2Nz1{Ys?kOqXUgB0e}|VQeewpf1pbapsz7k2oHp-RG>=b zy2RkRa^NZ*abJ(m6{>W`<&!awelph;3fF}Pcja)#eTAkq3>XI9GccjLMY{jDv4_8? z|KBH>o?*Z+@UIx))>g39z>@Uc`eAW&*SgSCC<%?r70MJe`Z|^dUBydKDTujb0DX& literal 0 HcmV?d00001 diff --git a/lab/lab1/.DS_Store b/lab/lab1/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..8ed1d658db654e91ff7ce01ec0cef3c57a4e09c0 GIT binary patch literal 6148 zcmeHK%}(1u5T4CXv8hmVKnh1+DshNVNT4|&BrAmjw@R+c0T9@6)VMNU6gy362=Z&d z8}KN70v?CX&Tf$M!<9eHNVDJU?98tA^J>=v0HQqzHvuXDV4*53*w`!(HLi3{3dU1L z6lxCH31S&wPff@278p?9t_U4SAw7tvzTXaxtUr*@MwTIh1VZS-AJ~8%WN;4gOwQd* zP62++&MT^mVuE3MVb0FK;3AIFtX{ttg<`4vVac*>%U-chyq+9-nV${Pw%EWj z3yl3;%J|XtgC9|Mcv@NgDwE8Ql5U@pqp*u1$A?i8%3)g$k}#!tJUu`QomSRHqsI1j z&1tln(E9*wlUOD{ zu|J8O#4s`g%m6d+A`F

Current ID: ${id}

`)); + + // add functionality for clicking side bar, part 6 + $('.shape').click(function () { + var clicked_id = $(this).attr('data-leaflet-id'); + //alert('clicked'); + console.log(clicked_id); + // remove old shapes + _.each(myShapes, function(x){map.removeLayer(x)}); + // filter out to new shapes + myShapes = _.filter(myShapes, function(x){return x._leaflet_id != clicked_id}) + // plot new shapes + _.each(myShapes, function(x){map.addLayer(x);}); + + }); + + /* alternative to part 6. Simply adding a click functionality to this div + $(`div[data-leaflet-id |=${id}]`).click(function(){ + })*/ + + // part 7: + e.layer.on("mouseover", function(e){ + var hovered = e.target._leaflet_id; + // div selector + $(`div[data-leaflet-id |=${hovered}]`).css("background-color", "yellow"); + // |= is a pipe... it is a selector. + }); + // have to do a mouseout as well, so that it doesnt stay highlighted + e.layer.on("mouseout", function(e){ + var hovered = e.target._leaflet_id; + // div selector + $(`div[data-leaflet-id |=${hovered}]`).css("background-color", "white"); + // |= is a pipe... it is a selector. + }); + + + }); + + diff --git a/lab/lab1/js/setup.js b/lab/lab1/js/setup.js index ce4afb6..419ade9 100644 --- a/lab/lab1/js/setup.js +++ b/lab/lab1/js/setup.js @@ -10,4 +10,3 @@ var Stamen_TonerLite = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{ maxZoom: 20, ext: 'png' }).addTo(map); - diff --git a/lab/lab2/js/main.js b/lab/lab2/js/main.js index 3239b74..524d233 100644 --- a/lab/lab2/js/main.js +++ b/lab/lab2/js/main.js @@ -44,6 +44,7 @@ which allow us to rapidly prototype API requests. I suggest Postman, which is available for free in the chrome app store. It provides a cleaner, easier way to test ajax calls than simply using the console. +use postman to communicate with servers?? request made to API Task 1: Use Mapbox's 'Search' API to 'geocode' information from your input @@ -67,6 +68,7 @@ Questions you should ask yourself: - What can I do with the output? - Can I get a lat/lng from the output? + TrY to use the something in Jquery?? Task 2: Use Mapbox's 'Navigation' API to generate a route based on your origin and destination @@ -77,6 +79,13 @@ Again, the task is somewhat underspecified. Let's start with the simplest routin option available. Once you're getting a valid (as best you can tell) response from the server, move to the next task. +record,record,record +in form lng,lat +go up to postman, replace {coords} with the 'record, record, record' + +playgroun shows you what is possible, but postman shows how you can use the API + + Task 3: Decode your route response From 19f46b0c45bc68d733752a861248ed795195a4e5 Mon Sep 17 00:00:00 2001 From: Leanne Chan <54755036+LeanneChan@users.noreply.github.com> Date: Fri, 17 Apr 2020 16:19:00 +0800 Subject: [PATCH 2/3] Update main.js --- lab/lab2/js/main.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/lab/lab2/js/main.js b/lab/lab2/js/main.js index 524d233..898ce36 100644 --- a/lab/lab2/js/main.js +++ b/lab/lab2/js/main.js @@ -85,7 +85,13 @@ go up to postman, replace {coords} with the 'record, record, record' playgroun shows you what is possible, but postman shows how you can use the API - +*/ // code to get the coords of the input location +var geocode_this = 'London School of Economics'; +var your_mapbox_token='pk.eyJ1IjoibGVhbm5lY2hhbiIsImEiOiJjazh1bGt2eWowY2k0M2ZtaDY3c2RiZnhyIn0.O9fZnzCKgPFTRAuDyWhRew'; +var html = `https://api.mapbox.com/geocoding/v5/mapbox.places/${geocode_this}.json?access_token=${your_mapbox_token}`; +var output = $.ajax(html); +var coords_first = output.responseJSON["features"][0].center ; +/* Task 3: Decode your route response From 9d49840ffbd43201c91258f8f7cf86094fa17ad0 Mon Sep 17 00:00:00 2001 From: Leanne Chan <54755036+LeanneChan@users.noreply.github.com> Date: Sun, 19 Apr 2020 01:31:13 +0800 Subject: [PATCH 3/3] Lab 2 Stretch Goals Complete --- .DS_Store | Bin 6148 -> 6148 bytes lab/.DS_Store | Bin 6148 -> 6148 bytes lab/lab2/index.html | 5 ++- lab/lab2/js/main.js | 79 ++++++++++++++++++++++++++++++++++++-------- 4 files changed, 69 insertions(+), 15 deletions(-) diff --git a/.DS_Store b/.DS_Store index eed315b9c1eefa07ba29701eecbe779b53558662..5e2f1015d3ece2da67b57e55eeb49c8e827240b8 100644 GIT binary patch delta 32 ncmZoMXffEJ$1H4Uq@!SIRI8&
-

Generating Routes

+

Generating Routes (Driving)

From here to there

+

+

@@ -31,6 +33,7 @@

From here to + diff --git a/lab/lab2/js/main.js b/lab/lab2/js/main.js index 898ce36..c291d49 100644 --- a/lab/lab2/js/main.js +++ b/lab/lab2/js/main.js @@ -70,6 +70,11 @@ Questions you should ask yourself: TrY to use the something in Jquery?? + input will be a user specified destination + need to save that as a variable + input the variblae into the link + + Task 2: Use Mapbox's 'Navigation' API to generate a route based on your origin and destination The docs: https://docs.mapbox.com/api/navigation/#directions @@ -83,15 +88,7 @@ record,record,record in form lng,lat go up to postman, replace {coords} with the 'record, record, record' -playgroun shows you what is possible, but postman shows how you can use the API - -*/ // code to get the coords of the input location -var geocode_this = 'London School of Economics'; -var your_mapbox_token='pk.eyJ1IjoibGVhbm5lY2hhbiIsImEiOiJjazh1bGt2eWowY2k0M2ZtaDY3c2RiZnhyIn0.O9fZnzCKgPFTRAuDyWhRew'; -var html = `https://api.mapbox.com/geocoding/v5/mapbox.places/${geocode_this}.json?access_token=${your_mapbox_token}`; -var output = $.ajax(html); -var coords_first = output.responseJSON["features"][0].center ; -/* +playground shows you what is possible, but postman shows how you can use the API Task 3: Decode your route response @@ -145,6 +142,25 @@ var goToOrigin = _.once(function(lat, lng) { map.flyTo([lat, lng], 14); }); +// global variables for coords +var origin; +var destination; +var end_marker; +var route_feature; +var the_route; +var your_mapbox_token='pk.eyJ1IjoibGVhbm5lY2hhbiIsImEiOiJjazh1bGt2eWowY2k0M2ZtaDY3c2RiZnhyIn0.O9fZnzCKgPFTRAuDyWhRew'; + +// create functions +var geolocate = function(location){ + var req= $.ajax(`https://api.mapbox.com/geocoding/v5/mapbox.places/${location}.json?access_token=${your_mapbox_token}`); + return req; +} + +var getRoute = function(start, end){ + var req= $.ajax(`https://api.mapbox.com/directions/v5/mapbox/driving/${start[0]},${start[1]};${end[0]},${end[1]}?access_token=${your_mapbox_token}&geometries=geojson`); + return req +} + /* Given a lat and a long, we should create a marker, store it * somewhere, and add it to the map @@ -161,13 +177,12 @@ $(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.longitude, position.coords.latitude]; updatePosition(position.coords.latitude, position.coords.longitude, position.timestamp); }); } else { alert("Unable to access geolocation API!"); } - - /* Every time a key is lifted while typing in the #dest input, disable * the #calculate button if no text is in the input */ @@ -178,12 +193,48 @@ $(document).ready(function() { $('#calculate').attr('disabled', false); } }); - // click handler for the "calculate" button (probably you want to do something with this) + // NEED TO EXCECUTE IN THE DONE FUNCTION!!! $("#calculate").click(function(e) { var dest = $('#dest').val(); - console.log(dest); + if (end_marker != undefined) { + map.removeLayer(end_marker); + }; + if (route_feature != undefined) { + map.removeLayer(route_feature); + }; + + // first get the coordinates of the destination + geolocate(dest).done(function(response){ + // return first coordinate + destination = response.features[0].center; + console.log(destination); + // next, get the route to the destination + getRoute(origin, destination).done(function(x){ + the_route=x; + + // returns a partial geojson(?), it cant be plotted directly. must extract arrays of coords + var route_coords = x.routes[0].geometry.coordinates; + var distance =(x.routes[0].distance).toFixed(2); //meters + var duration = (x.routes[0].duration / 60).toFixed(2); //sec + // $('#information').append($.parseHTML(`

Distance to Drive: ${distance} Meters

+ //

Duration of Drive: ${duration} minutes

`)) + $('#distance').text(`Distance: ${distance} meters`); + $('#duration').text(`Duration: ${duration} minutes`); + // now use turf.js to create a feature to be plotted. THIS IS A GEOJSON! + // NOTE! THERE IS NO NEED TO TRANSFORM THE ARRAY INTO A STRING! linestring takes in 2D array and not a string. + linestring = turf.lineString(route_coords, {name: 'Driving Route'}); + // add the marker and geoJSON to map + end_marker = L.marker([destination[1], destination[0]]).addTo(map).bindPopup('Destination'); + route_feature=L.geoJSON(linestring).addTo(map); + // change zoom on map + // need to swap around the lat and lngs + for (var i = 0; i < route_coords.length; i++) {route_coords[i] = [route_coords[i][1], route_coords[i][0]]}; + map.fitBounds(route_coords); + + }); + }); + }); }); -