add cityCoords

params for city chnaged
add 'center city' in settings

locales/de/translation.json

@@ -48,5 +48,6 @@
   "MeanValueLAeq": "Mittelwert LAeq",
   "Peaks": "Spitzen",
   "Day": "Tag",
-  "Night": "Nacht"
+  "Night": "Nacht",
+  "CenterMap": "Karte zentrieren auf"
 }

locales/dev/translation.json

@@ -41,6 +41,7 @@
   "Version": "Version",
   "from": "vom",
   "RemoveFromMap": "Sensoren nicht anzeigen, die nicht gesendet haben seit",
-  "weeks": "Wochen"
+  "weeks": "Wochen",
+  "CenterMap": "Center map on"
 
 }

locales/en/translation.json

@@ -48,5 +48,6 @@
   "MeanValueLAeq": "Mean value LAeq",
   "Peaks": "Peaks",
   "Day": "Day",
-  "Night": "Night"
+  "Night": "Night",
+  "CenterMap": "Center map on"
 }

public/javascripts/chart_utilities.js

@@ -207,7 +207,7 @@ export const getCurrentTab = () => {
 }
 
 export const fetchfromserver = async (url) => {
-    const ret = await fetch(url)
+    const ret = await fetch(encodeURI(url))
         .catch(e => {
             showError(e)
         });
@@ -225,3 +225,14 @@ export const addAddress = async (sid) => {
         return "no address"
     }
 }
+
+export const cityCoords = async (city) => {
+    let url = `/srv/getcitycoords?city=${city}`
+    let erg = await fetchfromserver(url)
+    if (!erg.err) {
+        return erg.coords
+    } else {
+        return "no coordinates"
+    }
+}
+

public/javascripts/global.js

@@ -5,17 +5,13 @@ import * as map from './map.js'
 import * as dt from './datetime.js'
 import {loadAll, showChart, setNoUTC} from './showcharts.js'
 import { DateTime } from './luxon.min.js'
-import {setCurrentTab, getCurrentTab, showError, fetchfromserver} from "./chart_utilities.js";
+import {setCurrentTab, getCurrentTab, showError, fetchfromserver, cityCoords} from "./chart_utilities.js";
 
 (async () => {
 
-    // global constants
-    const Stuttgart = [48.779, 9.16]
-    // END global constants
-
     // global variables
     const params = {                                  // set defaults
-        center: Stuttgart,
+        center: {name: 'Stuttgart', coords: [48.778, 9.180]},
         zoom: 10,
         span: 1,
         peak: 70,
@@ -25,11 +21,17 @@ import {setCurrentTab, getCurrentTab, showError, fetchfromserver} from "./chart_
         refreshRate: 5,
         sid: -1
     }
-
     // END global variables
     
+ //   localStorage.clear()
 
 
+    // Check new map center
+    const checkNewCenter = (oldC, newC) => {
+        if((oldC[0] !== newC[0]) || (oldC[1] !== newC[1])) {
+            map.setNewCenter(newC)
+        }
+    }
 
     // Register events
     // Every input with value check
@@ -59,6 +61,12 @@ import {setCurrentTab, getCurrentTab, showError, fetchfromserver} from "./chart_
         params.span = parseInt(document.getElementById('nbrofdays').value)
         params.peak = parseInt(document.getElementById('peaklim').value)
         params.weeks = parseInt(document.getElementById('olderthan').value)
+        const city = document.getElementById('centercity').value
+        const oldCoords = params.center
+        params.center.coords = await cityCoords(city)
+        params.center.name = city
+        checkNewCenter(oldCoords, params.center.coords)
+        localStorage.setItem('centercity',JSON.stringify(params.center))
         let newlng = document.querySelector('#sellan input:checked').id
         let oldlng = localStorage.getItem('curlang')
         localStorage.setItem('curlang', newlng)
@@ -95,13 +103,17 @@ import {setCurrentTab, getCurrentTab, showError, fetchfromserver} from "./chart_
         document.getElementById('nbrofdays').value = params.span
         document.getElementById('peaklim').value = params.peak
         document.getElementById('olderthan').value = params.weeks
+        const centercity = JSON.parse(localStorage.getItem('centercity'))
+        document.getElementById('centercity').value = centercity.name
         // select different infos depoending on the selcted tab
         // first clear all
+        document.querySelector('#ccity').style.display = 'none'
         document.querySelector('#stday').style.display = 'inline'
         document.querySelector('#nbday').style.display = 'none'
         document.querySelector('#pklim').style.display = 'none'
         document.querySelector('#odth').style.display = 'none'
         if(curtab === 'maptab') {
+            document.querySelector('#ccity').style.display = 'inline'
             document.querySelector('#stday').style.display = 'none'
             document.querySelector('#odth').style.display = 'inline'
         }
@@ -127,7 +139,21 @@ import {setCurrentTab, getCurrentTab, showError, fetchfromserver} from "./chart_
     async function main() {
         setNoUTC()                                              // no UTC for HighCharts
         // set correct language
-        const currentLang =  localStorage.getItem('curlang')
+        let currentLang =  localStorage.getItem('curlang')
+        if ((currentLang === null) || (currentLang === '')) {
+            currentLang = 'de'
+            localStorage.setItem('curlang', currentLang)
+        }
+        let centercity
+        try {
+            centercity = JSON.parse(localStorage.getItem('centercity'))
+        } catch (e) {
+            centercity = params.center
+        }
+        if((centercity === null) || (centercity.name === '')) {
+            centercity = params.center
+        }
+        localStorage.setItem('centercity', JSON.stringify(centercity))
         if(currentLang === 'en') {
             document.querySelector('#en').checked = true
             params.seldate = 'today'

public/javascripts/map.js

@@ -24,7 +24,7 @@ export async function showMap(params) {
             mapparams.map.remove();
         }
     }
-    mapparams.map = L.map('map', {scrollWheelZoom: false}).setView(params.center, parseInt(params.zoom))
+    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: '&copy; <a href="http://www.js.openstreetmap.org/copyright">OpenStreetMap</a>'
@@ -51,3 +51,7 @@ const buildMarkers = async (params, mapparams) => {
         return mapg.buildMarkers(params, mapparams)
     }
 }
+
+export const setNewCenter = (center) => {
+    mapparams.map.setView(center)
+}

public/javascripts/map_geiger.js

@@ -226,7 +226,7 @@ async function onMarkerClick(e, click, txts, params, mpp) {
             let triggerEl = document.querySelector(`#livetab`)
             bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name
             utils.setCurrentTab('livetab')
-            params.center = [e.latlng.lat, e.latlng.lng]
+            params.center.coords = [e.latlng.lat, e.latlng.lng]
             mpp.map.setView([e.latlng.lat, e.latlng.lng]);
             ev.preventDefault()
             await loadAll(params)

public/javascripts/map_noise.js

@@ -149,7 +149,7 @@ async function onMarkerClick(e, click, txts, params, mpp) {
             let triggerEl = document.querySelector(`#livetab`)
             bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name
             utils.setCurrentTab('livetab')
-            params.center = [e.latlng.lat, e.latlng.lng]
+//            params.center.coords = [e.latlng.lat, e.latlng.lng]
             mpp.map.setView([e.latlng.lat, e.latlng.lng]);
             ev.preventDefault()
             await loadAll(params)

public/javascripts/map_utilities.js

@@ -1,18 +1,6 @@
-import * as mapn from './map_noise.js';
-import * as mapg from './map_geiger.js';
 import * as utils from "./chart_utilities.js"
 import * as dt from './datetime.js'
 
-function getColor(d, mapparams) {
-    if(sysparams.category === 'noise') {
-        return mapn.getColor(d, mapparams)
-    } else if(sysparams.category === 'multigeiger') {   
-        return mapg.getColor(d, mapparams)
-    }
-}
-
-
-
 // Show the last date below tha map grafics
 export async function showLastDate(ld, mpp) {
     let url
@@ -26,3 +14,4 @@ export async function showLastDate(ld, mpp) {
     document.querySelector('#actsensors').innerText = `${sensors.actsensors}  ${sensors.registered}`
 //    $('#actsensors').html(`${erg.count} aktive Sensoren (angemeldet ${allsens})`)
 }
+

routes/api.js

@@ -36,7 +36,7 @@ router.get('/:cmd', async function(req, res, next) {
       return
     }
     // if called as '/api' then directly return the data
-    if ((calledAs === '/api') || (cmd === 'getoneproperty') || (cmd === 'getaddress')) {
+    if ((calledAs === '/api') || (cmd === 'getoneproperty') || (cmd === 'getaddress') || (cmd === 'getcitycoords')) {
       if(pretty) {
         res.setHeader('Content-Type', 'text/plain; charset=utf-8');
         res.send(JSON.stringify(response.data,null,2))

views/index_noise.pug

@@ -1,13 +1,6 @@
 extends layout
 
 block content
-  script.
-    function chglang(x) {
-      // localStorage.setItem('curlang', x.slice(-2))
-      // location.href = x
-      // history.pushState({}, '', '/')
-    }
-
   header
     #hline1
       #h1name #{t("NoiseMeasurement")}
@@ -73,6 +66,9 @@ block content
             span(aria-hidden="true") ×
         .modal-body.settings
           .rows
+            .comlumn#ccity 
+              label.thelabels(for='city') #{t("CenterMap")}:
+              input.theInputs#centercity(name="centercity")
             .column#stday
               label.thelabels(for='startday') #{t("StartDate")}:
               input.theInputs#startday(name='startday' )