From 5e432d44568b5ec6c39c07718fcabe924f7e4bed Mon Sep 17 00:00:00 2001 From: Anson Bridges Date: Mon, 6 Nov 2023 22:21:33 -0500 Subject: Dashboard progress: layout, map, route drawing --- dashboard_website/static/js/dashboard.js | 80 ++++++++++++++++++++++++++++++++ 1 file changed, 80 insertions(+) create mode 100644 dashboard_website/static/js/dashboard.js (limited to 'dashboard_website/static/js/dashboard.js') diff --git a/dashboard_website/static/js/dashboard.js b/dashboard_website/static/js/dashboard.js new file mode 100644 index 0000000..b335a1f --- /dev/null +++ b/dashboard_website/static/js/dashboard.js @@ -0,0 +1,80 @@ +var map; +var previewmap; + +var visited_clues_m = L.layerGroup([]); // all clues +var unvisited_clues_m = L.layerGroup([]); // subset of all clues - unvisited clues +var destination_clues_m = L.layerGroup([]); // clues bikers are currently destined for + +var homeIcon = L.icon({ + iconUrl: 'static/img/marker-home.png', + iconSize: [25, 41], // size of the icon + iconAnchor: [12, 41], // point of the icon which will correspond to marker's location + popupAnchor: [0, -41] // point from which the popup should open relative to the iconAnchor +}); + +var bikeIcon = L.icon({ + iconUrl: 'static/img/marker-bike.png', + iconSize: [25, 41], // size of the icon + iconAnchor: [12, 41], // point of the icon which will correspond to marker's location + popupAnchor: [0, -41] // point from which the popup should open relative to the iconAnchor +}); + +var visitedIcon = L.icon({ // for all visited clues + iconUrl: 'static/img/marker-icon-grey.png', + iconSize: [25, 41], // size of the icon + iconAnchor: [12, 41], // point of the icon which will correspond to marker's location + popupAnchor: [0, -41] // point from which the popup should open relative to the iconAnchor +}); + +var unvisitedIcon = L.icon({ // for all visited clues + iconUrl: 'static/img/marker-icon-blue.png', + iconSize: [25, 41], // size of the icon + iconAnchor: [12, 41], // point of the icon which will correspond to marker's location + popupAnchor: [0, -41] // point from which the popup should open relative to the iconAnchor +}); +var route_coords = [[-71.055561,42.368861],[-71.052522,42.367271],[-71.056507,42.362152],[-71.054519,42.359704],[-71.051539,42.360949],[-71.045199,42.362252],[-71.041597,42.366374],[-71.041248,42.364857],[-71.038908,42.368518],[-71.035936,42.367158],[-71.035967,42.365172],[-71.033209,42.363961],[-71.040015,42.367059],[-71.037911,42.369812],[-71.037188,42.371161],[-71.033036,42.37337],[-71.031355,42.375375],[-71.034935,42.380792],[-71.029904,42.376622],[-71.028298,42.377891],[-71.016232,42.38339],[-71.014571,42.380901],[-71.011693,42.382756],[-70.999131,42.38927],[-71.005456,42.390256],[-70.999967,42.390009],[-71.000362,42.388436],[-70.997084,42.390466],[-70.994955,42.392539],[-70.99031,42.391786],[-70.994955,42.392539],[-70.992622,42.396106],[-70.98178,42.392741],[-70.976359,42.386899],[-70.980137,42.380215],[-70.977664,42.385059],[-70.969384,42.389507],[-70.973097,42.387348],[-70.980126,42.390098],[-70.993747,42.411181],[-70.993534,42.408589],[-70.991202,42.408399],[-70.985934,42.420244],[-70.987188,42.418679],[-70.99748,42.418321],[-71.007923,42.416741],[-71.012109,42.410406],[-71.01537,42.411785],[-71.012414,42.409955],[-71.014511,42.406518],[-71.028327,42.398247],[-71.030138,42.399394],[-71.036726,42.391309],[-71.038526,42.390284],[-71.039316,42.385546],[-71.038723,42.387914],[-71.032794,42.386461],[-71.033749,42.389192],[-71.032506,42.396103],[-71.035674,42.397588],[-71.041015,42.393843],[-71.042858,42.393379],[-71.051453,42.402568],[-71.051833,42.405181],[-71.048082,42.404063],[-71.045594,42.412467],[-71.036237,42.414389],[-71.031525,42.412279],[-71.031258,42.418461],[-71.029338,42.421871],[-71.027113,42.421213],[-71.029041,42.422685],[-71.043219,42.422264],[-71.050739,42.418307],[-71.055953,42.42069],[-71.054522,42.419042],[-71.063476,42.413303],[-71.062128,42.407436],[-71.060882,42.403075],[-71.058992,42.403792],[-71.063245,42.403683],[-71.07097,42.396009],[-71.072007,42.397236],[-71.073656,42.398807],[-71.06758,42.402759],[-71.061508,42.402436],[-71.061206,42.398809],[-71.061612,42.400486],[-71.074409,42.38398],[-71.090615,42.379911],[-71.093444,42.381759],[-71.094916,42.379731],[-71.094764,42.377355],[-71.089131,42.376874],[-71.086892,42.373205],[-71.081336,42.371939],[-71.08097,42.367607],[-71.080171,42.369638],[-71.075628,42.369473],[-71.073462,42.368436],[-71.069119,42.373707],[-71.064235,42.375336],[-71.063105,42.374142],[-71.064212,42.376842],[-71.060948,42.380436],[-71.060753,42.376391],[-71.060933,42.376178],[-71.056172,42.375934],[-71.055588,42.374119],[-71.062837,42.369573],[-71.065634,42.371832],[-71.064287,42.369675],[-71.06828,42.369868],[-71.061735,42.369195],[-71.059808,42.366213],[-71.062507,42.365968],[-71.068045,42.367296],[-71.072713,42.361868],[-71.073339,42.356724],[-71.077458,42.355274],[-71.075414,42.356537],[-71.085166,42.349997],[-71.089477,42.350844],[-71.094885,42.360151],[-71.090578,42.361529],[-71.094885,42.360151],[-71.096306,42.362555],[-71.101083,42.363685],[-71.10141,42.36265],[-71.101475,42.3614],[-71.111234,42.35442],[-71.111226,42.349499],[-71.116011,42.35008],[-71.116795,42.345605],[-71.121734,42.342619],[-71.119813,42.345177],[-71.121439,42.351178],[-71.124132,42.351932],[-71.130896,42.352999],[-71.131464,42.352585],[-71.137307,42.353617],[-71.146009,42.349667],[-71.146124,42.350083],[-71.143863,42.356842],[-71.148301,42.357451],[-71.145775,42.361512],[-71.128473,42.363221],[-71.116228,42.364227],[-71.116127,42.361435],[-71.1088,42.364024],[-71.113445,42.370462],[-71.118959,42.373491],[-71.120839,42.373266],[-71.119379,42.375457],[-71.114496,42.378275],[-71.115739,42.378452],[-71.115952,42.376696],[-71.110851,42.374259],[-71.102512,42.382238],[-71.097894,42.380957],[-71.096887,42.380072],[-71.102659,42.382131],[-71.110771,42.383988],[-71.112746,42.383573],[-71.117164,42.389801],[-71.110886,42.398957],[-71.112241,42.400829],[-71.111371,42.399643],[-71.116937,42.4013],[-71.122704,42.396589],[-71.117004,42.389639],[-71.119303,42.38859],[-71.119219,42.388412],[-71.133098,42.388907],[-71.132876,42.3935],[-71.143078,42.396551],[-71.147394,42.404252],[-71.15533,42.40274],[-71.16988,42.408428],[-71.171169,42.409976],[-71.168458,42.410941],[-71.171169,42.409976],[-71.179624,42.414464],[-71.183452,42.42359],[-71.194736,42.425679],[-71.203921,42.429978],[-71.206933,42.429124],[-71.208917,42.422263],[-71.218928,42.415564],[-71.231484,42.417724],[-71.234617,42.398009],[-71.242207,42.380737],[-71.251022,42.37836],[-71.253322,42.374385],[-71.270022,42.372262],[-71.274446,42.367652],[-71.290894,42.367358],[-71.293875,42.359903],[-71.305349,42.351648],[-71.305652,42.342969],[-71.312339,42.342072],[-71.33626,42.325623],[-71.351385,42.323333],[-71.359132,42.320044],[-71.363981,42.317371],[-71.359917,42.313798],[-71.340407,42.315699],[-71.341697,42.318032],[-71.335699,42.321775],[-71.327044,42.321102],[-71.321809,42.32536],[-71.31702,42.324614],[-71.30971,42.327571],[-71.303618,42.325459],[-71.296735,42.328775],[-71.268746,42.323382],[-71.262316,42.323664],[-71.253047,42.327434],[-71.24646,42.321713],[-71.230201,42.321192],[-71.225826,42.317308],[-71.227365,42.314504],[-71.223413,42.344938],[-71.21089,42.347339],[-71.210616,42.351056],[-71.191804,42.355537],[-71.189804,42.361187],[-71.18542,42.361942],[-71.174168,42.35832],[-71.15842,42.358512],[-71.154136,42.352931],[-71.159035,42.341357],[-71.162549,42.341017],[-71.165995,42.339192],[-71.16236,42.333966],[-71.155951,42.330623],[-71.163783,42.326275],[-71.16198,42.324682],[-71.163783,42.326275],[-71.15881,42.326859],[-71.155413,42.33162],[-71.142763,42.343387],[-71.134334,42.338825],[-71.12756,42.33798],[-71.124946,42.335444],[-71.127191,42.333743],[-71.125847,42.331874],[-71.1185,42.33704],[-71.112246,42.336],[-71.10963,42.336448],[-71.107283,42.338917],[-71.100903,42.336152],[-71.099284,42.338007],[-71.094327,42.341231],[-71.095003,42.342001],[-71.096959,42.344689],[-71.098972,42.346814],[-71.097658,42.350114],[-71.106096,42.351083],[-71.091358,42.348977],[-71.088524,42.348907],[-71.087559,42.346916],[-71.089677,42.346361],[-71.093834,42.339096],[-71.098267,42.332009],[-71.100092,42.332401],[-71.09715,42.331785],[-71.099348,42.33047],[-71.09454,42.325354],[-71.095222,42.328428],[-71.090904,42.329829],[-71.094082,42.331699],[-71.083566,42.339307],[-71.083465,42.34194],[-71.074108,42.343558],[-71.071196,42.34085],[-71.064372,42.339567],[-71.065791,42.335353],[-71.060504,42.329045],[-71.06221,42.324934],[-71.066844,42.327134],[-71.074056,42.320756],[-71.077746,42.320431],[-71.087997,42.294939],[-71.087449,42.296172],[-71.067024,42.289067],[-71.063921,42.284476],[-71.063084,42.285832],[-71.048464,42.290114],[-71.024029,42.274385],[-71.013808,42.278297],[-71.011144,42.277183],[-71.014026,42.27938],[-71.009534,42.276371],[-71.01439,42.26665],[-71.002345,42.251399],[-71.000444,42.245312],[-71.003326,42.243971],[-71.004555,42.236929],[-70.99396,42.215849],[-70.994299,42.211128],[-70.997173,42.211322],[-71.001295,42.207533],[-70.995563,42.209513],[-70.993966,42.216189],[-70.996548,42.22389],[-71.003502,42.228708],[-71.003762,42.23913],[-71.007108,42.244146],[-71.025531,42.250203],[-71.024768,42.253413],[-71.028501,42.254638],[-71.02619,42.25528],[-71.02898,42.25784],[-71.02785,42.25609],[-71.03122,42.258422],[-71.029109,42.260295],[-71.035707,42.269102],[-71.02785,42.27581],[-71.042098,42.285957],[-71.040715,42.28867],[-71.046941,42.293738],[-71.049526,42.300919],[-71.045267,42.309351],[-71.046352,42.313327],[-71.042371,42.313686],[-71.039672,42.316948],[-71.037188,42.316288],[-71.034131,42.314368],[-71.034107,42.315966],[-71.034131,42.314368],[-71.039672,42.316948],[-71.042671,42.314182],[-71.045242,42.316292],[-71.049959,42.3197],[-71.049204,42.325624],[-71.044144,42.329966],[-71.035189,42.329187],[-71.023501,42.333255],[-71.023658,42.3359],[-71.019994,42.338437],[-71.013043,42.338284],[-71.013043,42.338284],[-71.035497,42.338144],[-71.038829,42.344223],[-71.033918,42.344315],[-71.031832,42.345088],[-71.035964,42.347795],[-71.03588,42.34898],[-71.040407,42.347902],[-71.045311,42.349281],[-71.044959,42.351052],[-71.04333,42.352749],[-71.047121,42.353667],[-71.048805,42.350902],[-71.050269,42.351671],[-71.049726,42.35199],[-71.051172,42.352211],[-71.056257,42.352917],[-71.059567,42.350941],[-71.061676,42.353717],[-71.061249,42.355298],[-71.063037,42.355519],[-71.063514,42.354894],[-71.064556,42.352372],[-71.067311,42.352314],[-71.066839,42.352445],[-71.072038,42.348915],[-71.067854,42.349993],[-71.068086,42.353792],[-71.069259,42.356131],[-71.066568,42.356682],[-71.062749,42.357905],[-71.064277,42.358851],[-71.069242,42.357529],[-71.062171,42.358056],[-71.058565,42.357428],[-71.057201,42.358757],[-71.059255,42.359295],[-71.056995,42.36049],[-71.056994,42.361263],[-71.056819,42.361534],[-71.055569,42.364032],[-71.055582,42.365251],[-71.056164,42.366918]]; +fetch('static/js/route.json') + .then((response) => response.json()) + .then((json) => drawRoute(json['features'][0]['geometry']['coordinates'])); + +function drawRoute(route_coords2) { + for (var i = 0; i < route_coords.length; i++){ + var t = route_coords[i][1]; + route_coords[i][1] = route_coords[i][0]; + route_coords[i][0] = t; + } + var route = new L.polyline(route_coords, {color:'red'}).addTo(map); +} + +window.onload = function() { + console.log("loaded"); + map = L.map('map').setView([42.3626081,-71.0620591], 13); + L.tileLayer('https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.{ext}', { + minZoom: 0, + maxZoom: 20, + attribution: '© Stadia Maps © OpenMapTiles © OpenStreetMap contributors', + ext: 'png' + }).addTo(map); + previewmap = L.map('previewmap').setView([42.3626081,-71.0620591], 13); + L.tileLayer('https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.{ext}', { + minZoom: 0, + maxZoom: 20, + ext: 'png' + }).addTo(previewmap); + + var homeMarker = L.marker([homebase['latitude'], homebase['longitude']], {icon: homeIcon}).addTo(map).bindPopup("Home is where the club is."); + for (var i = 0; i < clues.length; i++) { + var tempIcon = visitedIcon; + if (clues[i]['clue_status'] == "UNVISITED") tempIcon = unvisitedIcon; + var clueMarker = L.marker([clues[i]['latitude'], clues[i]['longitude']], {icon: tempIcon}).addTo(map).bindPopup(clues[i]['clue_name'] + ": " + clues[i]['clue_info']); + if (clues[i]['clue_status'] == "UNVISITED") unvisited_clues_m.addLayer(clueMarker); + else visited_clues_m.addLayer(clueMarker); + } + + map.addLayer(visited_clues_m); + map.addLayer(unvisited_clues_m); + var layerControl = L.control.layers(null,null,{collapsed:false}); + layerControl.addOverlay(unvisited_clues_m, "Unvisited Clues"); + layerControl.addOverlay(visited_clues_m, "Visited Clues"); + layerControl.addTo(map); +} \ No newline at end of file -- cgit v1.2.3