Skip to content

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

Remove regions geojson. Use tiels instead. Get bboxes from postgis and catch events on tile layer

parent bdfdaf81
Hide whitespace changes
Inline Side-by-side
Showing with 91 additions and 171 deletions
public/centropais/data/periurbanoBajio.geojson deleted 100644 → 0
View file @ bdfdaf81
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 @ bfb44c73
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
* January-March 2021 * January-March 2021
*/ */
/* globals Promise, omnivore */ /* globals Promise */
/* exported layerControl */ /* exported layerControl */
let dateArray = [], let dateArray = [],
...@@ -20,7 +20,20 @@ let dateArray = [], ...@@ -20,7 +20,20 @@ let dateArray = [],
timeLayer, timeLayer,
layerControl; layerControl;
let bboxes = {}, let regions = {
"Aguascalientes": {"color": "#f40b1f"},
"San Luis Potosi": {"color": "#f40b1f"},
"Rioverde": {"color": "#f40b1f"},
"La Piedad-Pénjamo": {"color": "#f40b1f"},
"Moroleón-Uriangato": {"color": "#f40b1f"},
"Corredor del Bajío": {"color": "#f40b1f"},
"Tramo San Juan del Rio - Querétaro": {"color": "#fddfb9"},
"Tramo Querétaro - Celaya": {"color": "#fb9a99"},
"Tramo Celaya - Salamanca": {"color": "#33a09b"},
"Tramo Salamanca - Irapuato": {"color": "#de6eb4"},
"Tramo Irapuato - León": {"color": "#4db0ec"},
"Tramo León - San Fracisco del Rincón": {"color": "#2be829"}
},
previousClick, previousClick,
currentClick; currentClick;
...@@ -165,128 +178,29 @@ const populateMap = async (mapData) => { ...@@ -165,128 +178,29 @@ const populateMap = async (mapData) => {
let map = mapData.map; let map = mapData.map;
/* let munisLayer = L.geoJson(null, { // get regions bounding boxes and populate combobox
style: { $("#regionSelect").append("<option disabled value=\"0\"> -- Selecciona una regi&oacute;n --</option>");
stroke: true,
weight: 5,
color: "grey",
opacity: .35,
fillOpacity: 0.05
},
interactive: false
});
let munis = omnivore.geojson("data/municipios.geojson", null, munisLayer);
munis.addTo(map);
let corredorLayer = L.geoJson(null, { let bboxQuery = `${baseUrl}/query/periurbanoBajio?columns=region,st_extent(geom)%20as%20bbox&group=region&sort=region`;
style: { d3.json(bboxQuery).then( boxes => {
stroke: true, boxes.forEach( (box) => {
weight: 1, let latLngs = box.bbox.slice(4,-1).split(",");
color: "#00ff00", let northEast = latLngs[1].split(" "),
opacity: 1, southWest = latLngs[0].split(" ");
fill: true, regions[box.region].bbox = [ [+northEast[1], +northEast[0]], [+southWest[1], +southWest[0]] ];
fillOpacity: 1,
fillColor:"rgba(0,240,2,0.05)"
},
interactive: false
});
let corredor = omnivore.geojson("data/corredor_bajio.geojson", null, corredorLayer);
corredor.addTo(map);
let bufferConLayer = L.geoJson(null, { // add regions to combobox
style: { $("#regionSelect").append(`<option value="${box.region}"> ${box.region}</option>`);
stroke: true, });
weight: 1,
color: "#d5bef5",
opacity: 1,
fill: true,
fillOpacity: 1,
fillColor: "rgba(213,190,245,0.25)"
},
interactive: false
}); });
let bufferCon = omnivore.geojson("data/buffer_corredor_con_locs.geojson", null, bufferConLayer); // select initially disabled option
bufferCon.addTo(map); $("#regionSelect")[0].selectedIndex = 0
// zoom to region when user selects something
let bufferSinLayer = L.geoJson(null, { $("#regionSelect").on("change", () => {
style: { let region = $("#regionSelect").val();
stroke: true, map.fitBounds(regions[region].bbox);
weight: 1, previousClick = region;
color: "#c43c39",
opacity: 1,
fill: true,
fillOpacity: 1,
fillColor: "rgba(196,60,57,0.25)"
},
interactive: false
}); });
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: true,
onEachFeature: (feature, layer) => {
let region = feature.properties.Region;
// populate bboxes object
bboxes[region] = layer.getBounds();
// what to do when clicking on regions
layer.on( "click", () => {
currentClick = region;
if (currentClick != previousClick) {
map.fitBounds(layer.getBounds());
$("#regionSelect").val(region).change();
} else {
map.setView([21.15, -100.94], 8);
$("#regionSelect")[0].selectedIndex = 0;
currentClick = undefined;
}
previousClick = currentClick;
});
}
});
let periurbanoBajio = omnivore.geojson("data/periurbanoBajio.geojson", null, periurbanoBajioLayer)
.on("ready", () => {
// populate combobox
$("#regionSelect").append("<option disabled value=\"0\"> -- Selecciona una regi&oacute;n --</option>");
Object.keys(bboxes).forEach( region => {
$("#regionSelect").append(`<option value="${region}"> ${region}</option>`);
});
// select disabled option
$("#regionSelect")[0].selectedIndex = 0
// zoom to region when user selects something
$("#regionSelect").on("change", () => {
let region = $("#regionSelect").val();
map.fitBounds(bboxes[region]);
previousClick = region;
});
});
periurbanoBajio.addTo(map);
// create mvt layers // create mvt layers
userFiles.forEach(f => { userFiles.forEach(f => {
...@@ -294,8 +208,8 @@ const populateMap = async (mapData) => { ...@@ -294,8 +208,8 @@ const populateMap = async (mapData) => {
}); });
// define leaflet pane with higher z-index so tiles are on top of other stuff // define leaflet pane with higher z-index so tiles are on top of other stuff
map.createPane("urbanizationPane"); /*map.createPane("urbanizationPane");
map.getPane("urbanizationPane").style.zIndex = 650; map.getPane("urbanizationPane").style.zIndex = 650;*/
glmap = L.mapboxGL({ glmap = L.mapboxGL({
accesToken: "no-token", accesToken: "no-token",
...@@ -304,12 +218,16 @@ const populateMap = async (mapData) => { ...@@ -304,12 +218,16 @@ const populateMap = async (mapData) => {
"sources": {}, "sources": {},
"layers": [] "layers": []
}, },
interactive: true
//pane: "urbanizationPane" //pane: "urbanizationPane"
}).addTo(map); }).addTo(map);
// after mapboxGL map is ready with styles do this: // after mapboxGL map is ready with styles do this:
glmap.getMapboxMap().on("style.load", () => { glmap.getMapboxMap().on("style.load", () => {
// change default pointer
glmap.getMapboxMap().getCanvas().style.cursor = "grab";
userFiles.forEach(year => { userFiles.forEach(year => {
glmap.getMapboxMap().addLayer(currentTiles[year]); glmap.getMapboxMap().addLayer(currentTiles[year]);
}); });
...@@ -320,39 +238,59 @@ const populateMap = async (mapData) => { ...@@ -320,39 +238,59 @@ const populateMap = async (mapData) => {
} }
}); });
/* glmap.getMapboxMap().addSource("munisLayer", { glmap.getMapboxMap().addSource("regionesBajioSrc", {
//type: "vector", "type": "vector",
//tiles: [`${baseUrl}/periurbano_2015/mvt/{z}/{x}/{y}?geom_column=geom&columns=gridcode,grd_urb`], "tiles": [`${baseUrl}/periurbanoBajio/mvt/{z}/{x}/{y}?geom_column=geom&columns=region`],
type: "geojson", //"type": "geojson",
data: "http://localhost:8090/centropais/data/municipios.geojson", //"data": "http://localhost:8090/centropais/data/municipios.geojson",
tolerance: 5 "tolerance": 5
});
let regionesBajioLyrColor = ["match", ["get", "region"]];
Object.keys(regions).forEach( region => {
regionesBajioLyrColor.push(region, regions[region].color);
}); });
regionesBajioLyrColor.push("#ccc");
glmap.getMapboxMap().addLayer({ glmap.getMapboxMap().addLayer({
id: "munisFill", "id": "regionesBajioFill",
source: "munisLayer", "source": "regionesBajioSrc",
//"source-layer": "periurbano_2015", //table name "source-layer": "periurbanoBajio", //table name
type: "fill", "type": "fill",
paint: { "paint": {
"fill-opacity": 0.1, "fill-opacity": 0.2,
"fill-color": "grey" "fill-color": regionesBajioLyrColor
} }
}) }).addLayer({
.addLayer({ "id": "regionesBajioLine",
id: "munisBorder", "source": "regionesBajioSrc",
source: "munisLayer", "source-layer": "periurbanoBajio", //table name
type: "line", "type": "line",
paint: { "paint": {
"line-opacity": 0.15, "line-opacity": 0.2,
"line-color": "grey", "line-color": regionesBajioLyrColor
"line-width": 5, }
}, });
"layout": {
"line-join": "round", glmap.getMapboxMap().on("mouseenter", "regionesBajioFill", () => {
"line-cap": "round" glmap.getMapboxMap().getCanvas().style.cursor = "pointer";
}, }).on("mouseleave", "regionesBajioFill", () => {
}); glmap.getMapboxMap().getCanvas().style.cursor = "grab";
*/ }).on("click", "regionesBajioFill", e => {
let region = e.features[0].properties.region;
currentClick = region;
if (currentClick != previousClick) {
map.fitBounds(regions[region].bbox);
$("#regionSelect").val(region).change();
} else {
map.setView([21.15, -100.94], 8);
$("#regionSelect")[0].selectedIndex = 0;
currentClick = undefined;
}
previousClick = currentClick;
});
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
timeLayer = L.timeDimension.layer.Tile(L.geoJSON(), { timeLayer = L.timeDimension.layer.Tile(L.geoJSON(), {
...@@ -371,7 +309,8 @@ const populateMap = async (mapData) => { ...@@ -371,7 +309,8 @@ const populateMap = async (mapData) => {
}; };
var overlays = { var overlays = {
"<span id=\"gradoUrbanizacion\">&nbsp; Grado de urbanizaci&oacute;n</span>": timeLayer, "<span id=\"gradoUrbanizacion\">&nbsp; Grado de urbanizaci&oacute;n</span>": timeLayer,
"<span id=\"periurbanoBajio\">&nbsp; Regi&oacute;n periurbana y del corredor del Baj&iacute;o</span>": periurbanoBajio, // TODO: add periurbanoLayer to layer control here...
//"<span id=\"periurbanoBajio\">&nbsp; 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=\"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=\"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=\"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,
......
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