From a7fa4d95f7e5bb30c5c25bd4bc97881045b6a1fa Mon Sep 17 00:00:00 2001
From: Kumar Damani <kumar.damani@mail.utoronto.ca>
Date: Tue, 23 Apr 2019 18:42:37 -0400
Subject: added dark mode option

---
 .../leaflet-tilelayer-colorfilter.min.js           |  1 +
 web/public/javascripts/map.js                      | 70 ++++++++++++++--------
 2 files changed, 45 insertions(+), 26 deletions(-)
 create mode 120000 web/public/javascripts/leaflet-tilelayer-colorfilter.min.js

(limited to 'web/public/javascripts')

diff --git a/web/public/javascripts/leaflet-tilelayer-colorfilter.min.js b/web/public/javascripts/leaflet-tilelayer-colorfilter.min.js
new file mode 120000
index 0000000..d817736
--- /dev/null
+++ b/web/public/javascripts/leaflet-tilelayer-colorfilter.min.js
@@ -0,0 +1 @@
+../../node_modules/leaflet.tilelayer.colorfilter/src/leaflet-tilelayer-colorfilter.min.js
\ No newline at end of file
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();
-- 
cgit v1.2.3