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/models/mockpoints.js | 3 +- web/models/points.js | 3 +- 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 ++++++++++++++++++++++++++++-- 6 files changed, 47 insertions(+), 5 deletions(-) create mode 100644 web/public/assets/blue-icon-focused.png create mode 100644 web/public/assets/orange-icon-focused.png diff --git a/web/models/mockpoints.js b/web/models/mockpoints.js index ac9ecd4..1bff370 100644 --- a/web/models/mockpoints.js +++ b/web/models/mockpoints.js @@ -10,7 +10,8 @@ var dumbJsonSchema = new Schema({ race: String, longhair: Boolean, longbeard: Boolean, - extra: String + extra: String, + status: {type: String, default: "new"} }); // Mongoose Model definition diff --git a/web/models/points.js b/web/models/points.js index d27f2a7..28d43b7 100644 --- a/web/models/points.js +++ b/web/models/points.js @@ -10,7 +10,8 @@ var JsonSchema = new Schema({ race: String, longhair: Boolean, longbeard: Boolean, - extra: String + extra: String, + status: {type: String, default: "new"} }); // Mongoose Model definition 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 788991f3ff7dd174610cd78b94f4e7879868618e Mon Sep 17 00:00:00 2001 From: Samarth Agarwal Date: Fri, 29 Mar 2019 16:15:52 -0400 Subject: Continuing merge. --- web/public/javascripts/map.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/public/javascripts/map.js b/web/public/javascripts/map.js index edd312a..4ffa3db 100644 --- a/web/public/javascripts/map.js +++ b/web/public/javascripts/map.js @@ -43,7 +43,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