2 files changed, 48 insertions, 26 deletions
diff --git a/web/public/javascripts/map.js b/web/public/javascripts/map.js
index 5ee9219..db50cbe 100644
--- a/web/public/javascripts/map.js
+++ b/web/public/javascripts/map.js
@@ -3,6 +3,7 @@
 //     attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
 // }).addTo(map);
 let currPoint;
+let darkmode = false;
 
 const Races = {
   "White"     : "European or White",
@@ -189,43 +190,57 @@ function updatePointStatusInDb(pointId, pointStatus) {
   });
 }
 
+function initLiveLoading() {
+  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(data);
+      }
+    }, 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.");
+  }
+}
+
+function toggleDarkMap(e) {
+  darkmode = !darkmode;
+  document.getElementById('map').style['-webkit-filter'] =
+    document.getElementById('sidebar').style['-webkit-filter'] =
+    (darkmode) ? "invert(100%)" : "invert(0%)";
+}
+
+let toggleDarkModeBtn = document.getElementById('toggle-btn')
+  .addEventListener("click", toggleDarkMap);
+
 // different basemap
-L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}{r}.{ext}', {
+let mainTileLayer = 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: 18,
-  ext: 'png'
+  ext: 'png',
 }).addTo(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();
+let latlngbounds = new L.latLngBounds();
 
 if (points.length) {
   plotPointsOnMap(points);
 }
-// setup live updates
-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(data);
-    }
-  }, 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.");
-}
+initLiveLoading();
diff --git a/web/public/stylesheets/style.css b/web/public/stylesheets/style.css
index fd6ed87..71002de 100644
--- a/web/public/stylesheets/style.css
+++ b/web/public/stylesheets/style.css
@@ -102,3 +102,10 @@ a {
   float: right;
   margin-right: 10px;
 }
+#toggle-container {
+  position: fixed;
+  float: right;
+  z-index: 2;
+  bottom: 25px;
+  right: 25px;
+}