Skip to content

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

Added styled periurbano region and custom pane for tiles. Hide/show tiles on layer control switch

parent 9f584d23
Show whitespace changes
Inline Side-by-side
Showing with 111 additions and 56 deletions
public/centropais/data/periurbanoBajio.geojson 0 → 100644
View file @ 3415e849
This source diff could not be displayed because it is too large. You can view the blob instead.
public/js/centropais_periurbano.js
View file @ 3415e849
......@@ -8,8 +8,7 @@
/* globals Promise, omnivore */
/* exported layerControl */
let monthArray = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"],
dateArray = [],
let dateArray = [],
userFiles = [],
dateMin,
dateMax,
......@@ -19,8 +18,7 @@ let monthArray = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio"
glmap,
osmLayer, cartoLightLayer, cartoDarkLayer,
timeLayer,
layerControl,
tiles;
layerControl;
const baseUrl = new URL(window.location.href).origin; // returns "http://localhost:8090"
// use `${baseUrl}/something`
......@@ -163,11 +161,9 @@ const setupMap = (dates) => {
const populateMap = async (mapData) => {
//tiles = mapboxLayer("urbanization_year");
let map = mapData.map;
let munisLayer = L.geoJson(null, {
/* let munisLayer = L.geoJson(null, {
style: {
stroke: true,
weight: 5,
......@@ -177,8 +173,8 @@ const populateMap = async (mapData) => {
},
interactive: false
});
//let munis = omnivore.geojson("data/municipios.geojson", null, munisLayer);
//munis.addTo(map);
let munis = omnivore.geojson("data/municipios.geojson", null, munisLayer);
munis.addTo(map);
let corredorLayer = L.geoJson(null, {
style: {
......@@ -192,8 +188,8 @@ const populateMap = async (mapData) => {
},
interactive: false
});
//let corredor = omnivore.geojson("data/corredor_bajio.geojson", null, corredorLayer);
//corredor.addTo(map);
let corredor = omnivore.geojson("data/corredor_bajio.geojson", null, corredorLayer);
corredor.addTo(map);
let bufferConLayer = L.geoJson(null, {
style: {
......@@ -207,8 +203,8 @@ const populateMap = async (mapData) => {
},
interactive: false
});
//let bufferCon = omnivore.geojson("data/buffer_corredor_con_locs.geojson", null, bufferConLayer);
//bufferCon.addTo(map);
let bufferCon = omnivore.geojson("data/buffer_corredor_con_locs.geojson", null, bufferConLayer);
bufferCon.addTo(map);
let bufferSinLayer = L.geoJson(null, {
style: {
......@@ -222,21 +218,57 @@ const populateMap = async (mapData) => {
},
interactive: false
});
//let bufferSin = omnivore.geojson("data/buffer_corredor_sin_locs.geojson", null, bufferSinLayer);
//bufferSin.addTo(map);
let bufferSin = omnivore.geojson("data/buffer_corredor_sin_locs.geojson", null, bufferSinLayer);
bufferSin.addTo(map);
*/
let colors = {
"Aguascalientes": "#f40b1f",
"San Luis Potosi": "#f40b1f",
"Rioverde": "#f40b1f",
"La Piedad-Pénjamo": "#f40b1f",
"Moroleón-Uriangato": "#f40b1f",
"Corredor del Bajío": "#f40b1f",
"Tramo San Juan del Rio - Querétaro": "#fddfb9",
"Tramo Querétaro - Celaya": "#fb9a99",
"Tramo Celaya - Salamanca": "#33a09b",
"Tramo Salamanca - Irapuato": "#de6eb4",
"Tramo Irapuato - León": "#4db0ec",
"Tramo León - San Fracisco del Rincón": "#2be829"
};
let periurbanoBajioLayer = L.geoJson(null, {
style: feature => {
return {stroke: true,
weight: 1,
color: colors[feature.properties["Region"]],
opacity: 0.2,
fill: true,
fillOpacity: 0.2,
fillColor: colors[feature.properties["Region"]]};
},
interactive: false
});
let periurbanoBajio = omnivore.geojson("data/periurbanoBajio.geojson", null, periurbanoBajioLayer);
periurbanoBajio.addTo(map);
// create mvt layers
userFiles.forEach(f => {
mapboxLayer(f);
});
// define leaflet pane with higher z-index so tiles are on top of other stuff
map.createPane("urbanizationPane");
map.getPane("urbanizationPane").style.zIndex = 650;
glmap = L.mapboxGL({
accesToken: "no-token",
style: {
"version": 8,
"sources": {},
"layers": []
}
},
pane: "urbanizationPane"
}).addTo(map);
// after mapboxGL map is ready with styles do this:
......@@ -252,28 +284,39 @@ const populateMap = async (mapData) => {
}
})
//glmap.getMapboxMap().addLayer(tiles);
/*glmap.getMapboxMap().addSource("munisvt", {
type: "vector",
tiles: [`${baseUrl}/periurbano_2015/mvt/{z}/{x}/{y}?geom_column=geom&columns=gridcode`],
//data: "http://localhost:8090/centropais/data/municipios.geojson",
maxzoom: 19,
minzoom: 6
/* glmap.getMapboxMap().addSource("munisLayer", {
//type: "vector",
//tiles: [`${baseUrl}/periurbano_2015/mvt/{z}/{x}/{y}?geom_column=geom&columns=gridcode,grd_urb`],
type: "geojson",
data: "http://localhost:8090/centropais/data/municipios.geojson",
tolerance: 5
});
glmap.getMapboxMap().addLayer({
id: "munisvt",
source: "munisvt",
"source-layer": "periurbano_2015", //table name
//"layout": {},
id: "munisFill",
source: "munisLayer",
//"source-layer": "periurbano_2015", //table name
type: "fill",
paint: {
"fill-opacity": 0.5,
"fill-color": "#088"
"fill-opacity": 0.1,
"fill-color": "grey"
}
});*/
})
.addLayer({
id: "munisBorder",
source: "munisLayer",
type: "line",
paint: {
"line-opacity": 0.15,
"line-color": "grey",
"line-width": 5,
},
'layout': {
'line-join': 'round',
'line-cap': 'round'
},
});
*/
timeDimensionControl.addTo(map);
// Pass dummy geojson layer to timeDimension in order to register and sync
timeLayer = L.timeDimension.layer.Tile(L.geoJSON(), {
......@@ -290,11 +333,13 @@ const populateMap = async (mapData) => {
"OpenStreetMap": osmLayer
};
var overlays = {
//"<span id=\"bufferSin\"><svg height=\"15\" width=\"15\"><path d=\"M0 0 L15 0 L15 10 L0 10 Z \" x=\"5\" y=\"5\" fill=\"rgba(196,60,57,0.25)\" stroke=\"#c43c39\"></rect></svg>&nbsp; Interfaz periurbana del Corredor del Baj&iacute;o de<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2km <b>sin</b> localidades de m&aacute;s 10mil habitantes</span>": bufferSin,
//"<span id=\"bufferCon\"><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.25)\" stroke=\"#d5bef5\"></rect></svg>&nbsp; Interfaz periurbana del Corredor del Baj&iacute;o de<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2km <b>con</b> localidades de m&aacute;s 10mil habitantes</span>": bufferCon,
//"<span id=\"corredor\"><svg height=\"15\" width=\"15\"><path d=\"M0 0 L15 0 L15 10 L0 10 Z \" x=\"5\" y=\"5\" fill=\"rgba(0,240,2,0.05)\" stroke=\"#00ff00\"></rect></svg>&nbsp; Corredor del Baj&iacute;o</span>": corredor,
//"<span id=\"munis\"><svg height=\"15\" width=\"15\"><path d=\"M0 0 L15 0 L15 10 L0 10 Z \" x=\"5\" y=\"5\" fill=\"rgba(128,128,128, 0.05)\" stroke=\"#808080\"></rect></svg>&nbsp; Contexto municipal</span>": munis,
};
"<span id=\"gradoUrbanizacion\">&nbsp; Grado de urbanizaci&oacute;n</span>": timeLayer,
"<span id=\"periurbanoBajio\">Regi&oacute;n periurbana y del corredor del Baj&iacute;o</span>": periurbanoBajio,
/*"<span id=\"bufferSin\"><svg height=\"15\" width=\"15\"><path d=\"M0 0 L15 0 L15 10 L0 10 Z \" x=\"5\" y=\"5\" fill=\"rgba(196,60,57,0.25)\" stroke=\"#c43c39\"></rect></svg>&nbsp; Interfaz periurbana del Corredor del Baj&iacute;o de<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2km <b>sin</b> localidades de m&aacute;s 10mil habitantes</span>": bufferSin,
"<span id=\"bufferCon\"><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.25)\" stroke=\"#d5bef5\"></rect></svg>&nbsp; Interfaz periurbana del Corredor del Baj&iacute;o de<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2km <b>con</b> localidades de m&aacute;s 10mil habitantes</span>": bufferCon,
"<span id=\"corredor\"><svg height=\"15\" width=\"15\"><path d=\"M0 0 L15 0 L15 10 L0 10 Z \" x=\"5\" y=\"5\" fill=\"rgba(0,240,2,0.05)\" stroke=\"#00ff00\"></rect></svg>&nbsp; Corredor del Baj&iacute;o</span>": corredor,
"<span id=\"munis\"><svg height=\"15\" width=\"15\"><path d=\"M0 0 L15 0 L15 10 L0 10 Z \" x=\"5\" y=\"5\" fill=\"rgba(128,128,128, 0.05)\" stroke=\"#808080\"></rect></svg>&nbsp; Contexto municipal</span>": munis,
*/};
// fix for leaflet-mapbox-gl v. 0.0.11 that adds map's to tile pane:
// get children of map tile pane, create array from it and iterate
......@@ -324,10 +369,10 @@ const mapboxLayer = (table) => {
"fill-color": [
"match",
["get", "grd_urb"],
"Bajo", "rgb(49,54,149)",
"Bajo", "rgb(49,149,54)",
"Medio", "rgb(255,255,191)",
"Alto", "rgb(158,1,66)",
/* other values */ "#ccc"
"#ccc" // other values
]
}
}
......@@ -365,7 +410,7 @@ const setupTimeDimensionControl = () => {
}
L.TimeDimension.Layer.Tile = L.TimeDimension.Layer.extend({
_setAvailableTimes: function() {
_setAvailableTimes: function () {
if (this.options.times) {
return L.TimeDimension.Util.parseTimesExpression(this.options.times);
} else if (this.options.timeInterval) {
......@@ -379,7 +424,7 @@ L.TimeDimension.Layer.Tile = L.TimeDimension.Layer.extend({
}
},
onAdd: function(map) {
onAdd: function (map) {
// Don't call prototype so this_update() does not get called twice
//L.TimeDimension.Layer.prototype.onAdd.call(this, map);
this._map = map;
......@@ -393,24 +438,24 @@ L.TimeDimension.Layer.Tile = L.TimeDimension.Layer.extend({
this._update();
},
onRemove: function(map) {
onRemove: function (map) {
this._timeDimension.unregisterSyncedLayer(this);
this._timeDimension.off("timeloading", this._onNewTimeLoading, this);
this._timeDimension.off("timeload", this._update, this);
//this._baseLayer.getContainer().style.display = "none";
/*Object.keys(allTiles).forEach(layer => { // hide all tiles
Object.keys(allTiles).forEach(layer => { // hide all tiles
glmap.getMapboxMap().setPaintProperty(layer, "fill-opacity", 0);
});*/
});
//this.eachLayer(map.removeLayer, map);
//this._map = null;
},
isReady: function(time) {
isReady: function (time) {
// to be implemented for each type of layer
return true;
},
_update: function() {
_update: function () {
if (!this._baseLayer || !this._map) {
return;
}
......@@ -420,17 +465,11 @@ L.TimeDimension.Layer.Tile = L.TimeDimension.Layer.extend({
//TODO: get current time, parse quarter and compare tile value. Incremental add over time
// get data for time
let d = new Date(time),
year = d.getFullYear().toString(),
m = d.getUTCMonth(),
yeartrimester = year + "." + (m / 3 + 1),
yearQ = `Q${m/3+1} ${year}`;
//month = monthArray[m].toLowerCase(),
//monthYear = `${month}_${year}`;
year = d.getFullYear().toString();
// Update title
let title = $("#title");
title.html(`<h2>Crecimiento urbano en la regi&oacute;n metropolitana centro pa&iacute;s en ${year}</h2>`);
// styleTiles based on yeartrimester value
Object.keys(allTiles).forEach(layer => {
if (layer.split("periurbano_")[1] !== year) { // hide all other years
......@@ -458,9 +497,6 @@ $("#mexmap").show();
$("#odTableRow").removeClass("align-self-center");
$("#odCard").hide();
/*setupMap()
.then(map => populateMap(map));*/
d3.json("https://unpkg.com/d3-time-format@2.1.1/locale/es-MX.json").then(async locale => {
d3.timeFormatDefaultLocale(locale);
......
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