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

LiveMap updates (#298) 

* LiveMap updates

- Update to Leaflet 1.8.0
- Added Topo-Map
- Bugfix: Map only changed after the second click
- better darkmode handling
- changed order of maps: (dark if darkmode enabled) -> white -> topo -> sat -> dark

* Open any MapsApp with geo:// - Link
This commit is contained in:
cixio 2022-04-26 22:09:14 +02:00 committed by Hansi, dl9rdz
parent 872392da2c
commit 090920d3cb
2 changed files with 28 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
RX_FSK/data/livemap.html
View File

@ -5,10 +5,10 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" />
<script>var mapcenter=[%MAPCENTER%];</script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet.marker.slideto@0.2.0/Leaflet.Marker.SlideTo.js"></script>
<script src="livemap.js"></script>
</head>

50
RX_FSK/data/livemap.js
View File

@ -14,12 +14,9 @@ $(document).ready(function(){
L.control.scale().addTo(map);
L.control.attribution({prefix:false}).addTo(map);
const currentTheme = localStorage.getItem("theme");
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 osmlight = L.tileLayer('https://{s}.tile.openstreetmap.de/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
});
var osmdark = L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', {
@ -28,34 +25,39 @@ $(document).ready(function(){
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 opentopo = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
maxZoom: 17,
attribution: 'Map data: &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, <a href="http://viewfinderpanoramas.org">SRTM</a><br />Map style: &copy; <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)'
});
var esri = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye,<br />Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
});
var basemap;
if (currentTheme == 'dark') {
basemap = osmdark;
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
map.addLayer(osmdark);
basemap='osmdark';
} else {
basemap = osmlight;
document.body.classList.toggle("light-theme");
map.addLayer(osmlight);
basemap='osmlight';
}
basemap.addTo(map);
basemap_change = function () {
if (basemap == 'osmlight') {
map.removeLayer(osmlight);
map.addLayer(osmdark);
basemap = 'osmdark';
} else if (basemap == 'osmdark') {
map.removeLayer(osmlight);
map.addLayer(opentopo);
basemap = 'opentopo';
} else if (basemap == 'opentopo') {
map.removeLayer(opentopo);
map.addLayer(esri);
basemap = 'esri';
} else {
} else if (basemap == 'esri') {
map.removeLayer(esri);
map.addLayer(osmdark);
basemap = 'osmdark';
} else {
map.removeLayer(osmdark);
map.addLayer(osmlight);
basemap = 'osmlight';
}
@ -440,7 +442,7 @@ map.addControl(new L.Control.Button([ { position:'topright', text: '⚙️', hre
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="geo://'+lat+','+lon+'">GeoApp</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>'; }