From 6dad96d44fe89cac28c0b20388ba748fc02a3ed2 Mon Sep 17 00:00:00 2001 From: eben80 Date: Fri, 22 Apr 2022 11:07:33 +0200 Subject: [PATCH] Selectable livemap themes (#258) --- RX_FSK/data/livemap.js | 163 +++++++++++++++++++++++------------------ 1 file changed, 92 insertions(+), 71 deletions(-) diff --git a/RX_FSK/data/livemap.js b/RX_FSK/data/livemap.js index 9d425cf..e46f76a 100644 --- a/RX_FSK/data/livemap.js +++ b/RX_FSK/data/livemap.js @@ -13,40 +13,52 @@ $(document).ready(function(){ L.control.scale().addTo(map); L.control.attribution({prefix:false}).addTo(map); + + const currentTheme = localStorage.getItem("theme"); - if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { - var osm = L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', { - attribution: '© OpenStreetMap contributors © CARTO', - minZoom: 1, - maxZoom: 19 - }); - } else { - var osm = L.tileLayer('https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png', { - attribution: '
Leaflet · Map: OpenStreetMap
', - minZoom: 1, - maxZoom: 19 - }); - } + var osmlight = L.tileLayer('https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png', { + attribution: '
Leaflet · Map: OpenStreetMap
', + minZoom: 1, + maxZoom: 19 + }); + + var osmdark = L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', { + attribution: '© OpenStreetMap contributors © CARTO', + minZoom: 1, + maxZoom: 19 + }); var esri = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', { attribution: '
Leaflet · Map: Esri · Earthstar Geographics
', minZoom: 1, maxZoom: 20 }); + var basemap; + if (currentTheme == 'dark') { + basemap = osmdark; - var basemap = 'osm'; - osm.addTo(map); + } else { + basemap = osmlight; + document.body.classList.toggle("light-theme"); + } + + + basemap.addTo(map); basemap_change = function () { - if (basemap == 'osm') { - map.removeLayer(osm); - map.addLayer(esri); - basemap = 'esri'; - } else { - map.removeLayer(esri); - map.addLayer(osm); - basemap = 'osm'; - } + if (basemap == 'osmlight') { + map.removeLayer(osmlight); + map.addLayer(osmdark); + basemap = 'osmdark'; + } else if (basemap == 'osmdark') { + map.removeLayer(osmlight); + map.addLayer(esri); + basemap = 'esri'; + } else { + map.removeLayer(esri); + map.addLayer(osmlight); + basemap = 'osmlight'; + } }; if(mapcenter) map.setView(mapcenter, 5); @@ -105,22 +117,23 @@ headtxt = function(data,stat) { $('#sonde_statbar').html(' '+statbar); }; - map.addControl(new L.Control.Button([ { position: 'topleft', text: 'πŸ”™', href: 'index.html' } ])); +map.addControl(new L.Control.Button([ { position: 'topleft', text: 'πŸ”™', href: 'index.html' } ])); - L.control.zoom({ position:'topleft' }).addTo(map); +L.control.zoom({ position:'topleft' }).addTo(map); - map.addControl(new L.Control.Button([ { position: 'topleft', text: 'πŸ—ΊοΈ', href: 'javascript:basemap_change();' } ])); +map.addControl(new L.Control.Button([ { position: 'topleft', text: 'πŸ—ΊοΈ', href: 'javascript:basemap_change();' } ])); - map.addControl(new L.Control.Button([ { position: 'topright', id: "status", text: '', href: 'javascript:get_data();' } ])); +map.addControl(new L.Control.Button([ { position: 'topright', id: "status", text: '', href: 'javascript:get_data();' } ])); + +map.addControl(new L.Control.Button([ + { position:'topright', text: '🎈', href: 'javascript:show(marker[last_id],\'marker\');' }, + { text: '〰️', href: 'javascript:show_line();' }, + { text: 'πŸ’₯', href: 'javascript:show(marker_burst[last_id],\'burst\');' }, + { text: '🎯', href: 'javascript:show(marker_landing[last_id],\'landing\');' } +])); + +map.addControl(new L.Control.Button([ { position:'topright', text: 'βš™οΈ', href: 'javascript:show_settings();' } ])); - map.addControl(new L.Control.Button([ - { position:'topright', text: '🎈', href: 'javascript:show(marker,\'marker\');' }, - { text: '〰️', href: 'javascript:show_line();' }, - { text: 'πŸ’₯', href: 'javascript:show(marker_burst,\'burst\');' }, - { text: '🎯', href: 'javascript:show(marker_landing,\'landing\');' } - ])); - - map.addControl(new L.Control.Button([ { position:'topright', text: 'βš™οΈ', href: 'javascript:show_settings();' } ])); show = function(e,p) { @@ -144,57 +157,60 @@ headtxt = function(data,stat) { show_line = function() { $('.i_position, .i_landing').remove(); map.closePopup(); - if (line._latlngs.length != 0 && line_predict._latlngs.length != 0) { - map.fitBounds(getTwoBounds(line.getBounds(),line_predict.getBounds())); - } else if (line._latlngs.length != 0) { - map.fitBounds(line.getBounds()); - } else if (line_predict._latlngs.length != 0) { - map.fitBounds(line_predict.getBounds()); + if (line[last_id]._latlngs.length != 0 && line_predict[last_id]._latlngs.length != 0) { + map.fitBounds(getTwoBounds(line[last_id].getBounds(),line_predict[last_id].getBounds())); + } else if (line[last_id]._latlngs.length != 0) { + map.fitBounds(line[last_id].getBounds()); + } else if (line_predict[last_id]._latlngs.length != 0) { + map.fitBounds(line_predict[last_id].getBounds()); } }; last_data = false; + last_id = false; follow = 'marker'; - marker_landing = false; + marker_landing = []; icon_landing = L.divIcon({className: 'leaflet-landing'}); dots_predict = []; - line_predict = L.polyline(dots_predict,{color: 'yellow'}).addTo(map); - marker_burst = false; + line_predict = []; + marker_burst = []; icon_burst = L.divIcon({className: 'leaflet-burst'}); - marker = false; + marker = []; dots = []; - line = L.polyline(dots).addTo(map); + line = []; draw = function(data) { var stat; console.log(data); if (data.id) { + last_id = data.id; // data.res: 0: ok 1: no rx (timeout), 2: crc err, >2 some other error if ((data.lat && data.lon && data.alt) && (lastframe != 0)) { var location = [data.lat,data.lon,data.alt]; - if (!marker) { + if (!marker[data.id]) { map.setView(location, 14); - marker = L.marker(location).addTo(map) + marker[data.id] = L.marker(location).addTo(map) .bindPopup(poptxt('position',data),{closeOnClick:false, autoPan:false}).openPopup(); get_predict(data); } else { - marker.slideTo(location, { + marker[data.id].slideTo(location, { duration: 500, keepAtCenter: (follow=='marker')?true:false }) .setPopupContent(poptxt('position',data)); - if (last_data.id != data.id) { - storage_remove(); - dots = []; - get_predict(data); - } } - dots.push(location); - line.setLatLngs(dots); + if (!dots[data.id]) { dots[data.id] = []; } + dots[data.id].push(location); + if (!line[data.id]) { + line[data.id] = L.polyline(dots[data.id]).addTo(map); + } else { + line[data.id].setLatLngs(dots[data.id]); + } + } if (data.res == 0) { storage_write(data); @@ -252,7 +268,7 @@ headtxt = function(data,stat) { get_data = function() { $('#status').html(reddot); $.ajax({url: 'live.json', success: (function( data ) { - if (typeof data != "object") { data = $.parseJSON(data);Β } + if (typeof data != "object") { data = $.parseJSON(data); } //console.log(data); if (data.sonde) { draw(data.sonde); @@ -352,7 +368,7 @@ headtxt = function(data,stat) { }); }; - draw_predict = function(prediction,data) { + draw_predict = function(prediction,data) { var ascending = prediction.prediction[0].trajectory; var highest = ascending[ascending.length-1]; var highest_location = [highest.latitude,sanitize_lon(highest.longitude)]; @@ -361,34 +377,39 @@ headtxt = function(data,stat) { var landing = descending[descending.length-1]; var landing_location = [landing.latitude,sanitize_lon(landing.longitude)]; - if (!marker_landing) { - marker_landing = L.marker(landing_location,{icon: icon_landing}).addTo(map) + if (!marker_landing[data.id]) { + marker_landing[data.id] = L.marker(landing_location,{icon: icon_landing}).addTo(map) .bindPopup(poptxt('landing',landing),{closeOnClick:false, autoPan:false}); } else { - marker_landing.slideTo(landing_location, { + marker_landing[data.id].slideTo(landing_location, { duration: 500, keepAtCenter: (follow=='landing')?true:false }) .setPopupContent(poptxt('landing',landing)); } - dots_predict=[]; + dots_predict[data.id]=[]; if (data.climb > 0) { - ascending.forEach(p => dots_predict.push([p.latitude,sanitize_lon(p.longitude)])); + ascending.forEach(p => dots_predict[data.id].push([p.latitude,sanitize_lon(p.longitude)])); - if (!marker_burst) { - marker_burst = L.marker(highest_location,{icon:icon_burst}).addTo(map).bindPopup(poptxt('burst',highest),{closeOnClick:false, autoPan:false}); + if (!marker_burst[data.id]) { + marker_burst[data.id] = L.marker(highest_location,{icon:icon_burst}).addTo(map).bindPopup(poptxt('burst',highest),{closeOnClick:false, autoPan:false}); } else { - marker_burst.slideTo(highest_location, { + marker_burst[data.id].slideTo(highest_location, { duration: 500, keepAtCenter: (follow=='burst')?true:false }).setPopupContent(poptxt('burst',highest)); } } - descending.forEach(p => dots_predict.push([p.latitude,sanitize_lon(p.longitude)])); - line_predict.setLatLngs(dots_predict); + descending.forEach(p => dots_predict[data.id].push([p.latitude,sanitize_lon(p.longitude)])); + + if (!line_predict[data.id]) { + line_predict[data.id] = L.polyline(dots_predict[data.id],{color: 'yellow'}).addTo(map); + } else { + line_predict[data.id].setLatLngs(dots_predict[data.id]); + } if (data.climb > 0) { predictor_time = 5 * 60; // ascending, every 5 min @@ -419,7 +440,7 @@ headtxt = function(data,stat) { var add = '
Position: '+lat+', '+lon+'
'+ - 'Open: GMaps |Β OSM |Β Maps.me'; + 'Open: GMaps | OSM | Maps.me'; if (t == 'position') { return '
🎈 '+i.id+''+add+'
'; } if (t == 'burst') { return '
πŸ’₯ Predicted Burst:
'+fd(i.datetime)+' in '+mr(i.altitude)+'m'+add+'
'; } @@ -508,4 +529,4 @@ function bearing(latlng1, latlng2) { var bearing = ((Math.atan2(y, x) * 180 / Math.PI) + 360) % 360; bearing = bearing < 0 ? bearing-360 : bearing; return Math.round(bearing); -} +} \ No newline at end of file