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
Show 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 @@
* January-March 2021
*/
/* globals Promise, omnivore */
/* globals Promise */
/* exported layerControl */
let dateArray = [],
......@@ -20,7 +20,20 @@ let dateArray = [],
timeLayer,
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,
currentClick;
......@@ -165,128 +178,29 @@ const populateMap = async (mapData) => {
let map = mapData.map;
/* let munisLayer = L.geoJson(null, {
style: {
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, {
style: {
stroke: true,
weight: 1,
color: "#00ff00",
opacity: 1,
fill: true,
fillOpacity: 1,
fillColor:"rgba(0,240,2,0.05)"
},
interactive: false
});
let corredor = omnivore.geojson("data/corredor_bajio.geojson", null, corredorLayer);
corredor.addTo(map);
// get regions bounding boxes and populate combobox
$("#regionSelect").append("<option disabled value=\"0\"> -- Selecciona una regi&oacute;n --</option>");
let bufferConLayer = L.geoJson(null, {
style: {
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);
bufferCon.addTo(map);
let bboxQuery = `${baseUrl}/query/periurbanoBajio?columns=region,st_extent(geom)%20as%20bbox&group=region&sort=region`;
d3.json(bboxQuery).then( boxes => {
boxes.forEach( (box) => {
let latLngs = box.bbox.slice(4,-1).split(",");
let northEast = latLngs[1].split(" "),
southWest = latLngs[0].split(" ");
regions[box.region].bbox = [ [+northEast[1], +northEast[0]], [+southWest[1], +southWest[0]] ];
let bufferSinLayer = L.geoJson(null, {
style: {
stroke: true,
weight: 1,
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;
// add regions to combobox
$("#regionSelect").append(`<option value="${box.region}"> ${box.region}</option>`);
});
}
});
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
// select initially disabled option
$("#regionSelect")[0].selectedIndex = 0
// zoom to region when user selects something
$("#regionSelect").on("change", () => {
let region = $("#regionSelect").val();
map.fitBounds(bboxes[region]);
map.fitBounds(regions[region].bbox);
previousClick = region;
});
});
periurbanoBajio.addTo(map);
// create mvt layers
userFiles.forEach(f => {
......@@ -294,8 +208,8 @@ const populateMap = async (mapData) => {
});
// define leaflet pane with higher z-index so tiles are on top of other stuff
map.createPane("urbanizationPane");
map.getPane("urbanizationPane").style.zIndex = 650;
/*map.createPane("urbanizationPane");
map.getPane("urbanizationPane").style.zIndex = 650;*/
glmap = L.mapboxGL({
accesToken: "no-token",
......@@ -304,12 +218,16 @@ const populateMap = async (mapData) => {
"sources": {},
"layers": []
},
interactive: true
//pane: "urbanizationPane"
}).addTo(map);
// after mapboxGL map is ready with styles do this:
glmap.getMapboxMap().on("style.load", () => {
// change default pointer
glmap.getMapboxMap().getCanvas().style.cursor = "grab";
userFiles.forEach(year => {
glmap.getMapboxMap().addLayer(currentTiles[year]);
});
......@@ -320,39 +238,59 @@ const populateMap = async (mapData) => {
}
});
/* 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().addSource("regionesBajioSrc", {
"type": "vector",
"tiles": [`${baseUrl}/periurbanoBajio/mvt/{z}/{x}/{y}?geom_column=geom&columns=region`],
//"type": "geojson",
//"data": "http://localhost:8090/centropais/data/municipios.geojson",
"tolerance": 5
});
let regionesBajioLyrColor = ["match", ["get", "region"]];
Object.keys(regions).forEach( region => {
regionesBajioLyrColor.push(region, regions[region].color);
});
regionesBajioLyrColor.push("#ccc");
glmap.getMapboxMap().addLayer({
id: "munisFill",
source: "munisLayer",
//"source-layer": "periurbano_2015", //table name
type: "fill",
paint: {
"fill-opacity": 0.1,
"fill-color": "grey"
"id": "regionesBajioFill",
"source": "regionesBajioSrc",
"source-layer": "periurbanoBajio", //table name
"type": "fill",
"paint": {
"fill-opacity": 0.2,
"fill-color": regionesBajioLyrColor
}
}).addLayer({
"id": "regionesBajioLine",
"source": "regionesBajioSrc",
"source-layer": "periurbanoBajio", //table name
"type": "line",
"paint": {
"line-opacity": 0.2,
"line-color": regionesBajioLyrColor
}
})
.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"
},
});
*/
glmap.getMapboxMap().on("mouseenter", "regionesBajioFill", () => {
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);
// Pass dummy geojson layer to timeDimension in order to register and sync
timeLayer = L.timeDimension.layer.Tile(L.geoJSON(), {
......@@ -371,7 +309,8 @@ const populateMap = async (mapData) => {
};
var overlays = {
"<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=\"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,
......
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