ua1zbe
/
rdz_ttgo_sonde_dl9rdz
mirror of https://github.com/dl9rdz/rdz_ttgo_sonde
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Selectable livemap themes (#258)

This commit is contained in:
eben80 2022-04-22 11:07:33 +02:00 committed by GitHub
parent a68cd577e2
commit 6dad96d44f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 92 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

163
RX_FSK/data/livemap.js
View File

@ -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: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
minZoom: 1,
maxZoom: 19
});
} else {
var osm = L.tileLayer('https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png', {
attribution: '<div><a href="https://leafletjs.com/">Leaflet</a> &middot; Map: <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a></div>',
minZoom: 1,
maxZoom: 19
});
}
var osmlight = L.tileLayer('https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png', {
attribution: '<div><a href="https://leafletjs.com/">Leaflet</a> &middot; Map: <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a></div>',
minZoom: 1,
maxZoom: 19
});
var osmdark = L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
minZoom: 1,
maxZoom: 19
});
var esri = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
attribution: '<div><a href="https://leafletjs.com/">Leaflet</a> &middot; Map: <a href="https://www.esri.com/">Esri</a> &middot; Earthstar Geographics</div>',
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('&nbsp;'+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 =
'<br /><b>Position:</b> '+lat+', '+lon+'<br />'+
'<b>Open:</b> <a href="https://www.google.de/maps/?q='+lat+', '+lon+'" target="_blank">GMaps</a> | <a href="https://www.openstreetmap.org/?mlat='+lat+'&mlon='+lon+'&zoom=15" target="_blank">OSM</a> | <a href="mapsme://map?ll='+lat+','+lon+'">Maps.me</a>';
'<b>Open:</b> <a href="https://www.google.de/maps/?q='+lat+', '+lon+'" target="_blank">GMaps</a> | <a href="https://www.openstreetmap.org/?mlat='+lat+'&mlon='+lon+'&zoom=15" target="_blank">OSM</a> | <a href="mapsme://map?ll='+lat+','+lon+'">Maps.me</a>';
if (t == 'position') { return '<div class="i_position"><b>🎈 '+i.id+'</b>'+add+'</div>'; }
if (t == 'burst') { return '<div class="i_burst"><b>💥 Predicted Burst:</b><br />'+fd(i.datetime)+' in '+mr(i.altitude)+'m'+add+'</div>'; }
@ -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);
}
}