diff options
Diffstat (limited to 'web/public/javascripts/map.js')
| -rw-r--r-- | web/public/javascripts/map.js | 66 |
1 files changed, 51 insertions, 15 deletions
diff --git a/web/public/javascripts/map.js b/web/public/javascripts/map.js index 4a1e697..3f33bcf 100644 --- a/web/public/javascripts/map.js +++ b/web/public/javascripts/map.js @@ -3,21 +3,19 @@ // attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' // }).addTo(map); -// 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> — Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors', - subdomains: 'abcd', - minZoom: 0, - maxZoom: 18, - ext: 'png' -}).addTo(map); +function plotPointsOnMap(points) { + L.geoJson(points, { + pointToLayer: function (feature, latlng) { + //return L.circleMarker(latlng); + latlngbounds.extend(latlng); + return L.marker(latlng); + } + }).on('click', showDetails).addTo(map) -L.geoJson(points, { - pointToLayer: function (feature, latlng) { - //return L.circleMarker(latlng); - return L.marker(latlng); - } -}).on('click', showDetails).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)); +} // show details about point // e is the event info @@ -85,4 +83,42 @@ function showDetails(e) { function closeDetails(e) { let details = document.getElementById('sidebar') details.style.visibility = 'hidden' -}
\ No newline at end of file +} + +// 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> — Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors', + subdomains: 'abcd', + minZoom: 0, + maxZoom: 18, + 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(); + +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."); +} |