Skip to content

A
aire-cdmx
Commit c3149bdf authored by Rodrigo Tapia-McClung's avatar Rodrigo Tapia-McClung
Browse files
Options

Style points for each date and add popup

parent e07c2006
Hide whitespace changes
Inline Side-by-side
Showing with 85 additions and 21 deletions
public/js/functions.js
View file @ c3149bdf
......@@ -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");
});
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment