First running version

public/javascripts/map.js

@@ -1,15 +1,18 @@
 // all function related to the map
 
 import * as dt from './datetime.js'
+import * as chart_live from "./chart_live.js";
 
-let map
+let map = null
 let bounds
 let popuptext = ''
+let clickedSensor = 0
 
 const colorscale = ['#d53e4f', '#fc8d59', '#fee08b', '#e6f598', '#99d594', '#3288bd', '#808080'];
 const dba = [100, 80, 60, 40, 20, 0, -999];
 
 export const showMap = async (params) => {
+    if (map) return
     map = L.map('map',{ scrollWheelZoom: false}).setView(params.center, parseInt(params.zoom))
     L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
         maxZoom: 19,
@@ -37,8 +40,21 @@ export const showMap = async (params) => {
         return div
     };
     legend.addTo(map)
+
     let lastdate = await buildMarkers()
     showLastDate(lastdate);
+
+    map.on('popupopen', function () {
+        document.querySelector('.speciallink').addEventListener('click', async function (x) {
+            console.log(`Event clicked: ${clickedSensor}`)
+            document.querySelector('#navi').style.display = 'block'
+            params.sid = clickedSensor
+            let triggerEl = document.querySelector('#livetab')
+            bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name
+            await chart_live.showLive(params)
+        })
+    })
+
 }
 
 
@@ -59,81 +75,7 @@ function calcPolygon(bounds) {
     });
     ;
 }
-/*
-async function plotMap(cid, poly) {
-    // if sensor nbr is give, find coordinates, else use Stuttgart center
-    debug_log('plotMap()');
-    let myLatLng;
-    if (cid != -1) {
-        myLatLng = await getSensorKoords(cid);
-    } else {
-        let stgt = await getCoords('Stuttgart');
-        myLatLng = {lat: parseFloat(stgt.lat), lng: parseFloat(stgt.lon)};
-    }
 
-    // generate map centered on Stuttgart
-    map = L.map('map').setView(myLatLng, firstZoom);
-
-    L.tileLayer('https://{s}.tile.openstreetmap.de/{z}/{x}/{y}.png', {
-        maxZoom: 17,
-        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-    }).addTo(map);
-
-    bounds = map.getBounds();
-
-    map.scrollWheelZoom.disable();
-
-    map.on('moveend', async function () {
-        bounds = map.getBounds();
-        await buildMarkers(bounds)
-    });
-
-
-    let legend = L.control({position: 'bottomright'});
-    legend.onAdd = function (map) {
-        let div = L.DomUtil.create('div', 'info legend');
-        let div_color = L.DomUtil.create('div', 'info legend inner', div);
-        div_color.innerHTML += 'dbA<br />';
-        // loop through our density intervals and generate a label with a colored square for each interval
-        for (let i = 0; i < dba.length - 1; i++) {
-            div_color.innerHTML +=
-                '<i style="background:' + colorscale[i] + '"></i>' +
-                '&nbsp;&nbsp;' + dba[i] + (i == 0 ? '+' : '') + '<br />';
-        }
-        div_color.innerHTML += '&nbsp;<i style="background:' + getColor(dba[dba.length - 1]) + '"></i> offline';
-        return div;
-    };
-    legend.addTo(map);
-
-    let infobutton = L.control({position: 'topright'});
-    infobutton.onAdd = function (map) {
-        let div = L.DomUtil.create('div');
-        div.innerHTML = '<button class="cb centerbutt">neu zentrieren</button>';
-        div.onclick = function () {
-            dialogCenter.dialog('open');
-            console.log('Clicked on Zentrieren');
-        }
-        return div;
-    }
-    infobutton.addTo(map);
-
-    if (useStgtBorder) {
-        fetchStuttgartBounds();
-    }
-
-    if (myLatLng.error != undefined) {
-        showError(3, "Kein Lärmsensor", cid);
-    } else {
-        await buildMarkers(bounds);
-        map.on('popupopen', function () {
-            $('.speciallink').click(function (x) {
-                showGrafik(clickedSensor);
-            });
-        });
-    }
-
-}
-*/
 
 // With all Markers in cluster (markers) calculate the median
 // of the values. With this median fetch the color and return it.
@@ -212,7 +154,7 @@ export async function buildMarkers() {
         west: bounds.getWest(), south: bounds.getSouth(),
         east: bounds.getEast(), north: bounds.getNorth()
     }
-    const url = `http://localhost:3004/getmapdata?type=noise&box=${bounds.toBBoxString()}`
+    const url = `/api/getmapdata?type=noise&box=${bounds.toBBoxString()}`
 
     let ret = await fetch(url)
         .catch(e => {
@@ -235,6 +177,9 @@ export async function buildMarkers() {
     });
 
     for (let x of sensors.values) {
+        if (x.value <= -4) {
+            continue
+        }
         let marker = L.marker([x.location[1], x.location[0]], {
             icon: new L.Icon({
                 iconUrl: buildIcon(getColor(parseInt(x.value)),0,x.indoor),
@@ -256,7 +201,7 @@ export async function buildMarkers() {
 
 async function onMarkerClick(e, click) {
     let item = e.target.options;
-    let clickedSensor = item.name;
+    clickedSensor = item.name;
 
     let offlinetext = `
 <tr><td colspan="2"><span style="color:red;">offline</span></td></tr>
@@ -283,6 +228,7 @@ async function onMarkerClick(e, click) {
     if (click == true) {                                 // if we clicked
         e.target.closePopup();                          // show the popup
     }
+
 }
 
 async function getCoords(city) {
@@ -328,7 +274,7 @@ async function showLastDate(ld) {
     //     console.log(e)
     // }
     // fetch all sensors
-    const url = `http://localhost:3004/getmapdata?type=noise`
+    const url = `/api/getmapdata?type=noise`
     let ret = await fetch(url)
         .catch(e => {
             console.log(e)