Skip to content

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

Filter tiles and query DB for data

parent 6fa91cf3
Hide whitespace changes
Inline Side-by-side
Showing with 50 additions and 133 deletions
public/index.html
View file @ 866f9324
......@@ -16,8 +16,6 @@
<div id="mexmap"></div>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
<script src='https://unpkg.com/@turf/turf/turf.min.js'></script>
<script src="https://unpkg.com/geojson-vt@3.2.0/geojson-vt.js"></script>
<script src="../js/functions.js"></script>
</body>
......
public/js/functions.js
View file @ 866f9324
......@@ -2,37 +2,43 @@
* Copyright 2020 - All rights reserved.
* Rodrigo Tapia-McClung
*
* November 2020
* November-December 2020
*/
/* global mapboxgl, turf */
/* global mapboxgl, d3 */
const baseUrl = new URL(`/data`, window.location.href).href;
let claves = ['09002', '09012'];
let tiles, polygon, box, tileLayers = [];
let pieces, singlePolys = [];
let tiles, tileLayers = [];
// define MVT layer for given table and some attributes
const mapboxLayer = (table, n, polygon, box) => {
//const mapboxLayer = (table, n, polygon, box) => {
const mapboxLayer = (table) => {
//let columns = ["denue_nombre", "sector", "sector_nombre"],
let columns = ["denue_nombre", "sector"],
//filter = `ST_Intersects(ST_GeomFromGeoJSON(st_asgeojson(denue_geom_4326,4)),ST_GeomFromGeoJSON('${JSON.stringify(box)}'))`;
filter = `ST_Intersects(denue_geom_4326,ST_GeomFromGeoJSON('${JSON.stringify(box)}'))`;
tileLayers.push(table+"-"+n);
tileLayers.push(table);
// if serving directly from PostGIS, use "source-layer": table, if using mbtiles, use "source-layer": "denue"
let pbfLayer = {
id: table+"-"+n,
id: table,
source: {
type: "vector",
//tiles: [`${baseUrl}/${table}/mvt/{z}/{x}/{y}?geom_column=denue_geom_4326&columns=${columns.join(",")}&filter=${filter}`],
//tiles: [`${baseUrl}/${table}/mvt/{z}/{x}/{y}?geom_column=denue_geom_4326&columns=${columns.join(",")}`],
tiles: ['http://localhost:8090/denue/{z}/{x}/{y}.pbf'],
maxzoom: 14,
minzoom: 8
},
//"source-layer": table,
"source-layer": "denue",
filter: [
"all",
[
"match",
["get", "municipio_cvegeo"],
claves,
true,
false
]
],
type: "circle",
"paint": {
"circle-opacity": 0.5,
......@@ -80,55 +86,8 @@ const mapboxLayer = (table, n, polygon, box) => {
return pbfLayer;
}
const geojsonLayer = (table, n, polygon, box) => {
/*d3.json(geojsonQ).then( d => {
let tileIndex = geojsonvt(d);
var tile = tileIndex.getTile(9, 114, 228);
*/
let columns = ["denue_nombre", "sector"],
filter = `ST_Intersects(denue_geom_4326,ST_GeomFromGeoJSON('${JSON.stringify(box)}'))`,
geojsonQ = `${baseUrl}/geojson/dim_denue2019?geom_column=denue_geom_4326&columns=${columns.join(",")}&filter=${filter}`,
pbfLayer;
tileLayers.push(table+"-"+n);
d3.json(geojsonQ).then(d => {
pbfLayer = {
id: table+"-"+n,
source: {
type: "geojson",
data: d
},
//"source-layer": table+"-"+n,
type: "circle",
"paint": {
//"circle-opacity": 0.5,
"circle-opacity": ['case', ['within', polygon], 0.5, 0],
//"circle-radius": 1,
//"circle-radius": ['case', ['within', polygon], 1, 0],
"circle-radius": [
"interpolate",
["linear"],
["zoom"],
9, 1,
22, 4
],
"circle-color": [
"interpolate",
["linear"],
["get", "sector"],
10, "rgb(49,54,149)",
50, "rgb(255,255,191)",
100, "rgb(158,1,66)"
]
}
}
map.addLayer(pbfLayer);
});
//});
}
let map = new mapboxgl.Map({
container: 'mexmap',
accessToken: "pk.eyJ1IjoiZGV2ZWxvcGdlbyIsImEiOiJja2dwcXFic20wYnJnMzBrbG11d3dwYTkyIn0.4WwFOH6C7hDQXV9obU6mAw",
......@@ -141,86 +100,46 @@ let map = new mapboxgl.Map({
map.addControl(new mapboxgl.NavigationControl());
map.on("style.load", async () => {
/*claves.forEach( (clave, i) => {
let queryGeom = `${baseUrl}/query/dim_municipio?columns=municipio_cvegeo id,municipio_nombre nombre,st_asgeojson(box2d(municipio_geom_4326)) box,st_asgeojson(municipio_geom_4326) geom&filter=municipio_cvegeo='${clave}'`;
d3.json(queryGeom).then( geoms => {
geoms.forEach( g => {
polygon = JSON.parse(g.geom);
let feature = turf.feature(polygon, {id: g.id, nombre: g.nombre});
if (feature.geometry.type === 'MultiPolygon') {
pieces = feature.geometry.coordinates.map(c => turf.polygon(c));
} else {
pieces = [feature];
}
singlePolys.push(pieces);
box = JSON.parse(g.box);
tiles = mapboxLayer("dim_denue2019", i, feature, box);
map.addLayer(tiles);
});
});
});*/
let filter = [];
claves.forEach( clave => {
filter.push(`municipio_cvegeo='${clave}'`);
});
//let queryGeom = `${baseUrl}/query/dim_municipio?columns=municipio_cvegeo id,municipio_nombre nombre,st_asgeojson(box2d(st_geometryn(municipio_geom_4326,1)),4) box,st_asgeojson(st_geometryn(municipio_geom_4326,1),4) geom&filter=${filter.join(" or ")}`;
let queryGeom = `${baseUrl}/query/dim_municipio?columns=municipio_cvegeo id,municipio_nombre nombre,st_asgeojson(box2d(municipio_geom_4326)) box,st_asgeojson(municipio_geom_4326) geom&filter=${filter.join(" or ")}`;
d3.json(queryGeom).then( geoms => {
geoms.forEach( (g, i) => {
polygon = JSON.parse(g.geom);
let feature = turf.feature(polygon, {id: g.id, nombre: g.nombre});
if (feature.geometry.type === 'MultiPolygon') {
pieces = feature.geometry.coordinates.map(c => turf.polygon(c));
} else {
pieces = [feature];
}
singlePolys.push(pieces);
box = JSON.parse(g.box);
tiles = mapboxLayer("dim_denue2019", i, polygon, box);
map.addLayer(tiles);
//geojsonLayer("dim_denue_2019", i, polygon, box);
});
});
tiles = mapboxLayer("dim_denue2019");
map.addLayer(tiles);
});
map.on('click', e => {
singlePolys.flat().forEach( p => {
if (turf.booleanWithin(turf.point([e.lngLat.lng, e.lngLat.lat]), p)) {
var features = map.queryRenderedFeatures(e.point,
{ layers: tileLayers }
);
if (features.length != 0) {
new mapboxgl.Popup()
.setLngLat(e.lngLat)
.setHTML(features[0].properties['denue_nombre'])
.addTo(map);
}
}
});
});
const changeCursor = event => {
console.log(event)
if (event.type === "mousenter") return map.getCanvas().style.cursor = 'pointer';
if (event.type === "mousleave") return map.getCanvas().style.cursor = '';
}
map.on('mouseenter', 'dim_denue2019-0', e => {
if (turf.booleanWithin(turf.point([e.lngLat.lng, e.lngLat.lat]), singlePolys.flat()[0])) {
map.getCanvas().style.cursor = 'pointer';
map.on('click', async e => {
var features = map.queryRenderedFeatures(e.point, { layers: tileLayers });
if (features.length != 0) {
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()
.setLngLat(e.lngLat)
.setHTML(denueData[0].denue_nombre)
.addTo(map);
}
});
/*
// 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';
}
//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 = '';
});*/
\ No newline at end of file
});
// TODO: set map filter to redraw tiles for a different region after selecting municipalities with MapboxDraw
/*
map.setFilter("dim_denue2019",
filter: [
"all",
[
"match",
["get", "municipio_cvegeo"],
claves,
true,
false
]
])
*/
\ No newline at end of file
public/outC.mbtiles
View file @ 866f9324
No preview for this file type
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