1 files changed, 49 insertions, 42 deletions
diff --git a/web/public/javascripts/map.js b/web/public/javascripts/map.js
index 44fba38..cb72756 100644
--- a/web/public/javascripts/map.js
+++ b/web/public/javascripts/map.js
@@ -3,50 +3,57 @@
 //     attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
 // }).addTo(map);
 
+function plotPointsOnMap(points) {
+	L.geoJson(points, {
+		pointToLayer: function (feature, latlng) {
+			//return L.circleMarker(latlng);
+			latlngbounds.extend(latlng);
+			return L.marker(latlng);
+		}
+	}).bindPopup(function (layer) {
+		// layer.feature.geometry gives you access to all the fields
+		return "<p>" + JSON.stringify(layer.feature.geometry) + "</p>";
+	}).addTo(map)
+
+	// rezoom the map so that all the markers fit in the view, add 20% padding so
+	// that marker dont cut off
+	map.fitBounds(latlngbounds.pad(0.20));
+}
+
 // different basemap
 L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}{r}.{ext}', {
-			attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
-			subdomains: 'abcd',
-			minZoom: 0,
-			maxZoom: 20,
-			ext: 'png'
+	attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+	subdomains: 'abcd',
+	minZoom: 0,
+	maxZoom: 18,
+	ext: 'png'
 }).addTo(map);
 
-// Create point feature for somewhere downtown
-var myDataPoint = L.marker([43.6529, -79.3849]).addTo(map);
-
-// Create line feature and add style and add to map
-var myDataLine = L.polyline([
-		[43.6529, -79.3849],
-		[43.6531, -79.3855]],
-		{color: 'red', weight: 10}).addTo(map);
-
-// Create area feature add style and add to map
-var myArea = L.polygon([
-		[43.650948, -79.385655],
-		[43.66, -79.388],
-		[43.6634, -79.4011],
-		[43.66, -79.4011]],
-		{color: 'blue', weight: 4}).addTo(map);
-
-// Bind popup to Data Point object
-// myDataPoint.bindPopup("This is my city");
-// i can add regular html to this too - neat!
-myDataPoint.bindPopup("<h3>City Hall (not really)</h3><p>Toronto, ON<br>Information about city hall.</p>");
-
-// Bind popup to area object
-myArea.bindPopup("U of T Campus (not really)");
-
-// Create an Empty Popup
-var popup = L.popup();
-
-// Write function to set Properties of the Popup
-function onMapClick(e) {
-	popup
-		.setLatLng(e.latlng)
-		.setContent("You clicked the map at " + e.latlng.toString())
-		.openOn(map);
+// keep track of the boundary of the markers so that we can update the
+// map to fit them all
+var latlngbounds = new L.latLngBounds();
+
+plotPointsOnMap(points);
+if (window.EventSource) {
+	var source = new EventSource('/stream');
+
+	source.addEventListener('message', function(e) {
+		var data = JSON.parse(e.data);
+		if (data.coordinates) {
+			points.push(data);
+			plotPointsOnMap(points);
+		}
+	}, false)
+
+	source.addEventListener('open', function(e) {
+	  console.log("Connection was opened")
+	}, false)
+
+	source.addEventListener('error', function(e) {
+	  if (e.readyState == EventSource.CLOSED) {
+		console.log("Connection was closed")
+	  }
+	}, false)
+} else {
+	console.log("sse not supported.");
 }
-
-// Listen for a click event on the Map element
-map.on('click', onMapClick);