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 @@
*/
/* global Promise, omnivore, JSZip, map, layerControl */
/* exported makeBaseMap, baseLayerPromises, drawnItems */
/* exported makeBaseMap */
/* Lines related to displaying loading bar are commented */
let baseLayerPromises = [], drawnItems;
let baseLayerPromises = [];
// function to read compressed json and create a leaflet layer
const zip2Lyr = (zipFile, layerName, layerTemplate) => {
......@@ -55,7 +53,7 @@ const createPane = (layerPane, zIndex) => {
map.getPane(layerPane).style["mix-blend-mode"] = "normal";
}
let descargas, presas, tuxtlaVH, zms, anps;
let descargas, puentes, presas, cuencas, tuxtlaVH, zms, anps;
// *** WMS INEGI ***
// NOMBRES DE CUERPOS DE AGUA
......@@ -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, {
attribution: "",
pane: "pane_puentes",
//onEachFeature: pop_puentes,
pointToLayer: (_feature, latlng) => {
// var context = {
// feature: feature,
// variables: {}
// };
let puenteMarker = L.BeautifyIcon.icon({
// icon: "grip-lines-vertical",
icon: "puente",
iconSize: [0, 0],
iconAnchor: [7, 10],
......@@ -125,12 +117,7 @@ let layer_puentes = new L.geoJson(null, {
let layer_descargas = new L.geoJson(null, {
attribution: "",
pane: "pane_descargas",
//onEachFeature: pop_descargas,
pointToLayer: (_feature, latlng) => {
// let context = {
// feature: feature,
// variables: {}
// };
let descargasMarker = L.BeautifyIcon.icon({
icon: "desechos",
iconSize: [0, 0],
......@@ -152,12 +139,7 @@ let layer_descargas = new L.geoJson(null, {
let layer_presas = new L.geoJson(null, {
attribution: "",
pane: "pane_presas",
//onEachFeature: pop_presas,
pointToLayer: (_feature, latlng) => {
// let context = {
// feature: feature,
// variables: {}
// };
let presasMarker = L.BeautifyIcon.icon({
icon: "presa",
iconSize: [0, 0],
......@@ -194,7 +176,6 @@ const style_cuencas = () => {
let layer_cuencas = new L.geoJson(null, {
attribution: "",
pane: "pane_cuencas",
//onEachFeature: pop_cuencas,
style: style_cuencas
});
......@@ -214,7 +195,6 @@ const style_limZMs = () => {
let layer_limZMs = new L.geoJson(null, {
attribution: "",
pane: "pane_limZMs",
//onEachFeature: pop_limZMs,
style: style_limZMs
});
......@@ -233,7 +213,6 @@ const style_ZMs = feature => {
fillOpacity: 1,
fillColor: "rgba(139,60,0,0.6)"
}
//break;
case "Villahermosa":
return {
pane: "pane_ZMs",
......@@ -247,14 +226,12 @@ const style_ZMs = feature => {
fillOpacity: 1,
fillColor: "rgba(207,152,62,0.6)"
}
//break;
}
}
let layer_ZMs = new L.geoJson(null, {
attribution: "",
pane: "pane_ZMs",
//onEachFeature: pop_ZMs,
style: style_ZMs
});
......@@ -276,7 +253,6 @@ const style_ANPs = () => {
let layer_ANPs = new L.geoJson(null, {
attribution: "",
pane: "pane_ANPs",
//onEachFeature: pop_ANPs,
style: style_ANPs
});
......@@ -295,12 +271,14 @@ const makeBaseMap = () => {
createPane("pane_wbnames",421);
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_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);
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);
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_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);
......
public/js/cuerpos_charts.js
View file @ b6b23002
......@@ -6,20 +6,20 @@
*/
/* 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) {
target.list = [
am4core.color("#00c5ff"),
am4core.color("#ff5500"),
am4core.color("#98e600"),
am4core.color("#98e600")
];
}
}
function customizeGrip(grip) {
const customizeGrip = grip => {
// Remove default grip image
grip.icon.disabled = true;
......@@ -39,10 +39,10 @@ function customizeGrip(grip) {
// Themes begin
am4core.useTheme(am4themes_animated);
am4core.useTheme(grijalva_theme);
//let mainTextColor = getComputedStyle(document.body).getPropertyValue('--main-text-color');
//let mainTextColor = getComputedStyle(document.body).getPropertyValue("--main-text-color");
// 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) => {
let radarSeries = chart.series.push(new am4charts.RadarSeries());
......@@ -98,10 +98,10 @@ const makeDateRange = (axis, start, width, color) => {
yearList.forEach( y => {
let range = axis.axisRanges.create();
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.fillOpacity = 0.4;
})
});
}
const makeAreaSeries = (chart, field, name) => {
......@@ -201,9 +201,9 @@ const makeRadarChart = (data, months, years) => {
//radarCategoryAxis.cursorTooltipEnabled = false;
//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
radarChart.cursor.events.on("cursorpositionchanged", function(ev) {
radarChart.cursor.events.on("cursorpositionchanged", ev => {
let categoryAxis = ev.target.chart.xAxes.getIndex(0);
categoryAxis.tooltip.hide();
});
......@@ -339,7 +339,7 @@ const makeAreaChart = (data) => {
/* Set up cursor behavior */
let previousDate = "";
areaChart.cursor.events.on("cursorpositionchanged", function(ev) {
areaChart.cursor.events.on("cursorpositionchanged", ev => {
let dateAxis = ev.target.chart.xAxes.getIndex(0);
let yy = dateAxis.positionToDate(dateAxis.toAxisPosition(ev.target.xPosition)).getFullYear().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 = () => {
dateArray = dateArray.sort(sortInitialDateAscending); // order dates
dateMin = d3.min(dateArray);
dateMax = d3.max(dateArray);
//userFiles = dateArray.map( month => timeFormat(month)); // order table names by date
const dates = { min: dateMin, max: dateMax, dates: dateArray };
resolve(dates);
......@@ -307,8 +306,8 @@ const populateMap = async (mapData) => {
});
glmap = L.mapboxGL({
accessToken: "no-token",
style: {
"accessToken": "no-token",
"style": {
"version": 8,
"sources": {},
"layers": []
......@@ -319,11 +318,10 @@ const populateMap = async (mapData) => {
glmap.getMapboxMap().on("style.load", () => {
glmap.getMapboxMap().addSource("basecuerposagua", {
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`],
maxzoom: 14,
minzoom: 7
"type": "vector",
"tiles": [`${baseUrl}/basecuerposagua/mvt/{z}/{x}/{y}?geom_column=geom&columns=descrip`],
"maxzoom": 14,
"minzoom": 7
});
glmap.getMapboxMap().addLayer({
......@@ -408,7 +406,6 @@ const updateMap = (mapData) => {
userFiles.forEach(monthYear => {
if (Object.keys(allTiles).includes(monthYear)) {
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
} else { // if file cannot be found in allTiles, then add 1 to the number of files to process
let newTile = mapboxLayer(monthYear);
......@@ -424,20 +421,19 @@ const updateMap = (mapData) => {
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) => {
let pbfLayer = {
id: monthYear,
source: {
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`],
maxzoom: 14,
minzoom: 7
"id": monthYear,
"source": {
"type": "vector",
"tiles": [`${baseUrl}/${monthYear}/mvt/{z}/{x}/{y}?geom_column=geom&columns=descrip`],
"maxzoom": 14,
"minzoom": 7
},
"source-layer": monthYear,
type: "fill",
"type": "fill",
"paint": {
"fill-opacity": 0,
"fill-color": ["match", ["get", "descrip"],
......@@ -583,7 +579,7 @@ const makeCharts = () => {
// create sets of unique months and years
yearList = [... new Set(userDates.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
// async queries for each date that has been loaded
......@@ -707,8 +703,8 @@ const updateBarChartOnHover = (filterDate, data) => {
popBarsChart.data = cart_pb1;
popBarsChart.invalidateRawData();
// set barChart title when hovering on different bars
let ye = new Intl.DateTimeFormat('es', { year: 'numeric' }).format(filterDate);
let mo = new Intl.DateTimeFormat('es', { month: 'short' }).format(filterDate);
let ye = new Intl.DateTimeFormat("es", { year: "numeric" }).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}`;
// TODO: update barChart when changing dates on timeDimension?
}
......
public/js/evolucion_urbana.js
View file @ b6b23002
......@@ -46,7 +46,6 @@ const setupMap = (dates) => {
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),
northEast = L.latLng(23.02, -99.31),
bounds = L.latLngBounds(southWest, northEast);
......@@ -115,9 +114,9 @@ const setupMap = (dates) => {
});
const offsetGlobal = (center, zoom, refMap, tgtMap) => {
var refC = refMap.getContainer();
var tgtC = tgtMap.getContainer();
var pt = refMap.project(center, zoom)
let refC = refMap.getContainer();
let tgtC = tgtMap.getContainer();
let pt = refMap.project(center, zoom)
.subtract([refC.offsetLeft, refC.offsetTop])
.subtract(refMap.getSize().divideBy(2))
.add([tgtC.offsetLeft, tgtC.offsetTop])
......@@ -137,8 +136,8 @@ const populateMap = async(mapData) => {
let map = mapData.map;
glmap = L.mapboxGL({
accessToken: "no-token",
style: {
"accessToken": "no-token",
"style": {
"version": 8,
"sources": {},
"layers": []
......@@ -149,7 +148,7 @@ const populateMap = async(mapData) => {
glmap.getMapboxMap().on("style.load", () => {
glmap.getMapboxMap().addLayer(tiles);
//glmap.getMapboxMap().setPaintProperty(tiles, "fill-opacity", 0.7)
//glmap.getMapboxMap().setPaintProperty(tiles, "fill-opacity", 0.7);
timeDimensionControl.addTo(map);
// Pass dummy geojson layer to timeDimension in order to register and sync
......@@ -166,7 +165,7 @@ const populateMap = async(mapData) => {
"Carto Light": cartoLightLayer,
"OpenStreetMap": osmLayer
};
var overlays = {
let overlays = {
// "<span id=\"cuencaOverlay\">Agua en la cuenca del Grijalva</span>": timeLayer
};
......@@ -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\">";
// create legend items
years.forEach( y => {
......@@ -225,38 +223,27 @@ const populateMap = async(mapData) => {
// define MVT layer for given table and all trimester column
const mapboxLayer = (table) => {
let pbfLayer = {
id: table,
source: {
type: "vector",
tiles: [`${baseUrl}/${table}/mvt/{z}/{x}/{y}?geom_column=geom&columns=yeartrimes`],
maxzoom: 19,
minzoom: 6
"id": table,
"source": {
"type": "vector",
"tiles": [`${baseUrl}/${table}/mvt/{z}/{x}/{y}?geom_column=geom&columns=yeartrimes`],
"maxzoom": 19,
"minzoom": 6
},
"source-layer": table,
type: "fill",
"type": "fill",
"paint": {
"fill-opacity": 0.7,
"fill-color": [
"interpolate",
["linear"],
["get", "yeartrimes"],
2014, "rgb(49,54,149)",
2016, "rgb(255,255,191)",
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
]*/
2014, "rgb(49,54,149)",
2016, "rgb(255,255,191)",
2019, "rgb(158,1,66)"
]
}
}
/*currentTiles[monthYear] = pbfLayer;
allTiles[monthYear] = pbfLayer;*/
return pbfLayer;
}
......@@ -295,7 +282,6 @@ L.TimeDimension.Layer.Tile = L.TimeDimension.Layer.extend({
let tiArray = L.TimeDimension.Util.parseTimeInterval(this.options.timeInterval);
let period = this.options.period || "P1D";
let validTimeRange = this.options.validTimeRange || undefined;
//alert("times");
return L.TimeDimension.Util.explodeTimeRange(tiArray[0], tiArray[1], period, validTimeRange);
} else {
return [];
......@@ -338,7 +324,7 @@ L.TimeDimension.Layer.Tile = L.TimeDimension.Layer.extend({
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
// get data for time
......@@ -347,14 +333,12 @@ L.TimeDimension.Layer.Tile = L.TimeDimension.Layer.extend({
m = d.getUTCMonth(),
yeartrimester = year + "." + (m / 3 + 1),
yearQ = `Q${m/3+1} ${year}`;
//month = monthArray[m].toLowerCase(),
//monthYear = `${month}_${year}`;
// Update title
let title = $("#title");
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)];
glmap.getMapboxMap().setFilter("urbanization_year", filter);
}
......
public/js/evolucion_urbana_charts.js
View file @ b6b23002
......@@ -9,17 +9,15 @@
// amchart
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
var chart = am4core.create("topChart", am4charts.XYChart);
let chart = am4core.create("topChart", am4charts.XYChart);
let ctitle = chart.titles.create();
ctitle.text = "Área urbanizada trimestralmente";
ctitle.fontSize = 15;
//title.marginBottom = 30;
ctitle.fill = am4core.color(mainTextColor);
// Create axes
......@@ -88,8 +86,6 @@ am4core.ready(function() {
valueAxisL.fontSize = 15;
valueAxisL.renderer.labels.template.fontSize = 15;
//valueAxisL.calculateTotals = true;
//valueAxisL.min = valueAxis3.minZoomed;
//valueAxisL.max = valueAxis3.maxZoomed;
// Modify chart's colors
chart.colors.list = [
......@@ -163,12 +159,8 @@ am4core.ready(function() {
chart.legend.labels.template.fill = am4core.color(mainTextColor);
//Add scrollbar
// chart.legend.labels.template.fill = am4core.color(mainTextColor);
chart.scrollbarX = new am4charts.XYChartScrollbar();
// chart.scrollbarX.series.push(series3);
chart.scrollbarX.minHeight = 1;
//chart.scrollbarX.series.push(series3);
chart.scrollbarX.parent = chart.bottomAxesContainer;
// pie chart
......@@ -223,7 +215,7 @@ am4core.ready(function() {
// 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
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() {
rchart.endAngle = rchart.startAngle + 180;
// Create axes
// var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
var dateAxis = rchart.xAxes.push(new am4charts.CategoryAxis());
// let dateAxis = chart.xAxes.push(new am4charts.DateAxis());
let dateAxis = rchart.xAxes.push(new am4charts.CategoryAxis());
dateAxis.dataFields.category = "qq";
// dateAxis.baseInterval = { timeUnit: "month", count: 3 };
//dateAxis.renderer.innerRadius = am4core.percent(40);
......@@ -252,7 +244,7 @@ am4core.ready(function() {
dateAxis.cursorTooltipEnabled = false;
// 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.radius = am4core.percent(40);
valueAxis.renderer.minGridDistance = 15;
......@@ -265,7 +257,7 @@ am4core.ready(function() {
// valueAxis.calculateTotals = true;
//Add series
var columnSeries = rchart.series.push(new am4charts.RadarColumnSeries());
let columnSeries = rchart.series.push(new am4charts.RadarColumnSeries());
// columnSeries.dataFields.dateX = "date";
columnSeries.dataFields.categoryX = "qq"; //date
......@@ -281,7 +273,7 @@ am4core.ready(function() {
columnSeries.tooltip.background.fillOpacity = 0.5;
columnSeries.columns.template.tooltipText = "[bold]{qq}[/]\nTotal {valueY.formatNumber('#,###.##')} Ha";
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")) {
return am4core.color("#F18275");
} else if (target.dataItem && (target.dataItem.categoryX == "Q2")) {
......@@ -295,13 +287,7 @@ am4core.ready(function() {
}
});
/* //ANILLO EXTERIOR
var range = dateAxis.axisRanges.create();
range.category = "January";
range.endCategory = "April";
range.axisFill.fill = am4core.color("#396478");
range.axisFill.fillOpacity = 0.3;*/
//ANILLO EXTERIOR
let yearsAxis = rchart.yAxes.push(new am4charts.CategoryAxis());
let bubbleSeries = rchart.series.push(new am4charts.RadarSeries());
......@@ -314,9 +300,7 @@ am4core.ready(function() {
});
// weekday axis
//var weekDayAxis = chart.yAxes.push(new am4charts.CategoryAxis());
yearsAxis.dataFields.category = "yy";
//yearsAxis.data = dailyData;
yearsAxis.renderer.innerRadius = am4core.percent(50);
yearsAxis.renderer.minGridDistance = 10;
yearsAxis.renderer.grid.template.location = 0;
......@@ -330,12 +314,10 @@ am4core.ready(function() {
yearsAxis.numberFormatter.numberFormat = "####";
// bubble series
//var bubbleSeries = chart.series.push(new am4charts.RadarSeries());
bubbleSeries.dataFields.categoryX = "qq";
bubbleSeries.dataFields.categoryY = "yy";
bubbleSeries.dataFields.value = "area";
bubbleSeries.yAxis = yearsAxis;
//bubbleSeries.data = dailyData;
bubbleSeries.strokeOpacity = 0;
bubbleSeries.maskBullets = false;
bubbleSeries.cursorTooltipEnabled = false;
......@@ -344,16 +326,14 @@ am4core.ready(function() {
bubbleSeries.tooltip.background.fillOpacity = 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.stroke = am4core.color(mainTextColor);
//bubbleBullet.fill = am4core.color("#b9ce37");
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;
});
// 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")) {
return am4core.color("#313695");
} else if (target.dataItem && (target.dataItem.categoryY == "2015")) {
......@@ -371,7 +351,7 @@ am4core.ready(function() {
}
});
// 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")) {
return am4core.color("#313695");
} else if (target.dataItem && (target.dataItem.categoryY == "2015")) {
......@@ -397,7 +377,7 @@ am4core.ready(function() {
rchart.cursor.innerRadius = am4core.percent(40);
rchart.cursor.lineY.disabled = true;
var label = rchart.radarContainer.createChild(am4core.Label);
let label = rchart.radarContainer.createChild(am4core.Label);
label.horizontalCenter = "middle";
label.verticalCenter = "middle";
label.fill = am4core.color(mainTextColor);
......@@ -405,7 +385,7 @@ am4core.ready(function() {
//label.fontWeight = "bold";
label.text = "TOTAL\nTRIMESTRAL";
var title = rchart.createChild(am4core.Label);
let title = rchart.createChild(am4core.Label);
title.fill = am4core.color("#b9ce37");
title.fontSize = 15;
title.isMeasured = false;
......
public/js/grijalva_basemap.js
View file @ b6b23002
......@@ -5,28 +5,11 @@
* August-September 2019
*/
/* global baseFileSize, formatBytes, Promise, omnivore, JSZip, map, layerControl, updateCharts */
/* global Promise, omnivore, JSZip, map, layerControl, updateCharts */
/* exported makeBaseMap, baseLayerPromises, drawnItems */
/* Lines related to displaying loading bar are commented */
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++;
}
});*/
let baseLayerPromises = [],
drawnItems;
// function to read compressed json and create a leaflet layer
const zip2Lyr = (zipFile, layerName, layerTemplate) => {
......@@ -49,17 +32,7 @@ const zip2Lyr = (zipFile, layerName, layerTemplate) => {
.then( ([file, type]) => {
file.async("string").then(
function success(text) { // 5) display the result
/*let baseFile = zipFile.split("/")[3];
¬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") {
if (type == "json") {
layerTemplate.addData(JSON.parse(text));
} else if (type == "topojson") {
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
let layer_escuelas = new L.geoJson(null, {
attribution: "",
pane: "pane_escuelas",
//onEachFeature: pop_escuelas,
pointToLayer: (feature, latlng) => {
// let context = {
// feature: feature,
// variables: {}
// };
let escuelaMarker = L.BeautifyIcon.icon({
icon: "escuela",
iconSize: [0, 0],
......@@ -195,12 +163,7 @@ let layer_escuelas = new L.geoJson(null, {
let layer_hospitales = new L.geoJson(null, {
attribution: "",
pane: "pane_hospitales",
//onEachFeature: pop_hospitales,
pointToLayer: (_feature, latlng) => {
// let context = {
// feature: feature,
// variables: {}
// };
let hospitalMarker = L.BeautifyIcon.icon({
icon: "desechos",
iconSize: [0, 0],
......@@ -223,12 +186,7 @@ let layer_hospitales = new L.geoJson(null, {
let layer_hoteles = new L.geoJson(null, {
attribution: "",
pane: "pane_hoteles",
//onEachFeature: pop_hoteles,
pointToLayer: (_feature, latlng) => {
// let context = {
// feature: feature,
// variables: {}
// };
let hotelMarker = L.BeautifyIcon.icon({
icon: "bed",
iconSize: [0, 0],
......@@ -250,14 +208,8 @@ let layer_hoteles = new L.geoJson(null, {
let layer_puentes = new L.geoJson(null, {
attribution: "",
pane: "pane_puentes",
//onEachFeature: pop_puentes,
pointToLayer: (_feature, latlng) => {
// var context = {
// feature: feature,
// variables: {}
// };
let puenteMarker = L.BeautifyIcon.icon({
// icon: "grip-lines-vertical",
icon: "puente",
iconSize: [0, 0],
iconAnchor: [7, 10],
......@@ -278,12 +230,7 @@ let layer_puentes = new L.geoJson(null, {
let layer_puerto = new L.geoJson(null, {
attribution: "",
pane: "pane_puerto",
//onEachFeature: pop_puerto,
pointToLayer: (_feature, latlng) => {
// let context = {
// feature: feature,
// variables: {}
// };
let puertoMarker = L.BeautifyIcon.icon({
icon: "puertoindustrial",
iconSize: [0, 0],
......@@ -305,13 +252,8 @@ let layer_puerto = new L.geoJson(null, {
let layer_frontera = new L.geoJson(null, {
attribution: "",
pane: "pane_frontera",
//onEachFeature: pop_frontera,
styles: null,
pointToLayer: (_feature, latlng) => {
// let context = {
// feature: feature,
// variables: {}
// };
let fronteraMarker = L.BeautifyIcon.icon({
icon: "puntofronterizo",
iconSize: [0, 0],
......@@ -333,12 +275,7 @@ let layer_frontera = new L.geoJson(null, {
let layer_descargas = new L.geoJson(null, {
attribution: "",
pane: "pane_descargas",
//onEachFeature: pop_descargas,
pointToLayer: (_feature, latlng) => {
// let context = {
// feature: feature,
// variables: {}
// };
let descargasMarker = L.BeautifyIcon.icon({
icon: "desechos",
iconSize: [0, 0],
......@@ -360,12 +297,7 @@ let layer_descargas = new L.geoJson(null, {
let layer_presas = new L.geoJson(null, {
attribution: "",
pane: "pane_presas",
//onEachFeature: pop_presas,
pointToLayer: (_feature, latlng) => {
// let context = {
// feature: feature,
// variables: {}
// };
let presasMarker = L.BeautifyIcon.icon({
icon: "presa",
iconSize: [0, 0],
......@@ -402,7 +334,6 @@ const style_cuencas = () => {
let layer_cuencas = new L.geoJson(null, {
attribution: "",
pane: "pane_cuencas",
//onEachFeature: pop_cuencas,
style: style_cuencas
});
......@@ -422,7 +353,6 @@ const style_limZMs = () => {
let layer_limZMs = new L.geoJson(null, {
attribution: "",
pane: "pane_limZMs",
//onEachFeature: pop_limZMs,
style: style_limZMs
});
......@@ -441,7 +371,6 @@ const style_ZMs = feature => {
fillOpacity: 1,
fillColor: "rgba(139,60,0,0.6)"
}
//break;
case "Villahermosa":
return {
pane: "pane_ZMs",
......@@ -455,14 +384,12 @@ const style_ZMs = feature => {
fillOpacity: 1,
fillColor: "rgba(207,152,62,0.6)"
}
//break;
}
}
let layer_ZMs = new L.geoJson(null, {
attribution: "",
pane: "pane_ZMs",
//onEachFeature: pop_ZMs,
style: style_ZMs
});
......@@ -484,7 +411,6 @@ const style_ANPs = () => {
let layer_ANPs = new L.geoJson(null, {
attribution: "",
pane: "pane_ANPs",
//onEachFeature: pop_ANPs,
style: style_ANPs
});
......@@ -521,7 +447,7 @@ const toggleButtons = () => {
b.onClick = null;
b.classList.remove("draw-control-disabled");
}
})
});
}
const makeBaseMap = () => {
......@@ -547,10 +473,6 @@ const makeBaseMap = () => {
createPane("pane_escuelas", 420);
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");
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");
......@@ -699,18 +621,12 @@ const makeBaseMap = () => {
draw: {
polygon: {
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: {
color: "#42ffc3"
}
},
// disable toolbar item by setting it to false
polyline: {
//allowIntersection:false,
shapeOptions: {
color: "#42ffc3"
}
......@@ -725,8 +641,7 @@ const makeBaseMap = () => {
circle: false // Turns off this drawing tool
},
edit: {
featureGroup: drawnItems,
//remove: false
featureGroup: drawnItems
}
});
map.addControl(drawControl);
......
public/js/grijalva_charts.js
View file @ b6b23002
......@@ -219,12 +219,12 @@ const makeIndicatorGraph = () => {
// define axes with ranges
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
xLine.domain([minDate, maxDate]).nice();
//yLine.domain(d3.extent(data, function(d) { return d[lineVariables[0]]; })).nice();
//yLine.domain([0, d3.max(data, function(d) { return d[lineVariables[0]]; })]).nice();
//yLine.domain(d3.extent(data, d => 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
//let minDomain = d3.min(data.map(d => d.values).flat().map(d => d.value));
......@@ -281,7 +281,7 @@ const makeIndicatorGraph = () => {
// color axis labels
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");
title.text(chart.title())
......@@ -323,8 +323,8 @@ const makeIndicatorGraph = () => {
//.nice(d3.timeMonth)
.range([0, width - margin.left - margin.right - 30])
.clamp(true);
//yLine.domain(d3.extent(data, function(d) { return d[lineVariables[0]]; }))
//yLine.domain([0, d3.max(data, function(d) { return d[lineVariables[0]]; })]).nice()
//yLine.domain(d3.extent(data, d => d[lineVariables[0]] ));
//yLine.domain([0, d3.max(data, d => d[lineVariables[0]] )]).nice();
// 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));
......@@ -458,7 +458,7 @@ const makeIndicatorGraph = () => {
let circles = g.select(".circles"),
tooltip = d3.select(".tooltip");
//tooltipFormat = d3.timeFormat("%b "%y"),
//tooltipFormat = d3.format(",.2f")
//tooltipFormat = d3.format(",.2f");
//tooltipFormat = d3.format(",.3s");
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 = () => {
d3.json(layersQuery).then(layers => {
layers.forEach(layer => {
dateArray.push(timeParse(layer.f_table_name)); // convert filenames to dates
})
});
dateArray = dateArray.sort(sortInitialDateAscending); // order dates
dateMin = d3.min(dateArray);
......@@ -199,7 +199,7 @@ const populateDates = (dates) => { // fill out date pickers with available dates
// hide initial screen and show map
$("#startHeader").remove();
$("#initial-backdrop").remove();
$("#mainContainer")[0].style.setProperty("display", "flex", "important")
$("#mainContainer")[0].style.setProperty("display", "flex", "important");
$("#mexmap").show();
// When closing final-date, either setup or update map
......@@ -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\"]"));
}
});
})
});
}
const setupMap = (dates) => {
......@@ -296,9 +296,9 @@ const setupMap = (dates) => {
});
const offsetGlobal = (center, zoom, refMap, tgtMap) => {
var refC = refMap.getContainer();
var tgtC = tgtMap.getContainer();
var pt = refMap.project(center, zoom)
let refC = refMap.getContainer();
let tgtC = tgtMap.getContainer();
let pt = refMap.project(center, zoom)
.subtract([refC.offsetLeft, refC.offsetTop])
.subtract(refMap.getSize().divideBy(2))
.add([tgtC.offsetLeft, tgtC.offsetTop])
......@@ -404,8 +404,8 @@ const populateMap = async (mapData) => {
});
glmap = L.mapboxGL({
accessToken: "no-token",
style: {
"accessToken": "no-token",
"style": {
"version": 8,
"sources": {},
"layers": []
......@@ -420,7 +420,7 @@ const populateMap = async (mapData) => {
Object.keys(allTiles).forEach(layer => {
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) => {
"Carto Light": cartoLightLayer,
"OpenStreetMap": osmLayer
};
var overlays = {
let overlays = {
"<span id=\"cuencaOverlay\">Agua en la cuenca del Grijalva</span>": timeLayer
};
......@@ -475,7 +475,7 @@ const updateMap = (mapData) => {
let newTile = mapboxLayer(monthYear);
glmap.getMapboxMap().addLayer(newTile);
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) => {
});
});
resolve({"map": map, "minIndicators": minIndicators, "maxIndicators": maxIndicators});
})
});
}).then( values => { // once we have new minmax values, style all tiles
let option = $("#indicatorSelect").val(), // option selected from dropdrown
min = values.minIndicators,
......@@ -537,31 +537,17 @@ const updateCharts = async () => {
// define MVT layer for given month table and all indicators
const mapboxLayer = (monthYear) => {
let pbfLayer = {
id: monthYear,
source: {
type: "vector",
tiles: [`${baseUrl}/${monthYear}/mvt/{z}/{x}/{y}?geom_column=geom&columns=${indicators.join()}`],
maxzoom: 19,
minzoom: 6
"id": monthYear,
"source": {
"type": "vector",
"tiles": [`${baseUrl}/${monthYear}/mvt/{z}/{x}/{y}?geom_column=geom&columns=${indicators.join()}`],
"maxzoom": 19,
"minzoom": 6
},
"source-layer": monthYear,
type: "fill",
"type": "fill",
"paint": {
"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;
......@@ -647,7 +633,7 @@ L.TimeDimension.Layer.Tile = L.TimeDimension.Layer.extend({
return;
}
var time = this._timeDimension.getCurrentTime();
let time = this._timeDimension.getCurrentTime();
// get data for time
let d = new Date(time),
......@@ -668,7 +654,7 @@ L.TimeDimension.Layer.Tile = L.TimeDimension.Layer.extend({
//console.time("process");
//console.log("data for", monthYear);
//console.log(currentTiles)
//console.log(currentTiles);
Object.keys(allTiles).forEach(layer => {
if (layer !== monthYear) { // hide all other months
glmap.getMapboxMap().setPaintProperty(layer, "fill-opacity", 0);
......@@ -701,7 +687,7 @@ $("#indicatorSelect").on("change", function() {
const styleTiles = (option, minIndicators, maxIndicators) => {
// define color scale domain based on min-max values for selected indicator
let domain = [minIndicators[option], maxIndicators[option]];
//console.log(domain)
//console.log(domain);
scale = chroma.scale("PuBu").padding([0.5, 0]).domain(domain).classes(5);
Object.keys(currentTiles).forEach(layer => {
let color = [
......@@ -726,7 +712,7 @@ legend.onAdd = () => {
let optionIndex = indicators.indexOf(option);
let legendText = indicatorsUnits[optionIndex] == "" ? indicatorsNames[optionIndex] :
`${indicatorsNames[optionIndex]} (${indicatorsUnits[optionIndex]})`;
var html = `<h6>${legendText}</h6><ul>`;
let html = `<h6>${legendText}</h6><ul>`;
let classes = scale.classes();
classes.forEach( (c, idx, array) => {
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 = () => {
d3.json(layersQuery).then(layers => {
layers.forEach(layer => {
dateArray.push(timeParse(layer.f_table_name)); // convert filenames to dates
})
});
dateArray = dateArray.sort(sortInitialDateAscending); // order dates
dateMin = d3.min(dateArray);
......@@ -199,7 +199,7 @@ const populateDates = (dates) => { // fill out date pickers with available dates
// hide initial screen and show map
$("#startHeader").remove();
$("#initial-backdrop").remove();
$("#mainContainer")[0].style.setProperty("display", "flex", "important")
$("#mainContainer")[0].style.setProperty("display", "flex", "important");
$("#mexmap").show();
// When closing final-date, either setup or update map
......@@ -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\"]"));
}
});
})
});
}
const setupMap = (dates) => {
......@@ -296,9 +296,9 @@ const setupMap = (dates) => {
});
const offsetGlobal = (center, zoom, refMap, tgtMap) => {
var refC = refMap.getContainer();
var tgtC = tgtMap.getContainer();
var pt = refMap.project(center, zoom)
let refC = refMap.getContainer();
let tgtC = tgtMap.getContainer();
let pt = refMap.project(center, zoom)
.subtract([refC.offsetLeft, refC.offsetTop])
.subtract(refMap.getSize().divideBy(2))
.add([tgtC.offsetLeft, tgtC.offsetTop])
......@@ -420,7 +420,7 @@ const populateMap = async (mapData) => {
Object.keys(allTiles).forEach(layer => {
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) => {
"Carto Light": cartoLightLayer,
"OpenStreetMap": osmLayer
};
var overlays = {
let overlays = {
"<span id=\"cuencaOverlay\">Agua en la cuenca del Grijalva</span>": timeLayer
};
......@@ -475,7 +475,7 @@ const updateMap = (mapData) => {
let newTile = mapboxLayer(monthYear);
glmap.getMapboxMap().addLayer(newTile);
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) => {
});
});
resolve({"map": map, "minIndicators": minIndicators, "maxIndicators": maxIndicators});
})
});
}).then( values => { // once we have new minmax values, style all tiles
let option = $("#indicatorSelect").val(), // option selected from dropdrown
min = values.minIndicators,
......@@ -547,21 +547,7 @@ const mapboxLayer = (monthYear) => {
"source-layer": monthYear,
type: "fill",
"paint": {
"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
]*/
"fill-opacity": 0
}
}
currentTiles[monthYear] = pbfLayer;
......@@ -647,7 +633,7 @@ L.TimeDimension.Layer.Tile = L.TimeDimension.Layer.extend({
return;
}
var time = this._timeDimension.getCurrentTime();
let time = this._timeDimension.getCurrentTime();
// get data for time
let d = new Date(time),
......@@ -668,7 +654,7 @@ L.TimeDimension.Layer.Tile = L.TimeDimension.Layer.extend({
//console.time("process");
//console.log("data for", monthYear);
//console.log(currentTiles)
//console.log(currentTiles);
Object.keys(allTiles).forEach(layer => {
if (layer !== monthYear) { // hide all other months
glmap.getMapboxMap().setPaintProperty(layer, "fill-opacity", 0);
......@@ -701,7 +687,7 @@ $("#indicatorSelect").on("change", function() {
const styleTiles = (option, minIndicators, maxIndicators) => {
// define color scale domain based on min-max values for selected indicator
let domain = [minIndicators[option], maxIndicators[option]];
//console.log(domain)
//console.log(domain);
scale = chroma.scale("PuBu").padding([0.5, 0]).domain(domain).classes(5);
Object.keys(currentTiles).forEach(layer => {
let color = [
......@@ -726,7 +712,7 @@ legend.onAdd = () => {
let optionIndex = indicators.indexOf(option);
let legendText = indicatorsUnits[optionIndex] == "" ? indicatorsNames[optionIndex] :
`${indicatorsNames[optionIndex]} (${indicatorsUnits[optionIndex]})`;
var html = `<h6>${legendText}</h6><ul>`;
let html = `<h6>${legendText}</h6><ul>`;
let classes = scale.classes();
classes.forEach( (c, idx, array) => {
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