100 lines
3.5 KiB
JavaScript
100 lines
3.5 KiB
JavaScript
// all function related to the map
|
|
|
|
import * as utils from "./chart_utilities.js"
|
|
import * as mapn from './map_noise.js'
|
|
import * as mapu from './map_utilities.js'
|
|
|
|
const mapparams = {
|
|
map: null,
|
|
bounds: null,
|
|
popuptext: '',
|
|
clickedSensor: 0,
|
|
APIURL: '/srv/getmapdata?',
|
|
MAXZOOM: 19
|
|
}
|
|
|
|
export async function showMap(params) {
|
|
if(sysparams.category === 'noise') {
|
|
utils.removeTabs()
|
|
if(mapparams.map && mapparams.map.remove) {
|
|
mapparams.map.off();
|
|
mapparams.map.remove();
|
|
}
|
|
}
|
|
mapparams.map = L.map('map', {scrollWheelZoom: false}).setView(params.center.coords, parseInt(params.zoom))
|
|
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
maxZoom: mapparams.MAXZOOM,
|
|
attribution: '© <a href="http://www.js.openstreetmap.org/copyright">OpenStreetMap</a>'
|
|
}).addTo(mapparams.map)
|
|
mapparams.bounds = mapparams.map.getBounds();
|
|
|
|
mapparams.map.on('moveend', async function () {
|
|
mapparams.bounds = mapparams.map.getBounds()
|
|
await buildMarkers(params, mapparams)
|
|
});
|
|
|
|
if(sysparams.category === 'noise'){
|
|
mapn.buildLegend(mapparams)
|
|
}
|
|
|
|
let lastdate = await buildMarkers(params, mapparams)
|
|
mapu.showLastDate(lastdate, mapparams);
|
|
}
|
|
|
|
const buildMarkers = async (params, mapparams) => {
|
|
return mapn.buildMarkers(params, mapparams)
|
|
}
|
|
|
|
export const setNewCenter = (center) => {
|
|
mapparams.map.setView(center)
|
|
}
|
|
|
|
export const goToMyLocation = () => {
|
|
if (!navigator.geolocation) {
|
|
alert('Geolocation wird von diesem Browser nicht unterstützt');
|
|
return;
|
|
}
|
|
|
|
navigator.geolocation.getCurrentPosition(
|
|
(position) => {
|
|
const lat = position.coords.latitude;
|
|
const lon = position.coords.longitude;
|
|
const accuracy = position.coords.accuracy;
|
|
|
|
// Karte zur aktuellen Position zentrieren
|
|
mapparams.map.setView([lat, lon], 15);
|
|
|
|
// Optional: Marker an aktueller Position setzen
|
|
const myLocationMarker = L.marker([lat, lon], {
|
|
icon: L.icon({
|
|
iconUrl: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCI+PGNpcmNsZSBjeD0iMjAiIGN5PSIyMCIgcj0iOCIgZmlsbD0iIzQyODVGNCIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIzIi8+PGNpcmNsZSBjeD0iMjAiIGN5PSIyMCIgcj0iMTUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzQyODVGNCIgc3Ryb2tlLXdpZHRoPSIyIiBvcGFjaXR5PSIwLjMiLz48L3N2Zz4=',
|
|
iconSize: [40, 40],
|
|
iconAnchor: [20, 20]
|
|
})
|
|
}).addTo(mapparams.map);
|
|
|
|
myLocationMarker.bindPopup(`📍 Ihr Standort<br/>Genauigkeit: ±${Math.round(accuracy)}m`).openPopup();
|
|
},
|
|
(error) => {
|
|
let errorMsg = 'Position konnte nicht ermittelt werden.';
|
|
switch(error.code) {
|
|
case error.PERMISSION_DENIED:
|
|
errorMsg = 'Bitte erlauben Sie den Zugriff auf Ihren Standort.';
|
|
break;
|
|
case error.POSITION_UNAVAILABLE:
|
|
errorMsg = 'Standortinformationen sind nicht verfügbar.';
|
|
break;
|
|
case error.TIMEOUT:
|
|
errorMsg = 'Die Anfrage ist abgelaufen.';
|
|
break;
|
|
}
|
|
alert(errorMsg);
|
|
},
|
|
{
|
|
enableHighAccuracy: true,
|
|
timeout: 5000,
|
|
maximumAge: 0
|
|
}
|
|
);
|
|
}
|