diff options
| -rw-r--r-- | web/package-lock.json | 5 | ||||
| -rw-r--r-- | web/package.json | 1 | ||||
| l--------- | web/public/javascripts/leaflet-tilelayer-colorfilter.min.js | 1 | ||||
| -rw-r--r-- | web/public/javascripts/map.js | 70 | ||||
| -rw-r--r-- | web/public/stylesheets/style.css | 7 | ||||
| -rw-r--r-- | web/views/layout.pug | 1 | ||||
| -rw-r--r-- | web/views/map.pug | 3 |
7 files changed, 61 insertions, 27 deletions
diff --git a/web/package-lock.json b/web/package-lock.json index 25902a1..8daafcc 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -522,6 +522,11 @@ "resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-1.0.4.tgz", "integrity": "sha1-odePw6UEdMuAhF07O24dpJpEbo4=" }, + "leaflet.tilelayer.colorfilter": { + "version": "1.2.5", + "resolved": "https://registry.npmjs.org/leaflet.tilelayer.colorfilter/-/leaflet.tilelayer.colorfilter-1.2.5.tgz", + "integrity": "sha512-wUvqVlpEofDEDi0ocXApXAcz1l06RsNBEw3L/2ColaygDPERswgas2Jgv/DVrWrVd0HQAxDerwFqOtBI+zbw3w==" + }, "lodash": { "version": "4.17.11", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz", diff --git a/web/package.json b/web/package.json index 0ff388e..1e5d9f5 100644 --- a/web/package.json +++ b/web/package.json @@ -11,6 +11,7 @@ "express": "~4.16.0", "geojson-geometries-lookup": "^0.3.0", "http-errors": "~1.6.2", + "leaflet.tilelayer.colorfilter": "^1.2.5", "mongodb": "*", "mongoose": "*", "morgan": "~1.9.0", 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: '© <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> — Map data © <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(); 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; +} diff --git a/web/views/layout.pug b/web/views/layout.pug index 900a601..09e01fe 100644 --- a/web/views/layout.pug +++ b/web/views/layout.pug @@ -5,5 +5,6 @@ html link(rel='stylesheet', href='https://unpkg.com/leaflet@1.4.0/dist/leaflet.css') link(rel='stylesheet', href='/stylesheets/style.css') script(src='https://unpkg.com/leaflet@1.4.0/dist/leaflet.js') + script(type='text/javascript' src='/javascripts/leaflet-tilelayer-colorfilter.min.js') body block content diff --git a/web/views/map.pug b/web/views/map.pug index af97f6c..abd0af5 100644 --- a/web/views/map.pug +++ b/web/views/map.pug @@ -18,7 +18,8 @@ block content button.details-btn#pending-btn Pending button.details-btn#completed-btn Completed button.details-btn#close-btn Close - + #toggle-container + button#toggle-btn Toggle Dark Mode #map script(type='text/javascript'). |