Skip to content

F
fordecyt_2019
Commit b6b23002 authored by Rodrigo Tapia-McClung's avatar Rodrigo Tapia-McClung
Browse files
Options

Big code and style clean up

parent 7456fdbd
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 260 additions and 1691 deletions
public/js/centropais_basemap.js
View file @ b6b23002
This diff is collapsed.
public/js/centropais_charts.js
View file @ b6b23002
This diff is collapsed.
public/js/centropais_functions.js
View file @ b6b23002
This diff is collapsed.
public/js/cuerpos_basemap.js
View file @ b6b23002
...@@ -6,11 +6,9 @@ ...@@ -6,11 +6,9 @@
*/ */
/* global Promise, omnivore, JSZip, map, layerControl */ /* global Promise, omnivore, JSZip, map, layerControl */
/* exported makeBaseMap, baseLayerPromises, drawnItems */ /* exported makeBaseMap */
/* Lines related to displaying loading bar are commented */ let baseLayerPromises = [];
let baseLayerPromises = [], drawnItems;
// function to read compressed json and create a leaflet layer // function to read compressed json and create a leaflet layer
const zip2Lyr = (zipFile, layerName, layerTemplate) => { const zip2Lyr = (zipFile, layerName, layerTemplate) => {
...@@ -55,7 +53,7 @@ const createPane = (layerPane, zIndex) => { ...@@ -55,7 +53,7 @@ const createPane = (layerPane, zIndex) => {
map.getPane(layerPane).style["mix-blend-mode"] = "normal"; map.getPane(layerPane).style["mix-blend-mode"] = "normal";
} }
let descargas, presas, tuxtlaVH, zms, anps; let descargas, puentes, presas, cuencas, tuxtlaVH, zms, anps;
// *** WMS INEGI *** // *** WMS INEGI ***
// NOMBRES DE CUERPOS DE AGUA // NOMBRES DE CUERPOS DE AGUA
...@@ -97,14 +95,8 @@ let layer_limiteMunicipal= new L.tileLayer.wms("http://gaia.inegi.org.mx/NLB/tun ...@@ -97,14 +95,8 @@ let layer_limiteMunicipal= new L.tileLayer.wms("http://gaia.inegi.org.mx/NLB/tun
let layer_puentes = new L.geoJson(null, { let layer_puentes = new L.geoJson(null, {
attribution: "", attribution: "",
pane: "pane_puentes", pane: "pane_puentes",
//onEachFeature: pop_puentes,
pointToLayer: (_feature, latlng) => { pointToLayer: (_feature, latlng) => {
// var context = {
// feature: feature,
// variables: {}
// };
let puenteMarker = L.BeautifyIcon.icon({ let puenteMarker = L.BeautifyIcon.icon({
// icon: "grip-lines-vertical",
icon: "puente", icon: "puente",
iconSize: [0, 0], iconSize: [0, 0],
iconAnchor: [7, 10], iconAnchor: [7, 10],
...@@ -125,12 +117,7 @@ let layer_puentes = new L.geoJson(null, { ...@@ -125,12 +117,7 @@ let layer_puentes = new L.geoJson(null, {
let layer_descargas = new L.geoJson(null, { let layer_descargas = new L.geoJson(null, {
attribution: "", attribution: "",
pane: "pane_descargas", pane: "pane_descargas",
//onEachFeature: pop_descargas,
pointToLayer: (_feature, latlng) => { pointToLayer: (_feature, latlng) => {
// let context = {
// feature: feature,
// variables: {}
// };
let descargasMarker = L.BeautifyIcon.icon({ let descargasMarker = L.BeautifyIcon.icon({
icon: "desechos", icon: "desechos",
iconSize: [0, 0], iconSize: [0, 0],
...@@ -152,12 +139,7 @@ let layer_descargas = new L.geoJson(null, { ...@@ -152,12 +139,7 @@ let layer_descargas = new L.geoJson(null, {
let layer_presas = new L.geoJson(null, { let layer_presas = new L.geoJson(null, {
attribution: "", attribution: "",
pane: "pane_presas", pane: "pane_presas",
//onEachFeature: pop_presas,
pointToLayer: (_feature, latlng) => { pointToLayer: (_feature, latlng) => {
// let context = {
// feature: feature,
// variables: {}
// };
let presasMarker = L.BeautifyIcon.icon({ let presasMarker = L.BeautifyIcon.icon({
icon: "presa", icon: "presa",
iconSize: [0, 0], iconSize: [0, 0],
...@@ -194,7 +176,6 @@ const style_cuencas = () => { ...@@ -194,7 +176,6 @@ const style_cuencas = () => {
let layer_cuencas = new L.geoJson(null, { let layer_cuencas = new L.geoJson(null, {
attribution: "", attribution: "",
pane: "pane_cuencas", pane: "pane_cuencas",
//onEachFeature: pop_cuencas,
style: style_cuencas style: style_cuencas
}); });
...@@ -214,7 +195,6 @@ const style_limZMs = () => { ...@@ -214,7 +195,6 @@ const style_limZMs = () => {
let layer_limZMs = new L.geoJson(null, { let layer_limZMs = new L.geoJson(null, {
attribution: "", attribution: "",
pane: "pane_limZMs", pane: "pane_limZMs",
//onEachFeature: pop_limZMs,
style: style_limZMs style: style_limZMs
}); });
...@@ -233,7 +213,6 @@ const style_ZMs = feature => { ...@@ -233,7 +213,6 @@ const style_ZMs = feature => {
fillOpacity: 1, fillOpacity: 1,
fillColor: "rgba(139,60,0,0.6)" fillColor: "rgba(139,60,0,0.6)"
} }
//break;
case "Villahermosa": case "Villahermosa":
return { return {
pane: "pane_ZMs", pane: "pane_ZMs",
...@@ -247,14 +226,12 @@ const style_ZMs = feature => { ...@@ -247,14 +226,12 @@ const style_ZMs = feature => {
fillOpacity: 1, fillOpacity: 1,
fillColor: "rgba(207,152,62,0.6)" fillColor: "rgba(207,152,62,0.6)"
} }
//break;
} }
} }
let layer_ZMs = new L.geoJson(null, { let layer_ZMs = new L.geoJson(null, {
attribution: "", attribution: "",
pane: "pane_ZMs", pane: "pane_ZMs",
//onEachFeature: pop_ZMs,
style: style_ZMs style: style_ZMs
}); });
...@@ -276,7 +253,6 @@ const style_ANPs = () => { ...@@ -276,7 +253,6 @@ const style_ANPs = () => {
let layer_ANPs = new L.geoJson(null, { let layer_ANPs = new L.geoJson(null, {
attribution: "", attribution: "",
pane: "pane_ANPs", pane: "pane_ANPs",
//onEachFeature: pop_ANPs,
style: style_ANPs style: style_ANPs
}); });
...@@ -295,12 +271,14 @@ const makeBaseMap = () => { ...@@ -295,12 +271,14 @@ const makeBaseMap = () => {
createPane("pane_wbnames",421); createPane("pane_wbnames",421);
layerControl.addOverlay(layer_nombresWB, "Nombres cuerpos de agua"); layerControl.addOverlay(layer_nombresWB, "Nombres cuerpos de agua");
zip2Lyr("../grijalva/data/puentes.zip", puentes, layer_puentes);
layerControl.addOverlay(layer_puentes, "&nbsp; <i class=\"fa fa-puente\" style=\"color:#808080;margin-top:3px; margin-left:0px;font-size: 10px;\"></i> &nbsp;Puentes"); layerControl.addOverlay(layer_puentes, "&nbsp; <i class=\"fa fa-puente\" style=\"color:#808080;margin-top:3px; margin-left:0px;font-size: 10px;\"></i> &nbsp;Puentes");
layerControl.addOverlay(layer_RedNacionalCaminos, "Red nacional de caminos <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src=\"http://gaia.inegi.org.mx/NLB/tunnel/wms/mdm6wms?map=/opt/map/mdm60/mdm61leyendaprueba.map&Request=GetLegendGraphic&format=image/png&Version=1.1.1&Service=WMS&LAYER=c200\" alt=\"Red Nacional de Caminos\"/>"); layerControl.addOverlay(layer_RedNacionalCaminos, "Red nacional de caminos <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src=\"http://gaia.inegi.org.mx/NLB/tunnel/wms/mdm6wms?map=/opt/map/mdm60/mdm61leyendaprueba.map&Request=GetLegendGraphic&format=image/png&Version=1.1.1&Service=WMS&LAYER=c200\" alt=\"Red Nacional de Caminos\"/>");
zip2Lyr("../grijalva/data/descargas.zip", descargas, layer_descargas); zip2Lyr("../grijalva/data/descargas.zip", descargas, layer_descargas);
layerControl.addOverlay(layer_descargas, "&nbsp; <i class=\"fa fa-desechos\" style=\"color:#808080;margin-top:3px;margin-left:0px;font-size: 12px;opacity:0.75;\"></i>&nbsp;&nbsp;Descargas residuales municipales e industriales"); layerControl.addOverlay(layer_descargas, "&nbsp; <i class=\"fa fa-desechos\" style=\"color:#808080;margin-top:3px;margin-left:0px;font-size: 12px;opacity:0.75;\"></i>&nbsp;&nbsp;Descargas residuales municipales e industriales");
zip2Lyr("../grijalva/data/presas.zip", presas, layer_presas); zip2Lyr("../grijalva/data/presas.zip", presas, layer_presas);
layerControl.addOverlay(layer_presas, "&nbsp; <i class=\"fa fa-presa\" style=\"color:#808080;margin-top:3px; margin-left:0px;font-size: 12px;\"></i> Presas principales"); layerControl.addOverlay(layer_presas, "&nbsp; <i class=\"fa fa-presa\" style=\"color:#808080;margin-top:3px; margin-left:0px;font-size: 12px;\"></i> Presas principales");
zip2Lyr("../grijalva/data/cuencas.zip", cuencas, layer_cuencas);
layerControl.addOverlay(layer_cuencas, "&nbsp; <svg height=\"15\" width=\"15\"><path d=\"M0 0 L15 0 L15 10 L0 10 Z \" x=\"5\" y=\"5\" fill=\"rgba(213,190,245,0.5)\" stroke=\"rgba(0,0,0,0.25)\" stroke-dasharray=\" \"></rect></svg> Cuenca y subcuencas del Grijalva, CONAGUA 2017"); layerControl.addOverlay(layer_cuencas, "&nbsp; <svg height=\"15\" width=\"15\"><path d=\"M0 0 L15 0 L15 10 L0 10 Z \" x=\"5\" y=\"5\" fill=\"rgba(213,190,245,0.5)\" stroke=\"rgba(0,0,0,0.25)\" stroke-dasharray=\" \"></rect></svg> Cuenca y subcuencas del Grijalva, CONAGUA 2017");
layerControl.addOverlay(layer_locUrban, "<img src=\"http://gaia.inegi.org.mx/NLB/tunnel/wms/mdm6wms?map=/opt/map/mdm60/mdm61leyendaprueba.map&Request=GetLegendGraphic&format=image/png&Version=1.1.1&Service=WMS&LAYER=c102\" alt=\"Localidades urbanas\"/>"); layerControl.addOverlay(layer_locUrban, "<img src=\"http://gaia.inegi.org.mx/NLB/tunnel/wms/mdm6wms?map=/opt/map/mdm60/mdm61leyendaprueba.map&Request=GetLegendGraphic&format=image/png&Version=1.1.1&Service=WMS&LAYER=c102\" alt=\"Localidades urbanas\"/>");
zip2Lyr("../grijalva/data/limites_TG_V.zip", tuxtlaVH, layer_limZMs); zip2Lyr("../grijalva/data/limites_TG_V.zip", tuxtlaVH, layer_limZMs);
......
public/js/cuerpos_charts.js
View file @ b6b23002
...@@ -6,20 +6,20 @@ ...@@ -6,20 +6,20 @@
*/ */
/* globals updateBarChartOnHover, barChartData, am4charts, am4core, am4themes_animated, yearList */ /* globals updateBarChartOnHover, barChartData, am4charts, am4core, am4themes_animated, yearList */
/* export makeRadarChart, makeLineChart, makeAreaChart, makeBarChart, */ /* export makeRadarChart, makeLineChart, makeAreaChart, makeBarChart */
//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ //+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
function grijalva_theme(target) { const grijalva_theme = target => {
if (target instanceof am4core.ColorSet) { if (target instanceof am4core.ColorSet) {
target.list = [ target.list = [
am4core.color("#00c5ff"), am4core.color("#00c5ff"),
am4core.color("#ff5500"), am4core.color("#ff5500"),
am4core.color("#98e600"), am4core.color("#98e600")
]; ];
} }
} }
function customizeGrip(grip) { const customizeGrip = grip => {
// Remove default grip image // Remove default grip image
grip.icon.disabled = true; grip.icon.disabled = true;
...@@ -39,10 +39,10 @@ function customizeGrip(grip) { ...@@ -39,10 +39,10 @@ function customizeGrip(grip) {
// Themes begin // Themes begin
am4core.useTheme(am4themes_animated); am4core.useTheme(am4themes_animated);
am4core.useTheme(grijalva_theme); am4core.useTheme(grijalva_theme);
//let mainTextColor = getComputedStyle(document.body).getPropertyValue('--main-text-color'); //let mainTextColor = getComputedStyle(document.body).getPropertyValue("--main-text-color");
// Themes end // Themes end
let mainTextColor = getComputedStyle(document.body).getPropertyValue('--main-text-color'); let mainTextColor = getComputedStyle(document.body).getPropertyValue("--main-text-color");
const makeRadarSeries = (chart, value, category, name, color) => { const makeRadarSeries = (chart, value, category, name, color) => {
let radarSeries = chart.series.push(new am4charts.RadarSeries()); let radarSeries = chart.series.push(new am4charts.RadarSeries());
...@@ -98,10 +98,10 @@ const makeDateRange = (axis, start, width, color) => { ...@@ -98,10 +98,10 @@ const makeDateRange = (axis, start, width, color) => {
yearList.forEach( y => { yearList.forEach( y => {
let range = axis.axisRanges.create(); let range = axis.axisRanges.create();
range.date = new Date(y, start, 1, 0, 0, 0); range.date = new Date(y, start, 1, 0, 0, 0);
range.endDate = new Date(y, start+width, 1, 0, 0, 0); range.endDate = new Date(y, start + width, 1, 0, 0, 0);
range.axisFill.fill = am4core.color(color); range.axisFill.fill = am4core.color(color);
range.axisFill.fillOpacity = 0.4; range.axisFill.fillOpacity = 0.4;
}) });
} }
const makeAreaSeries = (chart, field, name) => { const makeAreaSeries = (chart, field, name) => {
...@@ -201,9 +201,9 @@ const makeRadarChart = (data, months, years) => { ...@@ -201,9 +201,9 @@ const makeRadarChart = (data, months, years) => {
//radarCategoryAxis.cursorTooltipEnabled = false; //radarCategoryAxis.cursorTooltipEnabled = false;
//FIXME: some months are not showing the appropriate name on tooltip on hover //FIXME: some months are not showing the appropriate name on tooltip on hover
// in the meantime this is way around to fix cursor columns and not show wrong // in the meantime this is a way around to fix cursor columns and not show wrong
// month tooltips // month tooltips
radarChart.cursor.events.on("cursorpositionchanged", function(ev) { radarChart.cursor.events.on("cursorpositionchanged", ev => {
let categoryAxis = ev.target.chart.xAxes.getIndex(0); let categoryAxis = ev.target.chart.xAxes.getIndex(0);
categoryAxis.tooltip.hide(); categoryAxis.tooltip.hide();
}); });
...@@ -339,7 +339,7 @@ const makeAreaChart = (data) => { ...@@ -339,7 +339,7 @@ const makeAreaChart = (data) => {
/* Set up cursor behavior */ /* Set up cursor behavior */
let previousDate = ""; let previousDate = "";
areaChart.cursor.events.on("cursorpositionchanged", function(ev) { areaChart.cursor.events.on("cursorpositionchanged", ev => {
let dateAxis = ev.target.chart.xAxes.getIndex(0); let dateAxis = ev.target.chart.xAxes.getIndex(0);
let yy = dateAxis.positionToDate(dateAxis.toAxisPosition(ev.target.xPosition)).getFullYear().toString(); let yy = dateAxis.positionToDate(dateAxis.toAxisPosition(ev.target.xPosition)).getFullYear().toString();
let mm = dateAxis.positionToDate(dateAxis.toAxisPosition(ev.target.xPosition)).getMonth().toString(); let mm = dateAxis.positionToDate(dateAxis.toAxisPosition(ev.target.xPosition)).getMonth().toString();
......
public/js/cuerpos_functions.js
View file @ b6b23002
...@@ -81,7 +81,6 @@ const setupDates = () => { ...@@ -81,7 +81,6 @@ const setupDates = () => {
dateArray = dateArray.sort(sortInitialDateAscending); // order dates dateArray = dateArray.sort(sortInitialDateAscending); // order dates
dateMin = d3.min(dateArray); dateMin = d3.min(dateArray);
dateMax = d3.max(dateArray); dateMax = d3.max(dateArray);
//userFiles = dateArray.map( month => timeFormat(month)); // order table names by date
const dates = { min: dateMin, max: dateMax, dates: dateArray }; const dates = { min: dateMin, max: dateMax, dates: dateArray };
resolve(dates); resolve(dates);
...@@ -307,8 +306,8 @@ const populateMap = async (mapData) => { ...@@ -307,8 +306,8 @@ const populateMap = async (mapData) => {
}); });
glmap = L.mapboxGL({ glmap = L.mapboxGL({
accessToken: "no-token", "accessToken": "no-token",
style: { "style": {
"version": 8, "version": 8,
"sources": {}, "sources": {},
"layers": [] "layers": []
...@@ -319,11 +318,10 @@ const populateMap = async (mapData) => { ...@@ -319,11 +318,10 @@ const populateMap = async (mapData) => {
glmap.getMapboxMap().on("style.load", () => { glmap.getMapboxMap().on("style.load", () => {
glmap.getMapboxMap().addSource("basecuerposagua", { glmap.getMapboxMap().addSource("basecuerposagua", {
type: "vector", "type": "vector",
//tiles: [`${baseUrl}/basecuerposagua/mvt/{z}/{x}/{y}?geom_column=geom&columns=${indicators.join()},descrip`], "tiles": [`${baseUrl}/basecuerposagua/mvt/{z}/{x}/{y}?geom_column=geom&columns=descrip`],
tiles: [`${baseUrl}/basecuerposagua/mvt/{z}/{x}/{y}?geom_column=geom&columns=descrip`], "maxzoom": 14,
maxzoom: 14, "minzoom": 7
minzoom: 7
}); });
glmap.getMapboxMap().addLayer({ glmap.getMapboxMap().addLayer({
...@@ -408,7 +406,6 @@ const updateMap = (mapData) => { ...@@ -408,7 +406,6 @@ const updateMap = (mapData) => {
userFiles.forEach(monthYear => { userFiles.forEach(monthYear => {
if (Object.keys(allTiles).includes(monthYear)) { if (Object.keys(allTiles).includes(monthYear)) {
currentTiles[monthYear] = allTiles[monthYear]; // recover tile if it has already been created currentTiles[monthYear] = allTiles[monthYear]; // recover tile if it has already been created
//currentJSONs[monthYear] = allJSONs[monthYear]; // recover json if it has already been created
return; // if file has already been processed, exit return; // if file has already been processed, exit
} else { // if file cannot be found in allTiles, then add 1 to the number of files to process } else { // if file cannot be found in allTiles, then add 1 to the number of files to process
let newTile = mapboxLayer(monthYear); let newTile = mapboxLayer(monthYear);
...@@ -424,20 +421,19 @@ const updateMap = (mapData) => { ...@@ -424,20 +421,19 @@ const updateMap = (mapData) => {
timeLayer._timeDimension.setCurrentTime(mapData.min); timeLayer._timeDimension.setCurrentTime(mapData.min);
} }
// define MVT layer for given month table and all indicators // define MVT layer for given month table and description
const mapboxLayer = (monthYear) => { const mapboxLayer = (monthYear) => {
let pbfLayer = { let pbfLayer = {
id: monthYear, "id": monthYear,
source: { "source": {
type: "vector", "type": "vector",
//tiles: [`${baseUrl}/${monthYear}/mvt/{z}/{x}/{y}?geom_column=geom&columns=${indicators.join()},descrip`], "tiles": [`${baseUrl}/${monthYear}/mvt/{z}/{x}/{y}?geom_column=geom&columns=descrip`],
tiles: [`${baseUrl}/${monthYear}/mvt/{z}/{x}/{y}?geom_column=geom&columns=descrip`], "maxzoom": 14,
maxzoom: 14, "minzoom": 7
minzoom: 7
}, },
"source-layer": monthYear, "source-layer": monthYear,
type: "fill", "type": "fill",
"paint": { "paint": {
"fill-opacity": 0, "fill-opacity": 0,
"fill-color": ["match", ["get", "descrip"], "fill-color": ["match", ["get", "descrip"],
...@@ -583,7 +579,7 @@ const makeCharts = () => { ...@@ -583,7 +579,7 @@ const makeCharts = () => {
// create sets of unique months and years // create sets of unique months and years
yearList = [... new Set(userDates.map( date => new Date(date).getFullYear() ))]; yearList = [... new Set(userDates.map( date => new Date(date).getFullYear() ))];
let allYears = [... new Set(dateArray.map( date => new Date(date).getFullYear() ))]; let allYears = [... new Set(dateArray.map( date => new Date(date).getFullYear() ))];
//let formatter = new Intl.DateTimeFormat('es', { month: 'long' }); //let formatter = new Intl.DateTimeFormat("es", { month: "long" });
// RADAR CHART // RADAR CHART
// async queries for each date that has been loaded // async queries for each date that has been loaded
...@@ -707,8 +703,8 @@ const updateBarChartOnHover = (filterDate, data) => { ...@@ -707,8 +703,8 @@ const updateBarChartOnHover = (filterDate, data) => {
popBarsChart.data = cart_pb1; popBarsChart.data = cart_pb1;
popBarsChart.invalidateRawData(); popBarsChart.invalidateRawData();
// set barChart title when hovering on different bars // set barChart title when hovering on different bars
let ye = new Intl.DateTimeFormat('es', { year: 'numeric' }).format(filterDate); let ye = new Intl.DateTimeFormat("es", { year: "numeric" }).format(filterDate);
let mo = new Intl.DateTimeFormat('es', { month: 'short' }).format(filterDate); let mo = new Intl.DateTimeFormat("es", { month: "short" }).format(filterDate);
popBarsChart.titles.values[0].text = `Conteo por tipo de cuerpo en ${mo} ${ye}`; popBarsChart.titles.values[0].text = `Conteo por tipo de cuerpo en ${mo} ${ye}`;
// TODO: update barChart when changing dates on timeDimension? // TODO: update barChart when changing dates on timeDimension?
} }
......
public/js/evolucion_urbana.js
View file @ b6b23002
...@@ -46,7 +46,6 @@ const setupMap = (dates) => { ...@@ -46,7 +46,6 @@ const setupMap = (dates) => {
attribution: "Map tiles by Carto, under CC BY 3.0. Data by OpenStreetMap, under ODbL." attribution: "Map tiles by Carto, under CC BY 3.0. Data by OpenStreetMap, under ODbL."
}); });
//let bounds = cuencaBufferMask.getBounds();
let southWest = L.latLng(19.87, -102.87), let southWest = L.latLng(19.87, -102.87),
northEast = L.latLng(23.02, -99.31), northEast = L.latLng(23.02, -99.31),
bounds = L.latLngBounds(southWest, northEast); bounds = L.latLngBounds(southWest, northEast);
...@@ -115,9 +114,9 @@ const setupMap = (dates) => { ...@@ -115,9 +114,9 @@ const setupMap = (dates) => {
}); });
const offsetGlobal = (center, zoom, refMap, tgtMap) => { const offsetGlobal = (center, zoom, refMap, tgtMap) => {
var refC = refMap.getContainer(); let refC = refMap.getContainer();
var tgtC = tgtMap.getContainer(); let tgtC = tgtMap.getContainer();
var pt = refMap.project(center, zoom) let pt = refMap.project(center, zoom)
.subtract([refC.offsetLeft, refC.offsetTop]) .subtract([refC.offsetLeft, refC.offsetTop])
.subtract(refMap.getSize().divideBy(2)) .subtract(refMap.getSize().divideBy(2))
.add([tgtC.offsetLeft, tgtC.offsetTop]) .add([tgtC.offsetLeft, tgtC.offsetTop])
...@@ -137,8 +136,8 @@ const populateMap = async(mapData) => { ...@@ -137,8 +136,8 @@ const populateMap = async(mapData) => {
let map = mapData.map; let map = mapData.map;
glmap = L.mapboxGL({ glmap = L.mapboxGL({
accessToken: "no-token", "accessToken": "no-token",
style: { "style": {
"version": 8, "version": 8,
"sources": {}, "sources": {},
"layers": [] "layers": []
...@@ -149,7 +148,7 @@ const populateMap = async(mapData) => { ...@@ -149,7 +148,7 @@ const populateMap = async(mapData) => {
glmap.getMapboxMap().on("style.load", () => { glmap.getMapboxMap().on("style.load", () => {
glmap.getMapboxMap().addLayer(tiles); glmap.getMapboxMap().addLayer(tiles);
//glmap.getMapboxMap().setPaintProperty(tiles, "fill-opacity", 0.7) //glmap.getMapboxMap().setPaintProperty(tiles, "fill-opacity", 0.7);
timeDimensionControl.addTo(map); timeDimensionControl.addTo(map);
// Pass dummy geojson layer to timeDimension in order to register and sync // Pass dummy geojson layer to timeDimension in order to register and sync
...@@ -166,7 +165,7 @@ const populateMap = async(mapData) => { ...@@ -166,7 +165,7 @@ const populateMap = async(mapData) => {
"Carto Light": cartoLightLayer, "Carto Light": cartoLightLayer,
"OpenStreetMap": osmLayer "OpenStreetMap": osmLayer
}; };
var overlays = { let overlays = {
// "<span id=\"cuencaOverlay\">Agua en la cuenca del Grijalva</span>": timeLayer // "<span id=\"cuencaOverlay\">Agua en la cuenca del Grijalva</span>": timeLayer
}; };
...@@ -202,7 +201,6 @@ const populateMap = async(mapData) => { ...@@ -202,7 +201,6 @@ const populateMap = async(mapData) => {
} }
}); });
} }
//let html = `<div><h6>A&ntilde;o</h6></div><div class="colors", style="background: linear-gradient(to bottom, ${colors.join(",")})">`;
let html = "<div><h6>A&ntilde;o</h6></div><div class=\"colors\">"; let html = "<div><h6>A&ntilde;o</h6></div><div class=\"colors\">";
// create legend items // create legend items
years.forEach( y => { years.forEach( y => {
...@@ -225,38 +223,27 @@ const populateMap = async(mapData) => { ...@@ -225,38 +223,27 @@ const populateMap = async(mapData) => {
// define MVT layer for given table and all trimester column // define MVT layer for given table and all trimester column
const mapboxLayer = (table) => { const mapboxLayer = (table) => {
let pbfLayer = { let pbfLayer = {
id: table, "id": table,
source: { "source": {
type: "vector", "type": "vector",
tiles: [`${baseUrl}/${table}/mvt/{z}/{x}/{y}?geom_column=geom&columns=yeartrimes`], "tiles": [`${baseUrl}/${table}/mvt/{z}/{x}/{y}?geom_column=geom&columns=yeartrimes`],
maxzoom: 19, "maxzoom": 19,
minzoom: 6 "minzoom": 6
}, },
"source-layer": table, "source-layer": table,
type: "fill", "type": "fill",
"paint": { "paint": {
"fill-opacity": 0.7, "fill-opacity": 0.7,
"fill-color": [ "fill-color": [
"interpolate", "interpolate",
["linear"], ["linear"],
["get", "yeartrimes"], ["get", "yeartrimes"],
2014, "rgb(49,54,149)", 2014, "rgb(49,54,149)",
2016, "rgb(255,255,191)", 2016, "rgb(255,255,191)",
2019, "rgb(158,1,66)" 2019, "rgb(158,1,66)"
/*2014, "rgba(0, 255, 0, 0.5)", // green ]
2019, "rgba(255, 0, 0, 0.5)", // red*/
],/*
"fill-outline-color": [
"interpolate",
["linear"],
["get", "df"],
1, "rgba(255, 0, 0, 0.6)", // red
1.3, "rgba(0, 255, 0, 0.6)", // green
]*/
} }
} }
/*currentTiles[monthYear] = pbfLayer;
allTiles[monthYear] = pbfLayer;*/
return pbfLayer; return pbfLayer;
} }
...@@ -295,7 +282,6 @@ L.TimeDimension.Layer.Tile = L.TimeDimension.Layer.extend({ ...@@ -295,7 +282,6 @@ L.TimeDimension.Layer.Tile = L.TimeDimension.Layer.extend({
let tiArray = L.TimeDimension.Util.parseTimeInterval(this.options.timeInterval); let tiArray = L.TimeDimension.Util.parseTimeInterval(this.options.timeInterval);
let period = this.options.period || "P1D"; let period = this.options.period || "P1D";
let validTimeRange = this.options.validTimeRange || undefined; let validTimeRange = this.options.validTimeRange || undefined;
//alert("times");
return L.TimeDimension.Util.explodeTimeRange(tiArray[0], tiArray[1], period, validTimeRange); return L.TimeDimension.Util.explodeTimeRange(tiArray[0], tiArray[1], period, validTimeRange);
} else { } else {
return []; return [];
...@@ -338,7 +324,7 @@ L.TimeDimension.Layer.Tile = L.TimeDimension.Layer.extend({ ...@@ -338,7 +324,7 @@ L.TimeDimension.Layer.Tile = L.TimeDimension.Layer.extend({
return; return;
} }
var time = this._timeDimension.getCurrentTime(); let time = this._timeDimension.getCurrentTime();
//TODO: get current time, parse quarter and compare tile value. Incremental add over time //TODO: get current time, parse quarter and compare tile value. Incremental add over time
// get data for time // get data for time
...@@ -347,14 +333,12 @@ L.TimeDimension.Layer.Tile = L.TimeDimension.Layer.extend({ ...@@ -347,14 +333,12 @@ L.TimeDimension.Layer.Tile = L.TimeDimension.Layer.extend({
m = d.getUTCMonth(), m = d.getUTCMonth(),
yeartrimester = year + "." + (m / 3 + 1), yeartrimester = year + "." + (m / 3 + 1),
yearQ = `Q${m/3+1} ${year}`; yearQ = `Q${m/3+1} ${year}`;
//month = monthArray[m].toLowerCase(),
//monthYear = `${month}_${year}`;
// Update title // Update title
let title = $("#title"); let title = $("#title");
title.html(`<h2>Crecimiento urbano en la regi&oacute;n metropolitana centro pa&iacute;s en ${yearQ}</h2>`); title.html(`<h2>Crecimiento urbano en la regi&oacute;n metropolitana centro pa&iacute;s en ${yearQ}</h2>`);
// styleTiles based on yeartrimester value
// filter tiles based on yeartrimester value
let filter = ["<=", ["get", "yeartrimes"], parseFloat(yeartrimester)]; let filter = ["<=", ["get", "yeartrimes"], parseFloat(yeartrimester)];
glmap.getMapboxMap().setFilter("urbanization_year", filter); glmap.getMapboxMap().setFilter("urbanization_year", filter);
} }
......
public/js/evolucion_urbana_charts.js
View file @ b6b23002
...@@ -9,17 +9,15 @@ ...@@ -9,17 +9,15 @@
// amchart // amchart
am4core.ready(function() { am4core.ready(function() {
// am4core.useTheme(urban_theme);
let mainTextColor = getComputedStyle(document.body).getPropertyValue('--main-text-color'); let mainTextColor = getComputedStyle(document.body).getPropertyValue("--main-text-color");
// bar and line chart // bar and line chart
var chart = am4core.create("topChart", am4charts.XYChart); let chart = am4core.create("topChart", am4charts.XYChart);
let ctitle = chart.titles.create(); let ctitle = chart.titles.create();
ctitle.text = "Área urbanizada trimestralmente"; ctitle.text = "Área urbanizada trimestralmente";
ctitle.fontSize = 15; ctitle.fontSize = 15;
//title.marginBottom = 30;
ctitle.fill = am4core.color(mainTextColor); ctitle.fill = am4core.color(mainTextColor);
// Create axes // Create axes
...@@ -88,8 +86,6 @@ am4core.ready(function() { ...@@ -88,8 +86,6 @@ am4core.ready(function() {
valueAxisL.fontSize = 15; valueAxisL.fontSize = 15;
valueAxisL.renderer.labels.template.fontSize = 15; valueAxisL.renderer.labels.template.fontSize = 15;
//valueAxisL.calculateTotals = true; //valueAxisL.calculateTotals = true;
//valueAxisL.min = valueAxis3.minZoomed;
//valueAxisL.max = valueAxis3.maxZoomed;
// Modify chart's colors // Modify chart's colors
chart.colors.list = [ chart.colors.list = [
...@@ -163,12 +159,8 @@ am4core.ready(function() { ...@@ -163,12 +159,8 @@ am4core.ready(function() {
chart.legend.labels.template.fill = am4core.color(mainTextColor); chart.legend.labels.template.fill = am4core.color(mainTextColor);
//Add scrollbar //Add scrollbar
// chart.legend.labels.template.fill = am4core.color(mainTextColor);
chart.scrollbarX = new am4charts.XYChartScrollbar(); chart.scrollbarX = new am4charts.XYChartScrollbar();
// chart.scrollbarX.series.push(series3);
chart.scrollbarX.minHeight = 1; chart.scrollbarX.minHeight = 1;
//chart.scrollbarX.series.push(series3);
chart.scrollbarX.parent = chart.bottomAxesContainer; chart.scrollbarX.parent = chart.bottomAxesContainer;
// pie chart // pie chart
...@@ -223,7 +215,7 @@ am4core.ready(function() { ...@@ -223,7 +215,7 @@ am4core.ready(function() {
// Themes end // Themes end
var rchart = am4core.create("bottomRightChart", am4charts.RadarChart); let rchart = am4core.create("bottomRightChart", am4charts.RadarChart);
// chart.hiddenState.properties.opacity = 0; // this creates initial fade-in // chart.hiddenState.properties.opacity = 0; // this creates initial fade-in
let query_r = `${baseUrl}/query/${table}?columns=sum(area)/10000 as area,DATE_PART('month',date) as mm,concat('Q', DATE_PART('quarter',date)::text) as qq&group=mm,qq &sort=mm`; let query_r = `${baseUrl}/query/${table}?columns=sum(area)/10000 as area,DATE_PART('month',date) as mm,concat('Q', DATE_PART('quarter',date)::text) as qq&group=mm,qq &sort=mm`;
...@@ -238,8 +230,8 @@ am4core.ready(function() { ...@@ -238,8 +230,8 @@ am4core.ready(function() {
rchart.endAngle = rchart.startAngle + 180; rchart.endAngle = rchart.startAngle + 180;
// Create axes // Create axes
// var dateAxis = chart.xAxes.push(new am4charts.DateAxis()); // let dateAxis = chart.xAxes.push(new am4charts.DateAxis());
var dateAxis = rchart.xAxes.push(new am4charts.CategoryAxis()); let dateAxis = rchart.xAxes.push(new am4charts.CategoryAxis());
dateAxis.dataFields.category = "qq"; dateAxis.dataFields.category = "qq";
// dateAxis.baseInterval = { timeUnit: "month", count: 3 }; // dateAxis.baseInterval = { timeUnit: "month", count: 3 };
//dateAxis.renderer.innerRadius = am4core.percent(40); //dateAxis.renderer.innerRadius = am4core.percent(40);
...@@ -252,7 +244,7 @@ am4core.ready(function() { ...@@ -252,7 +244,7 @@ am4core.ready(function() {
dateAxis.cursorTooltipEnabled = false; dateAxis.cursorTooltipEnabled = false;
// dateAxis.calculateTotals = true; // dateAxis.calculateTotals = true;
var valueAxis = rchart.yAxes.push(new am4charts.ValueAxis()); let valueAxis = rchart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.inversed = true; valueAxis.renderer.inversed = true;
valueAxis.renderer.radius = am4core.percent(40); valueAxis.renderer.radius = am4core.percent(40);
valueAxis.renderer.minGridDistance = 15; valueAxis.renderer.minGridDistance = 15;
...@@ -265,7 +257,7 @@ am4core.ready(function() { ...@@ -265,7 +257,7 @@ am4core.ready(function() {
// valueAxis.calculateTotals = true; // valueAxis.calculateTotals = true;
//Add series //Add series
var columnSeries = rchart.series.push(new am4charts.RadarColumnSeries()); let columnSeries = rchart.series.push(new am4charts.RadarColumnSeries());
// columnSeries.dataFields.dateX = "date"; // columnSeries.dataFields.dateX = "date";
columnSeries.dataFields.categoryX = "qq"; //date columnSeries.dataFields.categoryX = "qq"; //date
...@@ -281,7 +273,7 @@ am4core.ready(function() { ...@@ -281,7 +273,7 @@ am4core.ready(function() {
columnSeries.tooltip.background.fillOpacity = 0.5; columnSeries.tooltip.background.fillOpacity = 0.5;
columnSeries.columns.template.tooltipText = "[bold]{qq}[/]\nTotal {valueY.formatNumber('#,###.##')} Ha"; columnSeries.columns.template.tooltipText = "[bold]{qq}[/]\nTotal {valueY.formatNumber('#,###.##')} Ha";
columnSeries.cursorTooltipEnabled = false; columnSeries.cursorTooltipEnabled = false;
columnSeries.columns.template.adapter.add("fill", function(fill, target) { columnSeries.columns.template.adapter.add("fill", (fill, target) => {
if (target.dataItem && (target.dataItem.categoryX == "Q1")) { if (target.dataItem && (target.dataItem.categoryX == "Q1")) {
return am4core.color("#F18275"); return am4core.color("#F18275");
} else if (target.dataItem && (target.dataItem.categoryX == "Q2")) { } else if (target.dataItem && (target.dataItem.categoryX == "Q2")) {
...@@ -295,13 +287,7 @@ am4core.ready(function() { ...@@ -295,13 +287,7 @@ am4core.ready(function() {
} }
}); });
/* //ANILLO EXTERIOR //ANILLO EXTERIOR
var range = dateAxis.axisRanges.create();
range.category = "January";
range.endCategory = "April";
range.axisFill.fill = am4core.color("#396478");
range.axisFill.fillOpacity = 0.3;*/
let yearsAxis = rchart.yAxes.push(new am4charts.CategoryAxis()); let yearsAxis = rchart.yAxes.push(new am4charts.CategoryAxis());
let bubbleSeries = rchart.series.push(new am4charts.RadarSeries()); let bubbleSeries = rchart.series.push(new am4charts.RadarSeries());
...@@ -314,9 +300,7 @@ am4core.ready(function() { ...@@ -314,9 +300,7 @@ am4core.ready(function() {
}); });
// weekday axis // weekday axis
//var weekDayAxis = chart.yAxes.push(new am4charts.CategoryAxis());
yearsAxis.dataFields.category = "yy"; yearsAxis.dataFields.category = "yy";
//yearsAxis.data = dailyData;
yearsAxis.renderer.innerRadius = am4core.percent(50); yearsAxis.renderer.innerRadius = am4core.percent(50);
yearsAxis.renderer.minGridDistance = 10; yearsAxis.renderer.minGridDistance = 10;
yearsAxis.renderer.grid.template.location = 0; yearsAxis.renderer.grid.template.location = 0;
...@@ -330,12 +314,10 @@ am4core.ready(function() { ...@@ -330,12 +314,10 @@ am4core.ready(function() {
yearsAxis.numberFormatter.numberFormat = "####"; yearsAxis.numberFormatter.numberFormat = "####";
// bubble series // bubble series
//var bubbleSeries = chart.series.push(new am4charts.RadarSeries());
bubbleSeries.dataFields.categoryX = "qq"; bubbleSeries.dataFields.categoryX = "qq";
bubbleSeries.dataFields.categoryY = "yy"; bubbleSeries.dataFields.categoryY = "yy";
bubbleSeries.dataFields.value = "area"; bubbleSeries.dataFields.value = "area";
bubbleSeries.yAxis = yearsAxis; bubbleSeries.yAxis = yearsAxis;
//bubbleSeries.data = dailyData;
bubbleSeries.strokeOpacity = 0; bubbleSeries.strokeOpacity = 0;
bubbleSeries.maskBullets = false; bubbleSeries.maskBullets = false;
bubbleSeries.cursorTooltipEnabled = false; bubbleSeries.cursorTooltipEnabled = false;
...@@ -344,16 +326,14 @@ am4core.ready(function() { ...@@ -344,16 +326,14 @@ am4core.ready(function() {
bubbleSeries.tooltip.background.fillOpacity = 0.5; bubbleSeries.tooltip.background.fillOpacity = 0.5;
bubbleSeries.dataItems.template.locations.categoryX = 0.5; bubbleSeries.dataItems.template.locations.categoryX = 0.5;
var bubbleBullet = bubbleSeries.bullets.push(new am4charts.CircleBullet()) let bubbleBullet = bubbleSeries.bullets.push(new am4charts.CircleBullet());
bubbleBullet.locationX = 0.5; bubbleBullet.locationX = 0.5;
//bubbleBullet.stroke = am4core.color(mainTextColor);
//bubbleBullet.fill = am4core.color("#b9ce37");
bubbleBullet.tooltipText = "[bold]Q{date.formatDate('q yyyy')}:[/] \n{value.formatNumber('#,###.0')} Ha"; bubbleBullet.tooltipText = "[bold]Q{date.formatDate('q yyyy')}:[/] \n{value.formatNumber('#,###.0')} Ha";
bubbleBullet.adapter.add("tooltipY", function(tooltipY, target) { bubbleBullet.adapter.add("tooltipY", (tooltipY, target) => {
return -target.circle.radius; return -target.circle.radius;
}); });
// TODO: Fix these calls to automatically use available years // TODO: Fix these calls to automatically use available years
bubbleBullet.adapter.add("fill", function(fill, target) { bubbleBullet.adapter.add("fill", (fill, target) => {
if (target.dataItem && (target.dataItem.categoryY == "2014")) { if (target.dataItem && (target.dataItem.categoryY == "2014")) {
return am4core.color("#313695"); return am4core.color("#313695");
} else if (target.dataItem && (target.dataItem.categoryY == "2015")) { } else if (target.dataItem && (target.dataItem.categoryY == "2015")) {
...@@ -371,7 +351,7 @@ am4core.ready(function() { ...@@ -371,7 +351,7 @@ am4core.ready(function() {
} }
}); });
// TODO: Fix these calls to automatically use available years // TODO: Fix these calls to automatically use available years
bubbleBullet.adapter.add("stroke", function(fill, target) { bubbleBullet.adapter.add("stroke", (fill, target) => {
if (target.dataItem && (target.dataItem.categoryY == "2014")) { if (target.dataItem && (target.dataItem.categoryY == "2014")) {
return am4core.color("#313695"); return am4core.color("#313695");
} else if (target.dataItem && (target.dataItem.categoryY == "2015")) { } else if (target.dataItem && (target.dataItem.categoryY == "2015")) {
...@@ -397,7 +377,7 @@ am4core.ready(function() { ...@@ -397,7 +377,7 @@ am4core.ready(function() {
rchart.cursor.innerRadius = am4core.percent(40); rchart.cursor.innerRadius = am4core.percent(40);
rchart.cursor.lineY.disabled = true; rchart.cursor.lineY.disabled = true;
var label = rchart.radarContainer.createChild(am4core.Label); let label = rchart.radarContainer.createChild(am4core.Label);
label.horizontalCenter = "middle"; label.horizontalCenter = "middle";
label.verticalCenter = "middle"; label.verticalCenter = "middle";
label.fill = am4core.color(mainTextColor); label.fill = am4core.color(mainTextColor);
...@@ -405,7 +385,7 @@ am4core.ready(function() { ...@@ -405,7 +385,7 @@ am4core.ready(function() {
//label.fontWeight = "bold"; //label.fontWeight = "bold";
label.text = "TOTAL\nTRIMESTRAL"; label.text = "TOTAL\nTRIMESTRAL";
var title = rchart.createChild(am4core.Label); let title = rchart.createChild(am4core.Label);
title.fill = am4core.color("#b9ce37"); title.fill = am4core.color("#b9ce37");
title.fontSize = 15; title.fontSize = 15;
title.isMeasured = false; title.isMeasured = false;
......
public/js/grijalva_basemap.js
View file @ b6b23002
...@@ -5,28 +5,11 @@ ...@@ -5,28 +5,11 @@
* August-September 2019 * August-September 2019
*/ */
/* global baseFileSize, formatBytes, Promise, omnivore, JSZip, map, layerControl, updateCharts */ /* global Promise, omnivore, JSZip, map, layerControl, updateCharts */
/* exported makeBaseMap, baseLayerPromises, drawnItems */ /* exported makeBaseMap, baseLayerPromises, drawnItems */
/* Lines related to displaying loading bar are commented */ let baseLayerPromises = [],
drawnItems;
let baseLayerPromises = [];
/* baseSize = 0,
baseDisplaySize,
baseLoadedSize = 0,
baseLoadedDisplaySize,
baseLayerCounter = 0,
currentBaseLayer = 1;*/
let drawnItems;
/*Object.keys(baseFileSize).forEach((name) => {
if (name.split(".")[1] == "zip") {
baseSize += parseFloat(baseFileSize[name].size); // file size to load for zipped base layers
baseDisplaySize = formatBytes(baseSize, 2); // size in pretty units
baseLayerCounter++;
}
});*/
// function to read compressed json and create a leaflet layer // function to read compressed json and create a leaflet layer
const zip2Lyr = (zipFile, layerName, layerTemplate) => { const zip2Lyr = (zipFile, layerName, layerTemplate) => {
...@@ -49,17 +32,7 @@ const zip2Lyr = (zipFile, layerName, layerTemplate) => { ...@@ -49,17 +32,7 @@ const zip2Lyr = (zipFile, layerName, layerTemplate) => {
.then( ([file, type]) => { .then( ([file, type]) => {
file.async("string").then( file.async("string").then(
function success(text) { // 5) display the result function success(text) { // 5) display the result
/*let baseFile = zipFile.split("/")[3]; if (type == "json") {
¬baseLoadedSize += parseFloat(baseFileSize[baseFile].size); // cumulative loaded size
baseLoadedDisplaySize = formatBytes(baseLoadedSize); // in pretty units
let baseBarWidth = (baseLoadedSize/baseSize*100);*/
/*currentBaseLayer++;
let baseFiles = currentBaseLayer <= baseLayerCounter ? currentBaseLayer : baseLayerCounter;
$("#basemap-fileLoad").html("Cargando capa " + baseFiles + " de " + baseLayerCounter + "<br>" +
"<span class=\"progress\"><span id=\"baseBar\" class=\"progress-bar progress-bar-striped progress-bar-animated\" role=\"progressbar\" style=\"width: " + baseBarWidth + "%;\" aria-valuenow=\"" + baseBarWidth + "\" aria-valuemin=\"0\" aria-valuemax=\"100\"></span>" +
"<span class=\"justify-content-center d-flex position-absolute w-100\">" + baseLoadedDisplaySize + "/" + baseDisplaySize + "</span></span>");
*/if (type == "json") {
layerTemplate.addData(JSON.parse(text)); layerTemplate.addData(JSON.parse(text));
} else if (type == "topojson") { } else if (type == "topojson") {
layerName = omnivore.topojson.parse(text, null, layerTemplate); layerName = omnivore.topojson.parse(text, null, layerTemplate);
...@@ -168,12 +141,7 @@ let layer_areaVerdeUrbana= new L.tileLayer.wms("http://gaia.inegi.org.mx/NLB/tun ...@@ -168,12 +141,7 @@ let layer_areaVerdeUrbana= new L.tileLayer.wms("http://gaia.inegi.org.mx/NLB/tun
let layer_escuelas = new L.geoJson(null, { let layer_escuelas = new L.geoJson(null, {
attribution: "", attribution: "",
pane: "pane_escuelas", pane: "pane_escuelas",
//onEachFeature: pop_escuelas,
pointToLayer: (feature, latlng) => { pointToLayer: (feature, latlng) => {
// let context = {
// feature: feature,
// variables: {}
// };
let escuelaMarker = L.BeautifyIcon.icon({ let escuelaMarker = L.BeautifyIcon.icon({
icon: "escuela", icon: "escuela",
iconSize: [0, 0], iconSize: [0, 0],
...@@ -195,12 +163,7 @@ let layer_escuelas = new L.geoJson(null, { ...@@ -195,12 +163,7 @@ let layer_escuelas = new L.geoJson(null, {
let layer_hospitales = new L.geoJson(null, { let layer_hospitales = new L.geoJson(null, {
attribution: "", attribution: "",
pane: "pane_hospitales", pane: "pane_hospitales",
//onEachFeature: pop_hospitales,
pointToLayer: (_feature, latlng) => { pointToLayer: (_feature, latlng) => {
// let context = {
// feature: feature,
// variables: {}
// };
let hospitalMarker = L.BeautifyIcon.icon({ let hospitalMarker = L.BeautifyIcon.icon({
icon: "desechos", icon: "desechos",
iconSize: [0, 0], iconSize: [0, 0],
...@@ -223,12 +186,7 @@ let layer_hospitales = new L.geoJson(null, { ...@@ -223,12 +186,7 @@ let layer_hospitales = new L.geoJson(null, {
let layer_hoteles = new L.geoJson(null, { let layer_hoteles = new L.geoJson(null, {
attribution: "", attribution: "",
pane: "pane_hoteles", pane: "pane_hoteles",
//onEachFeature: pop_hoteles,
pointToLayer: (_feature, latlng) => { pointToLayer: (_feature, latlng) => {
// let context = {
// feature: feature,
// variables: {}
// };
let hotelMarker = L.BeautifyIcon.icon({ let hotelMarker = L.BeautifyIcon.icon({
icon: "bed", icon: "bed",
iconSize: [0, 0], iconSize: [0, 0],
...@@ -250,14 +208,8 @@ let layer_hoteles = new L.geoJson(null, { ...@@ -250,14 +208,8 @@ let layer_hoteles = new L.geoJson(null, {
let layer_puentes = new L.geoJson(null, { let layer_puentes = new L.geoJson(null, {
attribution: "", attribution: "",
pane: "pane_puentes", pane: "pane_puentes",
//onEachFeature: pop_puentes,
pointToLayer: (_feature, latlng) => { pointToLayer: (_feature, latlng) => {
// var context = {
// feature: feature,
// variables: {}
// };
let puenteMarker = L.BeautifyIcon.icon({ let puenteMarker = L.BeautifyIcon.icon({
// icon: "grip-lines-vertical",
icon: "puente", icon: "puente",
iconSize: [0, 0], iconSize: [0, 0],
iconAnchor: [7, 10], iconAnchor: [7, 10],
...@@ -278,12 +230,7 @@ let layer_puentes = new L.geoJson(null, { ...@@ -278,12 +230,7 @@ let layer_puentes = new L.geoJson(null, {
let layer_puerto = new L.geoJson(null, { let layer_puerto = new L.geoJson(null, {
attribution: "", attribution: "",
pane: "pane_puerto", pane: "pane_puerto",
//onEachFeature: pop_puerto,
pointToLayer: (_feature, latlng) => { pointToLayer: (_feature, latlng) => {
// let context = {
// feature: feature,
// variables: {}
// };
let puertoMarker = L.BeautifyIcon.icon({ let puertoMarker = L.BeautifyIcon.icon({
icon: "puertoindustrial", icon: "puertoindustrial",
iconSize: [0, 0], iconSize: [0, 0],
...@@ -305,13 +252,8 @@ let layer_puerto = new L.geoJson(null, { ...@@ -305,13 +252,8 @@ let layer_puerto = new L.geoJson(null, {
let layer_frontera = new L.geoJson(null, { let layer_frontera = new L.geoJson(null, {
attribution: "", attribution: "",
pane: "pane_frontera", pane: "pane_frontera",
//onEachFeature: pop_frontera,
styles: null, styles: null,
pointToLayer: (_feature, latlng) => { pointToLayer: (_feature, latlng) => {
// let context = {
// feature: feature,
// variables: {}
// };
let fronteraMarker = L.BeautifyIcon.icon({ let fronteraMarker = L.BeautifyIcon.icon({
icon: "puntofronterizo", icon: "puntofronterizo",
iconSize: [0, 0], iconSize: [0, 0],
...@@ -333,12 +275,7 @@ let layer_frontera = new L.geoJson(null, { ...@@ -333,12 +275,7 @@ let layer_frontera = new L.geoJson(null, {
let layer_descargas = new L.geoJson(null, { let layer_descargas = new L.geoJson(null, {
attribution: "", attribution: "",
pane: "pane_descargas", pane: "pane_descargas",
//onEachFeature: pop_descargas,
pointToLayer: (_feature, latlng) => { pointToLayer: (_feature, latlng) => {
// let context = {
// feature: feature,
// variables: {}
// };
let descargasMarker = L.BeautifyIcon.icon({ let descargasMarker = L.BeautifyIcon.icon({
icon: "desechos", icon: "desechos",
iconSize: [0, 0], iconSize: [0, 0],
...@@ -360,12 +297,7 @@ let layer_descargas = new L.geoJson(null, { ...@@ -360,12 +297,7 @@ let layer_descargas = new L.geoJson(null, {
let layer_presas = new L.geoJson(null, { let layer_presas = new L.geoJson(null, {
attribution: "", attribution: "",
pane: "pane_presas", pane: "pane_presas",
//onEachFeature: pop_presas,
pointToLayer: (_feature, latlng) => { pointToLayer: (_feature, latlng) => {
// let context = {
// feature: feature,
// variables: {}
// };
let presasMarker = L.BeautifyIcon.icon({ let presasMarker = L.BeautifyIcon.icon({
icon: "presa", icon: "presa",
iconSize: [0, 0], iconSize: [0, 0],
...@@ -402,7 +334,6 @@ const style_cuencas = () => { ...@@ -402,7 +334,6 @@ const style_cuencas = () => {
let layer_cuencas = new L.geoJson(null, { let layer_cuencas = new L.geoJson(null, {
attribution: "", attribution: "",
pane: "pane_cuencas", pane: "pane_cuencas",
//onEachFeature: pop_cuencas,
style: style_cuencas style: style_cuencas
}); });
...@@ -422,7 +353,6 @@ const style_limZMs = () => { ...@@ -422,7 +353,6 @@ const style_limZMs = () => {
let layer_limZMs = new L.geoJson(null, { let layer_limZMs = new L.geoJson(null, {
attribution: "", attribution: "",
pane: "pane_limZMs", pane: "pane_limZMs",
//onEachFeature: pop_limZMs,
style: style_limZMs style: style_limZMs
}); });
...@@ -441,7 +371,6 @@ const style_ZMs = feature => { ...@@ -441,7 +371,6 @@ const style_ZMs = feature => {
fillOpacity: 1, fillOpacity: 1,
fillColor: "rgba(139,60,0,0.6)" fillColor: "rgba(139,60,0,0.6)"
} }
//break;
case "Villahermosa": case "Villahermosa":
return { return {
pane: "pane_ZMs", pane: "pane_ZMs",
...@@ -455,14 +384,12 @@ const style_ZMs = feature => { ...@@ -455,14 +384,12 @@ const style_ZMs = feature => {
fillOpacity: 1, fillOpacity: 1,
fillColor: "rgba(207,152,62,0.6)" fillColor: "rgba(207,152,62,0.6)"
} }
//break;
} }
} }
let layer_ZMs = new L.geoJson(null, { let layer_ZMs = new L.geoJson(null, {
attribution: "", attribution: "",
pane: "pane_ZMs", pane: "pane_ZMs",
//onEachFeature: pop_ZMs,
style: style_ZMs style: style_ZMs
}); });
...@@ -484,7 +411,6 @@ const style_ANPs = () => { ...@@ -484,7 +411,6 @@ const style_ANPs = () => {
let layer_ANPs = new L.geoJson(null, { let layer_ANPs = new L.geoJson(null, {
attribution: "", attribution: "",
pane: "pane_ANPs", pane: "pane_ANPs",
//onEachFeature: pop_ANPs,
style: style_ANPs style: style_ANPs
}); });
...@@ -521,7 +447,7 @@ const toggleButtons = () => { ...@@ -521,7 +447,7 @@ const toggleButtons = () => {
b.onClick = null; b.onClick = null;
b.classList.remove("draw-control-disabled"); b.classList.remove("draw-control-disabled");
} }
}) });
} }
const makeBaseMap = () => { const makeBaseMap = () => {
...@@ -547,10 +473,6 @@ const makeBaseMap = () => { ...@@ -547,10 +473,6 @@ const makeBaseMap = () => {
createPane("pane_escuelas", 420); createPane("pane_escuelas", 420);
createPane("pane_wbnames",421); createPane("pane_wbnames",421);
/*$("#basemap-fileLoad").html("Cargando capa 1 de " + baseLayerCounter + "<br>" +
"<span class=\"progress\"><span id=\"baseBar\" class=\"progress-bar progress-bar-striped progress-bar-animated\" role=\"progressbar\" style=\"width: 0%;\" aria-valuenow=\"0\" aria-valuemin=\"0\" aria-valuemax=\"100\"></span>" +
"<span class=\"justify-content-center d-flex position-absolute w-100\">0/" + baseDisplaySize + "</span></span>");*/
layerControl.addOverlay(layer_nombresWB, "Nombres cuerpos de agua"); layerControl.addOverlay(layer_nombresWB, "Nombres cuerpos de agua");
zip2Lyr("../grijalva/data/escuelas.zip", escuelas, layer_escuelas); zip2Lyr("../grijalva/data/escuelas.zip", escuelas, layer_escuelas);
layerControl.addOverlay(layer_escuelas, "Escuelas con 50 personas ocupadas o más<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class=\"fa fa-escuela\" style=\"color:#409400;margin-top:3px; margin-left:0px;font-size: 13px;\"></i> Básico<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class=\"fa fa-escuela\" style=\"color:#df6400;margin-top:3px; margin-left:0px;font-size: 13px;\"></i> Medio superior<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class=\"fa fa-escuela\" style=\"color:#c0d1e5;margin-top:3px; margin-left:0px;font-size: 13px;\"></i> Otras escuelas"); layerControl.addOverlay(layer_escuelas, "Escuelas con 50 personas ocupadas o más<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class=\"fa fa-escuela\" style=\"color:#409400;margin-top:3px; margin-left:0px;font-size: 13px;\"></i> Básico<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class=\"fa fa-escuela\" style=\"color:#df6400;margin-top:3px; margin-left:0px;font-size: 13px;\"></i> Medio superior<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class=\"fa fa-escuela\" style=\"color:#c0d1e5;margin-top:3px; margin-left:0px;font-size: 13px;\"></i> Otras escuelas");
...@@ -699,18 +621,12 @@ const makeBaseMap = () => { ...@@ -699,18 +621,12 @@ const makeBaseMap = () => {
draw: { draw: {
polygon: { polygon: {
showArea: true, showArea: true,
//allowIntersection: false, // Restricts shapes to simple polygons
//drawError: {
//color: "#f9a800",
//message: "<strong>you can't draw that!" // Message that will show when intersect
//},
shapeOptions: { shapeOptions: {
color: "#42ffc3" color: "#42ffc3"
} }
}, },
// disable toolbar item by setting it to false // disable toolbar item by setting it to false
polyline: { polyline: {
//allowIntersection:false,
shapeOptions: { shapeOptions: {
color: "#42ffc3" color: "#42ffc3"
} }
...@@ -725,8 +641,7 @@ const makeBaseMap = () => { ...@@ -725,8 +641,7 @@ const makeBaseMap = () => {
circle: false // Turns off this drawing tool circle: false // Turns off this drawing tool
}, },
edit: { edit: {
featureGroup: drawnItems, featureGroup: drawnItems
//remove: false
} }
}); });
map.addControl(drawControl); map.addControl(drawControl);
......
public/js/grijalva_charts.js
View file @ b6b23002
...@@ -219,12 +219,12 @@ const makeIndicatorGraph = () => { ...@@ -219,12 +219,12 @@ const makeIndicatorGraph = () => {
// define axes with ranges // define axes with ranges
xLine = d3.scaleTime().range([0, width - margin.left - margin.right - 30]).clamp(true); xLine = d3.scaleTime().range([0, width - margin.left - margin.right - 30]).clamp(true);
yLine = d3.scaleLinear().range([height - margin.left - margin.right, 0 + 35]) yLine = d3.scaleLinear().range([height - margin.left - margin.right, 0 + 35]);
// scale data range // scale data range
xLine.domain([minDate, maxDate]).nice(); xLine.domain([minDate, maxDate]).nice();
//yLine.domain(d3.extent(data, function(d) { return d[lineVariables[0]]; })).nice(); //yLine.domain(d3.extent(data, d => d[lineVariables[0]] )).nice();
//yLine.domain([0, d3.max(data, function(d) { return d[lineVariables[0]]; })]).nice(); //yLine.domain([0, d3.max(data, d => d[lineVariables[0]] )]).nice();
// Calculate min and max values of data to define chart y-axis domain // Calculate min and max values of data to define chart y-axis domain
//let minDomain = d3.min(data.map(d => d.values).flat().map(d => d.value)); //let minDomain = d3.min(data.map(d => d.values).flat().map(d => d.value));
...@@ -281,7 +281,7 @@ const makeIndicatorGraph = () => { ...@@ -281,7 +281,7 @@ const makeIndicatorGraph = () => {
// color axis labels // color axis labels
g.selectAll(".y.axis g.tick text") g.selectAll(".y.axis g.tick text")
.style("fill", "#b2b2b2"); // function (d,i) {return (i%2)?"red":"blue";}) .style("fill", "#b2b2b2"); // (d,i) => (i%2)?"red":"blue")
let title = selection.select(".title.label"); let title = selection.select(".title.label");
title.text(chart.title()) title.text(chart.title())
...@@ -323,8 +323,8 @@ const makeIndicatorGraph = () => { ...@@ -323,8 +323,8 @@ const makeIndicatorGraph = () => {
//.nice(d3.timeMonth) //.nice(d3.timeMonth)
.range([0, width - margin.left - margin.right - 30]) .range([0, width - margin.left - margin.right - 30])
.clamp(true); .clamp(true);
//yLine.domain(d3.extent(data, function(d) { return d[lineVariables[0]]; })) //yLine.domain(d3.extent(data, d => d[lineVariables[0]] ));
//yLine.domain([0, d3.max(data, function(d) { return d[lineVariables[0]]; })]).nice() //yLine.domain([0, d3.max(data, d => d[lineVariables[0]] )]).nice();
// Calculate min and max values of data to define chart y-axis domain // Calculate min and max values of data to define chart y-axis domain
//let minDomain = d3.min(data.map(d => d.values).flat().map(d => d.value)); //let minDomain = d3.min(data.map(d => d.values).flat().map(d => d.value));
...@@ -458,7 +458,7 @@ const makeIndicatorGraph = () => { ...@@ -458,7 +458,7 @@ const makeIndicatorGraph = () => {
let circles = g.select(".circles"), let circles = g.select(".circles"),
tooltip = d3.select(".tooltip"); tooltip = d3.select(".tooltip");
//tooltipFormat = d3.timeFormat("%b "%y"), //tooltipFormat = d3.timeFormat("%b "%y"),
//tooltipFormat = d3.format(",.2f") //tooltipFormat = d3.format(",.2f");
//tooltipFormat = d3.format(",.3s"); //tooltipFormat = d3.format(",.3s");
circles.selectAll("g") // using nested data, so need to make a g to contain stuff circles.selectAll("g") // using nested data, so need to make a g to contain stuff
......
public/js/grijalva_functions.js
View file @ b6b23002
...@@ -106,7 +106,7 @@ const setupDates = () => { ...@@ -106,7 +106,7 @@ const setupDates = () => {
d3.json(layersQuery).then(layers => { d3.json(layersQuery).then(layers => {
layers.forEach(layer => { layers.forEach(layer => {
dateArray.push(timeParse(layer.f_table_name)); // convert filenames to dates dateArray.push(timeParse(layer.f_table_name)); // convert filenames to dates
}) });
dateArray = dateArray.sort(sortInitialDateAscending); // order dates dateArray = dateArray.sort(sortInitialDateAscending); // order dates
dateMin = d3.min(dateArray); dateMin = d3.min(dateArray);
...@@ -199,7 +199,7 @@ const populateDates = (dates) => { // fill out date pickers with available dates ...@@ -199,7 +199,7 @@ const populateDates = (dates) => { // fill out date pickers with available dates
// hide initial screen and show map // hide initial screen and show map
$("#startHeader").remove(); $("#startHeader").remove();
$("#initial-backdrop").remove(); $("#initial-backdrop").remove();
$("#mainContainer")[0].style.setProperty("display", "flex", "important") $("#mainContainer")[0].style.setProperty("display", "flex", "important");
$("#mexmap").show(); $("#mexmap").show();
// When closing final-date, either setup or update map // When closing final-date, either setup or update map
...@@ -215,7 +215,7 @@ const populateDates = (dates) => { // fill out date pickers with available dates ...@@ -215,7 +215,7 @@ const populateDates = (dates) => { // fill out date pickers with available dates
$("#ui-datepicker-div").toggleClass("hide-calendar", $(el).is("[data-calendar=\"false\"]")); $("#ui-datepicker-div").toggleClass("hide-calendar", $(el).is("[data-calendar=\"false\"]"));
} }
}); });
}) });
} }
const setupMap = (dates) => { const setupMap = (dates) => {
...@@ -296,9 +296,9 @@ const setupMap = (dates) => { ...@@ -296,9 +296,9 @@ const setupMap = (dates) => {
}); });
const offsetGlobal = (center, zoom, refMap, tgtMap) => { const offsetGlobal = (center, zoom, refMap, tgtMap) => {
var refC = refMap.getContainer(); let refC = refMap.getContainer();
var tgtC = tgtMap.getContainer(); let tgtC = tgtMap.getContainer();
var pt = refMap.project(center, zoom) let pt = refMap.project(center, zoom)
.subtract([refC.offsetLeft, refC.offsetTop]) .subtract([refC.offsetLeft, refC.offsetTop])
.subtract(refMap.getSize().divideBy(2)) .subtract(refMap.getSize().divideBy(2))
.add([tgtC.offsetLeft, tgtC.offsetTop]) .add([tgtC.offsetLeft, tgtC.offsetTop])
...@@ -404,8 +404,8 @@ const populateMap = async (mapData) => { ...@@ -404,8 +404,8 @@ const populateMap = async (mapData) => {
}); });
glmap = L.mapboxGL({ glmap = L.mapboxGL({
accessToken: "no-token", "accessToken": "no-token",
style: { "style": {
"version": 8, "version": 8,
"sources": {}, "sources": {},
"layers": [] "layers": []
...@@ -420,7 +420,7 @@ const populateMap = async (mapData) => { ...@@ -420,7 +420,7 @@ const populateMap = async (mapData) => {
Object.keys(allTiles).forEach(layer => { Object.keys(allTiles).forEach(layer => {
if (layer == userFiles[0]) { if (layer == userFiles[0]) {
glmap.getMapboxMap().setPaintProperty(layer, "fill-opacity", 0.7) glmap.getMapboxMap().setPaintProperty(layer, "fill-opacity", 0.7);
} }
}); });
...@@ -444,7 +444,7 @@ const populateMap = async (mapData) => { ...@@ -444,7 +444,7 @@ const populateMap = async (mapData) => {
"Carto Light": cartoLightLayer, "Carto Light": cartoLightLayer,
"OpenStreetMap": osmLayer "OpenStreetMap": osmLayer
}; };
var overlays = { let overlays = {
"<span id=\"cuencaOverlay\">Agua en la cuenca del Grijalva</span>": timeLayer "<span id=\"cuencaOverlay\">Agua en la cuenca del Grijalva</span>": timeLayer
}; };
...@@ -475,7 +475,7 @@ const updateMap = (mapData) => { ...@@ -475,7 +475,7 @@ const updateMap = (mapData) => {
let newTile = mapboxLayer(monthYear); let newTile = mapboxLayer(monthYear);
glmap.getMapboxMap().addLayer(newTile); glmap.getMapboxMap().addLayer(newTile);
if (monthYear == userFiles[0]) { if (monthYear == userFiles[0]) {
glmap.getMapboxMap().setPaintProperty(monthYear, "fill-opacity", 0.7) glmap.getMapboxMap().setPaintProperty(monthYear, "fill-opacity", 0.7);
} }
} }
}); });
...@@ -502,7 +502,7 @@ const updateMap = (mapData) => { ...@@ -502,7 +502,7 @@ const updateMap = (mapData) => {
}); });
}); });
resolve({"map": map, "minIndicators": minIndicators, "maxIndicators": maxIndicators}); resolve({"map": map, "minIndicators": minIndicators, "maxIndicators": maxIndicators});
}) });
}).then( values => { // once we have new minmax values, style all tiles }).then( values => { // once we have new minmax values, style all tiles
let option = $("#indicatorSelect").val(), // option selected from dropdrown let option = $("#indicatorSelect").val(), // option selected from dropdrown
min = values.minIndicators, min = values.minIndicators,
...@@ -537,31 +537,17 @@ const updateCharts = async () => { ...@@ -537,31 +537,17 @@ const updateCharts = async () => {
// define MVT layer for given month table and all indicators // define MVT layer for given month table and all indicators
const mapboxLayer = (monthYear) => { const mapboxLayer = (monthYear) => {
let pbfLayer = { let pbfLayer = {
id: monthYear, "id": monthYear,
source: { "source": {
type: "vector", "type": "vector",
tiles: [`${baseUrl}/${monthYear}/mvt/{z}/{x}/{y}?geom_column=geom&columns=${indicators.join()}`], "tiles": [`${baseUrl}/${monthYear}/mvt/{z}/{x}/{y}?geom_column=geom&columns=${indicators.join()}`],
maxzoom: 19, "maxzoom": 19,
minzoom: 6 "minzoom": 6
}, },
"source-layer": monthYear, "source-layer": monthYear,
type: "fill", "type": "fill",
"paint": { "paint": {
"fill-opacity": 0, "fill-opacity": 0,
/*"fill-color": [
"interpolate",
["linear"],
["get", "df"],
1, "rgba(255, 0, 0, 0.5)", // red
1.3, "rgba(0, 255, 0, 0.5)", // green
]/*,
"fill-outline-color": [
"interpolate",
["linear"],
["get", "df"],
1, "rgba(255, 0, 0, 0.6)", // red
1.3, "rgba(0, 255, 0, 0.6)", // green
]*/
} }
} }
currentTiles[monthYear] = pbfLayer; currentTiles[monthYear] = pbfLayer;
...@@ -647,7 +633,7 @@ L.TimeDimension.Layer.Tile = L.TimeDimension.Layer.extend({ ...@@ -647,7 +633,7 @@ L.TimeDimension.Layer.Tile = L.TimeDimension.Layer.extend({
return; return;
} }
var time = this._timeDimension.getCurrentTime(); let time = this._timeDimension.getCurrentTime();
// get data for time // get data for time
let d = new Date(time), let d = new Date(time),
...@@ -668,7 +654,7 @@ L.TimeDimension.Layer.Tile = L.TimeDimension.Layer.extend({ ...@@ -668,7 +654,7 @@ L.TimeDimension.Layer.Tile = L.TimeDimension.Layer.extend({
//console.time("process"); //console.time("process");
//console.log("data for", monthYear); //console.log("data for", monthYear);
//console.log(currentTiles) //console.log(currentTiles);
Object.keys(allTiles).forEach(layer => { Object.keys(allTiles).forEach(layer => {
if (layer !== monthYear) { // hide all other months if (layer !== monthYear) { // hide all other months
glmap.getMapboxMap().setPaintProperty(layer, "fill-opacity", 0); glmap.getMapboxMap().setPaintProperty(layer, "fill-opacity", 0);
...@@ -701,7 +687,7 @@ $("#indicatorSelect").on("change", function() { ...@@ -701,7 +687,7 @@ $("#indicatorSelect").on("change", function() {
const styleTiles = (option, minIndicators, maxIndicators) => { const styleTiles = (option, minIndicators, maxIndicators) => {
// define color scale domain based on min-max values for selected indicator // define color scale domain based on min-max values for selected indicator
let domain = [minIndicators[option], maxIndicators[option]]; let domain = [minIndicators[option], maxIndicators[option]];
//console.log(domain) //console.log(domain);
scale = chroma.scale("PuBu").padding([0.5, 0]).domain(domain).classes(5); scale = chroma.scale("PuBu").padding([0.5, 0]).domain(domain).classes(5);
Object.keys(currentTiles).forEach(layer => { Object.keys(currentTiles).forEach(layer => {
let color = [ let color = [
...@@ -726,7 +712,7 @@ legend.onAdd = () => { ...@@ -726,7 +712,7 @@ legend.onAdd = () => {
let optionIndex = indicators.indexOf(option); let optionIndex = indicators.indexOf(option);
let legendText = indicatorsUnits[optionIndex] == "" ? indicatorsNames[optionIndex] : let legendText = indicatorsUnits[optionIndex] == "" ? indicatorsNames[optionIndex] :
`${indicatorsNames[optionIndex]} (${indicatorsUnits[optionIndex]})`; `${indicatorsNames[optionIndex]} (${indicatorsUnits[optionIndex]})`;
var html = `<h6>${legendText}</h6><ul>`; let html = `<h6>${legendText}</h6><ul>`;
let classes = scale.classes(); let classes = scale.classes();
classes.forEach( (c, idx, array) => { classes.forEach( (c, idx, array) => {
if (idx != array.length - 1) { if (idx != array.length - 1) {
......
public/js/riesgos_basemap.js
View file @ b6b23002
This diff is collapsed.
public/js/riesgos_functions.js
View file @ b6b23002
...@@ -106,7 +106,7 @@ const setupDates = () => { ...@@ -106,7 +106,7 @@ const setupDates = () => {
d3.json(layersQuery).then(layers => { d3.json(layersQuery).then(layers => {
layers.forEach(layer => { layers.forEach(layer => {
dateArray.push(timeParse(layer.f_table_name)); // convert filenames to dates dateArray.push(timeParse(layer.f_table_name)); // convert filenames to dates
}) });
dateArray = dateArray.sort(sortInitialDateAscending); // order dates dateArray = dateArray.sort(sortInitialDateAscending); // order dates
dateMin = d3.min(dateArray); dateMin = d3.min(dateArray);
...@@ -199,7 +199,7 @@ const populateDates = (dates) => { // fill out date pickers with available dates ...@@ -199,7 +199,7 @@ const populateDates = (dates) => { // fill out date pickers with available dates
// hide initial screen and show map // hide initial screen and show map
$("#startHeader").remove(); $("#startHeader").remove();
$("#initial-backdrop").remove(); $("#initial-backdrop").remove();
$("#mainContainer")[0].style.setProperty("display", "flex", "important") $("#mainContainer")[0].style.setProperty("display", "flex", "important");
$("#mexmap").show(); $("#mexmap").show();
// When closing final-date, either setup or update map // When closing final-date, either setup or update map
...@@ -215,7 +215,7 @@ const populateDates = (dates) => { // fill out date pickers with available dates ...@@ -215,7 +215,7 @@ const populateDates = (dates) => { // fill out date pickers with available dates
$("#ui-datepicker-div").toggleClass("hide-calendar", $(el).is("[data-calendar=\"false\"]")); $("#ui-datepicker-div").toggleClass("hide-calendar", $(el).is("[data-calendar=\"false\"]"));
} }
}); });
}) });
} }
const setupMap = (dates) => { const setupMap = (dates) => {
...@@ -296,9 +296,9 @@ const setupMap = (dates) => { ...@@ -296,9 +296,9 @@ const setupMap = (dates) => {
}); });
const offsetGlobal = (center, zoom, refMap, tgtMap) => { const offsetGlobal = (center, zoom, refMap, tgtMap) => {
var refC = refMap.getContainer(); let refC = refMap.getContainer();
var tgtC = tgtMap.getContainer(); let tgtC = tgtMap.getContainer();
var pt = refMap.project(center, zoom) let pt = refMap.project(center, zoom)
.subtract([refC.offsetLeft, refC.offsetTop]) .subtract([refC.offsetLeft, refC.offsetTop])
.subtract(refMap.getSize().divideBy(2)) .subtract(refMap.getSize().divideBy(2))
.add([tgtC.offsetLeft, tgtC.offsetTop]) .add([tgtC.offsetLeft, tgtC.offsetTop])
...@@ -420,7 +420,7 @@ const populateMap = async (mapData) => { ...@@ -420,7 +420,7 @@ const populateMap = async (mapData) => {
Object.keys(allTiles).forEach(layer => { Object.keys(allTiles).forEach(layer => {
if (layer == userFiles[0]) { if (layer == userFiles[0]) {
glmap.getMapboxMap().setPaintProperty(layer, "fill-opacity", 0.7) glmap.getMapboxMap().setPaintProperty(layer, "fill-opacity", 0.7);
} }
}); });
...@@ -444,7 +444,7 @@ const populateMap = async (mapData) => { ...@@ -444,7 +444,7 @@ const populateMap = async (mapData) => {
"Carto Light": cartoLightLayer, "Carto Light": cartoLightLayer,
"OpenStreetMap": osmLayer "OpenStreetMap": osmLayer
}; };
var overlays = { let overlays = {
"<span id=\"cuencaOverlay\">Agua en la cuenca del Grijalva</span>": timeLayer "<span id=\"cuencaOverlay\">Agua en la cuenca del Grijalva</span>": timeLayer
}; };
...@@ -475,7 +475,7 @@ const updateMap = (mapData) => { ...@@ -475,7 +475,7 @@ const updateMap = (mapData) => {
let newTile = mapboxLayer(monthYear); let newTile = mapboxLayer(monthYear);
glmap.getMapboxMap().addLayer(newTile); glmap.getMapboxMap().addLayer(newTile);
if (monthYear == userFiles[0]) { if (monthYear == userFiles[0]) {
glmap.getMapboxMap().setPaintProperty(monthYear, "fill-opacity", 0.7) glmap.getMapboxMap().setPaintProperty(monthYear, "fill-opacity", 0.7);
} }
} }
}); });
...@@ -502,7 +502,7 @@ const updateMap = (mapData) => { ...@@ -502,7 +502,7 @@ const updateMap = (mapData) => {
}); });
}); });
resolve({"map": map, "minIndicators": minIndicators, "maxIndicators": maxIndicators}); resolve({"map": map, "minIndicators": minIndicators, "maxIndicators": maxIndicators});
}) });
}).then( values => { // once we have new minmax values, style all tiles }).then( values => { // once we have new minmax values, style all tiles
let option = $("#indicatorSelect").val(), // option selected from dropdrown let option = $("#indicatorSelect").val(), // option selected from dropdrown
min = values.minIndicators, min = values.minIndicators,
...@@ -547,21 +547,7 @@ const mapboxLayer = (monthYear) => { ...@@ -547,21 +547,7 @@ const mapboxLayer = (monthYear) => {
"source-layer": monthYear, "source-layer": monthYear,
type: "fill", type: "fill",
"paint": { "paint": {
"fill-opacity": 0, "fill-opacity": 0
/*"fill-color": [
"interpolate",
["linear"],
["get", "df"],
1, "rgba(255, 0, 0, 0.5)", // red
1.3, "rgba(0, 255, 0, 0.5)", // green
]/*,
"fill-outline-color": [
"interpolate",
["linear"],
["get", "df"],
1, "rgba(255, 0, 0, 0.6)", // red
1.3, "rgba(0, 255, 0, 0.6)", // green
]*/
} }
} }
currentTiles[monthYear] = pbfLayer; currentTiles[monthYear] = pbfLayer;
...@@ -647,7 +633,7 @@ L.TimeDimension.Layer.Tile = L.TimeDimension.Layer.extend({ ...@@ -647,7 +633,7 @@ L.TimeDimension.Layer.Tile = L.TimeDimension.Layer.extend({
return; return;
} }
var time = this._timeDimension.getCurrentTime(); let time = this._timeDimension.getCurrentTime();
// get data for time // get data for time
let d = new Date(time), let d = new Date(time),
...@@ -668,7 +654,7 @@ L.TimeDimension.Layer.Tile = L.TimeDimension.Layer.extend({ ...@@ -668,7 +654,7 @@ L.TimeDimension.Layer.Tile = L.TimeDimension.Layer.extend({
//console.time("process"); //console.time("process");
//console.log("data for", monthYear); //console.log("data for", monthYear);
//console.log(currentTiles) //console.log(currentTiles);
Object.keys(allTiles).forEach(layer => { Object.keys(allTiles).forEach(layer => {
if (layer !== monthYear) { // hide all other months if (layer !== monthYear) { // hide all other months
glmap.getMapboxMap().setPaintProperty(layer, "fill-opacity", 0); glmap.getMapboxMap().setPaintProperty(layer, "fill-opacity", 0);
...@@ -701,7 +687,7 @@ $("#indicatorSelect").on("change", function() { ...@@ -701,7 +687,7 @@ $("#indicatorSelect").on("change", function() {
const styleTiles = (option, minIndicators, maxIndicators) => { const styleTiles = (option, minIndicators, maxIndicators) => {
// define color scale domain based on min-max values for selected indicator // define color scale domain based on min-max values for selected indicator
let domain = [minIndicators[option], maxIndicators[option]]; let domain = [minIndicators[option], maxIndicators[option]];
//console.log(domain) //console.log(domain);
scale = chroma.scale("PuBu").padding([0.5, 0]).domain(domain).classes(5); scale = chroma.scale("PuBu").padding([0.5, 0]).domain(domain).classes(5);
Object.keys(currentTiles).forEach(layer => { Object.keys(currentTiles).forEach(layer => {
let color = [ let color = [
...@@ -726,7 +712,7 @@ legend.onAdd = () => { ...@@ -726,7 +712,7 @@ legend.onAdd = () => {
let optionIndex = indicators.indexOf(option); let optionIndex = indicators.indexOf(option);
let legendText = indicatorsUnits[optionIndex] == "" ? indicatorsNames[optionIndex] : let legendText = indicatorsUnits[optionIndex] == "" ? indicatorsNames[optionIndex] :
`${indicatorsNames[optionIndex]} (${indicatorsUnits[optionIndex]})`; `${indicatorsNames[optionIndex]} (${indicatorsUnits[optionIndex]})`;
var html = `<h6>${legendText}</h6><ul>`; let html = `<h6>${legendText}</h6><ul>`;
let classes = scale.classes(); let classes = scale.classes();
classes.forEach( (c, idx, array) => { classes.forEach( (c, idx, array) => {
if (idx != array.length - 1) { if (idx != array.length - 1) {
......
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