Style points for each date and add popup

public/js/functions.js

@@ -2,7 +2,7 @@
  * Copyright 2021 - All rights reserved.
  * Rodrigo Tapia-McClung
  *
- * February 2021
+ * February-June 2021
  */
 
 /* global mapboxgl, turf */
@@ -53,12 +53,12 @@ let map = new mapboxgl.Map({
     "style": "mapbox://styles/mapbox/dark-v10",
     "center": [-99.17, 19.36],
     "zoom": 10,
-    "maxZoom": 20
+    "maxZoom": 14
 });
 
 map.addControl(new mapboxgl.NavigationControl());
 
-// TODO: display mor friendly dates
+// TODO: display more friendly dates
 const dateTimeOptions = {
     weekday: "short",
     day: "numeric",
@@ -73,7 +73,7 @@ const dateTimeOptions = {
 };
 
 //let myDate = "1577919600000";
-let myDate = "1605218400000";
+//let myDate = "1605218400000";
 
 const range = (start, stop, step = 1) =>
     Array(Math.ceil((stop - start) / step)).fill(start).map((x, y) => x + y * step);
@@ -96,17 +96,31 @@ const makeSurface = date => {
     // filter data for given date value
     let subdata = ozono.map(d => { return {time: d["time"], [date]: d[date]} });
     let maxValue = Math.max.apply(Math, subdata.map( d=> d[date]));
-
     // assign corresponding value to each station
     turf.featureEach(estaciones, point => {
         let stationData = subdata.filter( i => i.time == point.properties.cve_estac);
         point.properties.calidad = stationData[0] && parseFloat(stationData[0][date]) != -99 ? parseFloat(stationData[0][date]) : 0;
+        // use value to style station dot
+        map.setFeatureState(
+            {
+                // source tileset and source layer
+                source: "estaciones",
+                sourceLayer: "estaciones",
+                // unique ID row name
+                id: point.properties.cve_estac
+            },
+            // Add rows you want to style/interact with
+            {
+                calidad: point.properties.calidad
+                //candidate: row.candidate,
+            }
+        );
     });
 
     let options = {gridType: "point", property: "calidad", units: "kilometers", weight: 2};
-    let grid = turf.interpolate(estaciones, .75, options);
+    let grid = turf.interpolate(estaciones, 0.75, options);
 
-    let breaks = range(2, maxValue + 1, 5);
+    let breaks = range(0, maxValue != -99 ? maxValue : 0 + 1, 5);
     //let lines = turf.isolines(grid, breaks, {zProperty: "calidad"});
     let bValues = breaks.map( b => { return {value: b} });
     let bands = turf.isobands(grid, breaks, {zProperty: "calidad", breaksProperties: bValues});
@@ -166,9 +180,8 @@ map.on("style.load", async () => {
             playing = false;
             clearInterval(animate);
         }
-    })
+    });
     ozonoPromise.then( results => {
-        let expression = ["match", ["get", "cve_estac"]];
         ozono = results.data;
         fechas = Object.keys(ozono[0]).slice(1,-1).map(d => parseInt(d));
         slider.min = fechas[0];
@@ -177,19 +190,21 @@ map.on("style.load", async () => {
         slider.value = slider.min;
         datetimeLabel.textContent = new Date(fechas[0]);
         //datetimeLabel.textContent = new Intl.DateTimeFormat('es-MX', dateTimeOptions).format(new Date(fechas[0]));
-        let maxValue = Math.max.apply(Math, ozono.map( d=> d[myDate])); // FIXME calculate real max value
+        // calculate max value from data
+        let maxValue = Math.max(...ozono.map( d => Object.values(d)).flat().filter(val => !isNaN(val)));
+        /*let expression = ["match", ["get", "cve_estac"]];
         results.data.forEach( row => {
             map.setFeatureState(
                 {
                     // source tileset and source layer
                     source: "estaciones",
                     sourceLayer: "estaciones",
-                    // unqiue ID row name
+                    // unique ID row name
                     id: row.time
                 },
                 // Add rows you want to style/interact with
                 {
-                    date: parseFloat(row[myDate])
+                    calidad: parseFloat(row[fechas[0]]) != -99 ? parseFloat(row[fechas[0]]) : 0
                     //candidate: row.candidate,
                 }
             );
@@ -197,7 +212,7 @@ map.on("style.load", async () => {
             var color = "rgba(" + 0 + ", " + green + ", " + 0 + ", 1)";
             expression.push(row["time"], color);
         });
-        expression.push("rgba(0,0,0,0)");
+        expression.push("rgba(0,0,0,0)");*/
 
         map.addSource("cdmx", {
             "type": "geojson",
@@ -223,7 +238,19 @@ map.on("style.load", async () => {
             "paint": {
                 "circle-radius": 4,
                 //"circle-color": "#088",
-                "circle-color": expression,
+                //"circle-color": expression,
+                "circle-color": [
+                    "interpolate",
+                    ["linear"],
+                    //["get", "value"],
+                    ["feature-state", "calidad"],
+                    0, "rgb(0,0,0)",
+                    1, "rgb(0, 228, 0)",
+                    51, "rgb(255,255,0)",
+                    95, "rgb(255, 126, 0)",
+                    135, "rgb(255, 0, 0)",
+                    175, "rgb(143, 63, 151)"
+                ],
                 "circle-opacity": 0.5
             }
         });
@@ -244,7 +271,7 @@ map.on("style.load", async () => {
                     175, "rgb(143, 63, 151)"
                 ],
                 "fill-opacity": 0,
-                //"fill-antialias": false // use cotnour lines or not
+                //"fill-antialias": false // use contour lines or not
             }
         });
 
@@ -263,9 +290,18 @@ map.on("style.load", async () => {
                     135, "rgb(255, 0, 0)",
                     175, "rgb(143, 63, 151)"
                 ],
-                "fill-extrusion-height": ['*', ["get", "value"], 5],
+                //"fill-extrusion-height": ['*', ["get", "value"], 5],
+                "fill-extrusion-height": {
+                    property: "value",
+                    stops: [
+                        [{ zoom: 10, value: 0 }, 1],
+                        [{ zoom: 10, value: maxValue }, 1],
+                        [{ zoom: 14, value: 0 }, 1],
+                        [{ zoom: 14, value: maxValue }, 800]
+                    ]
+                },
                 "fill-extrusion-base": 0,
-                'fill-extrusion-height-transition':{
+                "fill-extrusion-height-transition": {
                     duration: 500,
                     delay: 0
                 },
@@ -273,18 +309,18 @@ map.on("style.load", async () => {
                     "interpolate",
                     ["linear"],
                     ["zoom"],
-                    15,
+                    10,
                     0,
-                    15.05,
+                    14,
                     ["get", "value"]
                 ],
                 "fill-extrusion-base": [
                     "interpolate",
                     ["linear"],
                     ["zoom"],
-                    15,
+                    10,
                     0,
-                    15.05,
+                    14,
                     ["get", "value"]
                 ],*/
                 "fill-extrusion-opacity": 0.5
@@ -293,6 +329,34 @@ map.on("style.load", async () => {
 
         makeSurface(fechas[0]);
 
+        // Create popup
+        let popup = new mapboxgl.Popup({
+            closeButton: false,
+            closeOnClick: false
+        });
+
+        // What happens on hover on layer
+        map.on("mouseenter", "estaciones-circle", e => {
+            map.getCanvas().style.cursor = "pointer";
+
+            let coordinates = e.features[0].geometry.coordinates.slice();
+            let cve_estac = e.features[0].properties.cve_estac;
+            let estacion = e.features[0].properties.nom_estac;
+            let calidad = e.features[0].state.calidad != undefined ? e.features[0].state.calidad : '--';
+
+            // Set values and display popup
+            popup
+                .setLngLat(coordinates)
+                .setHTML("Estación: " + estacion + "<br/>Clave: " + cve_estac + "<br/>Valor: " + calidad)
+                .addTo(map);
+        });
+
+        // Remove popup on mouse out
+        map.on("mouseleave", "estaciones-circle", () => {
+            map.getCanvas().style.cursor = "";
+            popup.remove();
+        });
+
         // bring circle layer to top
         map.moveLayer("estaciones-circle");
     });