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.

6 files changed, 47 insertions, 5 deletions

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
--- /dev/null
+++ b/web/public/assets/blue-icon-focused.png
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
--- /dev/null
+++ b/web/public/assets/orange-icon-focused.png
diff --git a/web/public/assets/orange-icon.png b/web/public/assets/orange-icon.png
index dd725de..4b89e0e 100644
--- a/web/public/assets/orange-icon.png
+++ b/web/public/assets/orange-icon.png
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: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> 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