Skip to content

D
DENUE tiles
Commit f7184c9e authored by Rodrigo Tapia-McClung's avatar Rodrigo Tapia-McClung
Browse files
Options

Enhanced layer interactivity. Updated tiles

parent 91bcf77f
Show whitespace changes
Inline Side-by-side
Showing with 163 additions and 81 deletions
public/js/functions.js
View file @ f7184c9e
......@@ -8,33 +8,120 @@
/* global mapboxgl, d3 */
const baseUrl = new URL(`/data`, window.location.href).href;
let claves = ['09002', '09012'];
let tiles, tileLayers = [];
let selectedMunis = ["09002", "09012"];
// define MVT layer for given table and some attributes
//const mapboxLayer = (table, n, polygon, box) => {
const mapboxLayer = (table) => {
tileLayers.push(table);
const tileSource = (mbtiles) => {
// if serving directly from PostGIS, use "source-layer": table, if using mbtiles, use "source-layer": "denue"
let pbfLayer = {
id: table,
source: {
let pbfSource = {
type: "vector",
//tiles: [`${baseUrl}/${table}/mvt/{z}/{x}/{y}?geom_column=denue_geom_4326&columns=${columns.join(",")}`],
tiles: ['http://localhost:8090/denue/{z}/{x}/{y}.pbf'],
tiles: [`${baseUrl}/${mbtiles}/mbtiles/{z}/{x}/{y}.pbf`],
maxzoom: 14,
minzoom: 8
/*"type": "symbol",
"paint": {
"icon-opacity": 0.8,
},
"layout": {
"icon-size": {
"stops": [
[5, 0.1], [6, 0.1], [7, 0.1], [8, 0.1], [9, 0.1], [10, 0.2], [11, 0.2], [12, 0.2], [13, 0.9], [14, 1]
]
},
//"source-layer": table,
"icon-image": "airport-11",
"icon-allow-overlap": true,
"icon-ignore-placement": true
}/
type: "heatmap",
"paint": {
//"heatmap-opacity": ["case", ["within", polygon], 0.1, 0],
"heatmap-intensity": 0.1,
"heatmap-radius": 1,
"heatmap-weight": 1
}*/
}
return pbfSource;
}
let map = new mapboxgl.Map({
container: "mexmap",
accessToken: "pk.eyJ1IjoiZGV2ZWxvcGdlbyIsImEiOiJja2dwcXFic20wYnJnMzBrbG11d3dwYTkyIn0.4WwFOH6C7hDQXV9obU6mAw",
style: "mapbox://styles/mapbox/dark-v10",
center: [-99.17, 19.36],
zoom: 9,
maxZoom: 20
});
map.addControl(new mapboxgl.NavigationControl());
map.on("style.load", async () => {
// add municipios source
map.addSource("dim_municipio", {
type: "vector",
tiles: [`${baseUrl}/dim_municipio/mvt/{z}/{x}/{y}?geom_column=municipio_geom_4326&columns=municipio_cvegeo`],
maxzoom: 14,
minzoom: 8,
"promoteId": {"dim_municipio": "municipio_cvegeo"}
});
// create and add denue source
let denueSource = tileSource("denueC");
map.addSource("denueC", denueSource);
// add municipios line layer
map.addLayer({
id: "muni_lines",
"source-layer": "dim_municipio",
source: "dim_municipio",
type: "line",
"paint": {
"line-opacity": [
"interpolate",
["linear"],
["zoom"],
9, 0.25,
22, 1
],
"line-width": [
"interpolate",
["linear"],
["zoom"],
9, 1,
22, 5
],
"line-color": "rgb(150,150,150)"
}
});
// add municipios polygon layer
map.addLayer({
id: "muni_polygon",
"source-layer": "dim_municipio",
source: "dim_municipio",
type: "fill",
"paint": {
"fill-color": "rgb(150,150,150)",
"fill-opacity": [
"case",
["boolean", ["feature-state", "selected"], false],
0.25,
0
]
}
});
// add denue cirle layer filtered by municipios in selectedMunis array
map.addLayer({
id: "denue",
"source-layer": "denue",
source: denueSource,
filter: [
"all",
[
"match",
["get", "municipio_cvegeo"],
claves,
selectedMunis,
true,
false
]
......@@ -42,9 +129,6 @@ const mapboxLayer = (table) => {
type: "circle",
"paint": {
"circle-opacity": 0.5,
//"circle-opacity": ['case', ['within', polygon], 0.5, 0],
//"circle-radius": 3,
//"circle-radius": ['case', ['within', polygon], 1, 0],
"circle-radius": [
"interpolate",
["linear"],
......@@ -61,53 +145,28 @@ const mapboxLayer = (table) => {
100, "rgb(158,1,66)"
]
}
/*"type": "symbol",
"paint": {
"icon-opacity": 0.8,
},
'layout': {
"icon-size": {
"stops": [
[5, 0.1], [6, 0.1], [7, 0.1], [8, 0.1], [9, 0.1], [10, 0.2], [11, 0.2], [12, 0.2], [13, 0.9], [14, 1]
]
},
"icon-image": "airport-11",
"icon-allow-overlap": true,
"icon-ignore-placement": true
}/
type: "heatmap",
"paint": {
//"heatmap-opacity": ['case', ['within', polygon], 0.1, 0],
"heatmap-intensity": 0.1,
"heatmap-radius": 1,
"heatmap-weight": 1
}*/
}
return pbfLayer;
}
});
let map = new mapboxgl.Map({
container: 'mexmap',
accessToken: "pk.eyJ1IjoiZGV2ZWxvcGdlbyIsImEiOiJja2dwcXFic20wYnJnMzBrbG11d3dwYTkyIn0.4WwFOH6C7hDQXV9obU6mAw",
style: 'mapbox://styles/mapbox/dark-v10',
center: [-99.17, 19.36],
zoom: 9,
maxZoom: 20
selectedMunis.forEach( muniID => {
map.setFeatureState({
source: "dim_municipio",
sourceLayer: "dim_municipio",
id: muniID
}, {
selected: true
});
});
});
map.addControl(new mapboxgl.NavigationControl());
let muniID = null;
map.on("style.load", async () => {
tiles = mapboxLayer("dim_denue2019");
map.addLayer(tiles);
});
map.on("click", "denue", async e => {
// flag we're only clicking denue points
e.originalEvent.preventDefault();
map.on('click', async e => {
var features = map.queryRenderedFeatures(e.point, { layers: tileLayers });
let features = map.queryRenderedFeatures(e.point, { layers: ["denue"] });
if (features.length != 0) {
let denue_cve = features[0].properties['denue_cve'];
let denue_cve = features[0].properties["denue_cve"];
let denueQuery = `${baseUrl}/query/dim_denue2019?columns=denue_nombre&filter=denue_cve=${denue_cve}`;
let denueData = await d3.json(denueQuery);
new mapboxgl.Popup()
......@@ -117,29 +176,52 @@ map.on('click', async e => {
}
});
// Change the cursor to a pointer when the mouse is over the denue layer.
map.on('mouseenter', 'dim_denue2019', e => {
//if (turf.booleanWithin(turf.point([e.lngLat.lng, e.lngLat.lat]), polygon)) {
map.getCanvas().style.cursor = 'pointer';
//}
});
// Change it back to a pointer when it leaves.
map.on('mouseleave', 'dim_denue2019', () => {
map.getCanvas().style.cursor = '';
});
map.on("click", "muni_polygon", e => {
// if clicking on denue points, don't do anything on polygons
if (e.originalEvent.defaultPrevented) {
return;
}
// TODO: set map filter to redraw tiles for a different region after selecting municipalities with MapboxDraw
/*
map.setFilter("dim_denue2019",
filter: [
"all",
[
let clickedMuni = map.queryRenderedFeatures(e.point, { layers: ["muni_polygon"] });
if (clickedMuni.length != 0) {
muniID = e.features[0].id;
if (selectedMunis.includes(muniID)) {
map.removeFeatureState({
source: "dim_municipio",
sourceLayer: "dim_municipio",
id: muniID
});
selectedMunis = selectedMunis.filter(id => id !== muniID);
} else {
selectedMunis.push(muniID);
map.setFeatureState({
source: "dim_municipio",
sourceLayer: "dim_municipio",
id: muniID
}, {
selected: true
});
}
map.setFilter("denue",
["all",[
"match",
["get", "municipio_cvegeo"],
claves,
selectedMunis,
true,
false
]
])
*/
\ No newline at end of file
]
);
}
});
// Change the cursor to a pointer when the mouse is over the denue layer.
map.on("mouseenter", "denue", e => {
map.getCanvas().style.cursor = "pointer";
//}
});
// Change it back to a pointer when it leaves.
map.on("mouseleave", "denue", () => {
map.getCanvas().style.cursor = "";
});
\ No newline at end of file
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