From a062626028fb80b5ab6b61af65d88ca9b7140243 Mon Sep 17 00:00:00 2001 From: Samarth Agarwal Date: Fri, 29 Mar 2019 14:04:33 -0400 Subject: Implemented feature so that whenever a point is clicked a red dot shows up at its base to focus on it and the screen zooms to put the point in the center. --- web/public/assets/blue-icon-focused.png | Bin 0 -> 4220 bytes web/public/assets/orange-icon-focused.png | Bin 0 -> 7428 bytes web/public/assets/orange-icon.png | Bin 7382 -> 12341 bytes web/public/javascripts/map.js | 46 ++++++++++++++++++++++++++++-- 4 files changed, 43 insertions(+), 3 deletions(-) create mode 100644 web/public/assets/blue-icon-focused.png create mode 100644 web/public/assets/orange-icon-focused.png (limited to 'web/public') diff --git a/web/public/assets/blue-icon-focused.png b/web/public/assets/blue-icon-focused.png new file mode 100644 index 0000000..728d06d Binary files /dev/null and b/web/public/assets/blue-icon-focused.png differ diff --git a/web/public/assets/orange-icon-focused.png b/web/public/assets/orange-icon-focused.png new file mode 100644 index 0000000..26d8b52 Binary files /dev/null and b/web/public/assets/orange-icon-focused.png differ diff --git a/web/public/assets/orange-icon.png b/web/public/assets/orange-icon.png index dd725de..4b89e0e 100644 Binary files a/web/public/assets/orange-icon.png and b/web/public/assets/orange-icon.png differ diff --git a/web/public/javascripts/map.js b/web/public/javascripts/map.js index 544da9e..33b0ed6 100644 --- a/web/public/javascripts/map.js +++ b/web/public/javascripts/map.js @@ -2,7 +2,13 @@ // L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { // attribution: '© OpenStreetMap contributors' // }).addTo(map); -let currPoint; +let currPoint = null; + +const orangeIcon = L.icon({ + iconUrl: '../assets/orange-icon.png', + iconSize: [25, 41], + iconAnchor: [12, 41] +}); const Races = { "White" : "European or White", @@ -18,7 +24,13 @@ function plotPointsOnMap(points) { pointToLayer: function (feature, latlng) { //return L.circleMarker(latlng); latlngbounds.extend(latlng); - return L.marker(latlng); + if (feature.status === "pending") { + return L.marker(latlng, {icon: orangeIcon}); + } + else if (feature.status === "new") { + return L.marker(latlng); + } + } }).on('click', showDetails).addTo(map); @@ -30,10 +42,29 @@ function plotPointsOnMap(points) { // show details about point // e is the event info function showDetails(e) { + if(currPoint !== null) { + if (currPoint.feature.geometry.status === "new") { + currPoint._icon.src = '../assets/blue-icon.png'; + } + else if (currPoint.feature.geometry.status === "pending") { + currPoint._icon.src = '../assets/orange-icon.png'; + } + } + // layer.feature.geometry gives you access to all the fields let layer = e.layer; currPoint = layer; + if (currPoint.feature.geometry.status === "new") { + currPoint._icon.src = '../assets/blue-icon-focused.png'; + } + else if (currPoint.feature.geometry.status === "pending") { + currPoint._icon.src = '../assets/orange-icon-focused.png'; + } + + const pointBounds = [currPoint.getLatLng()]; + map.fitBounds(pointBounds); + let sideBar = document.getElementById('sidebar'); if (getComputedStyle(sideBar).visibility === 'hidden') { @@ -93,16 +124,25 @@ function showDetails(e) { } function markAsPending(e) { - currPoint._icon.src = '../assets/orange-icon.png'; + currPoint._icon.src = '../assets/orange-icon-focused.png'; + currPoint.feature.geometry.status = "pending"; } function markAsCompleted(e) { map.removeLayer(currPoint); + currPoint.feature.geometry.status = "completed"; } function closeDetails(e) { let details = document.getElementById('sidebar') details.style.visibility = 'hidden'; + + if (currPoint.feature.geometry.status === "pending") { + currPoint._icon.src = '../assets/orange-icon.png'; + } + else if (currPoint.feature.geometry.status === "new") { + currPoint._icon.src = '../assets/blue-icon.png'; + } } // different basemap -- cgit v1.2.3 From 0d0c5c5fe387cfe1a71b1620f6a73243f053a1d3 Mon Sep 17 00:00:00 2001 From: Samarth Agarwal Date: Fri, 29 Mar 2019 16:40:11 -0400 Subject: Changed null to undefined. --- web/public/javascripts/map.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'web/public') diff --git a/web/public/javascripts/map.js b/web/public/javascripts/map.js index 33b0ed6..abb988a 100644 --- a/web/public/javascripts/map.js +++ b/web/public/javascripts/map.js @@ -42,7 +42,7 @@ function plotPointsOnMap(points) { // show details about point // e is the event info function showDetails(e) { - if(currPoint !== null) { + if(currPoint !== undefined) { if (currPoint.feature.geometry.status === "new") { currPoint._icon.src = '../assets/blue-icon.png'; } -- cgit v1.2.3 From 104e885981dec31aff9a5aaacc3abe2debcc9eba Mon Sep 17 00:00:00 2001 From: Samarth Agarwal Date: Fri, 29 Mar 2019 16:59:30 -0400 Subject: Merging. --- web/public/javascripts/map.js | 6 ------ 1 file changed, 6 deletions(-) (limited to 'web/public') diff --git a/web/public/javascripts/map.js b/web/public/javascripts/map.js index abb988a..c5b1583 100644 --- a/web/public/javascripts/map.js +++ b/web/public/javascripts/map.js @@ -24,12 +24,6 @@ function plotPointsOnMap(points) { pointToLayer: function (feature, latlng) { //return L.circleMarker(latlng); latlngbounds.extend(latlng); - if (feature.status === "pending") { - return L.marker(latlng, {icon: orangeIcon}); - } - else if (feature.status === "new") { - return L.marker(latlng); - } } }).on('click', showDetails).addTo(map); -- cgit v1.2.3