1 files changed, 44 insertions, 26 deletions
diff --git a/web/public/javascripts/map.js b/web/public/javascripts/map.js
index 5ee9219..23f4ec0 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,60 @@ 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 getModeFilter(darkmode) {
+  return darkmode ? ['hue:186deg', 'invert:100%'] : [];
+}
+
+function toggleDarkMap(e) {
+  mainTileLayer.updateFilter(getModeFilter(!darkmode));
+  darkmode = !darkmode;
+}
+
+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.colorFilter('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',
+  filter: [],
 }).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();