Skip to content

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

Query tiles covering BBOX and filter by polygon

parent 11696c91
Hide whitespace changes
Inline Side-by-side
Showing with 21 additions and 42 deletions
public/index.html
View file @ 8c62f7b7
......@@ -14,6 +14,7 @@
<body>
<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="../js/functions.js"></script>
......
public/js/functions.js
View file @ 8c62f7b7
......@@ -7,46 +7,21 @@
/* global mapboxgl, turf */
let polygon = {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
-99.14920806884764,
19.41608763433028
],
[
-99.1123867034912,
19.41608763433028
],
[
-99.1123867034912,
19.43818532931131
],
[
-99.14920806884764,
19.43818532931131
],
[
-99.14920806884764,
19.41608763433028
]
]
]
}
}
const baseUrl = new URL(`/data`, window.location.href).href;
let queryGeom = `${baseUrl}/query/dim_municipio?columns=st_asgeojson(box2d(st_geometryn(municipio_geom_4326,1))) box,st_asgeojson(st_geometryn(municipio_geom_4326,1)) geom&filter=municipio_cvegeo='09002'`;
let tiles, polygon, box;
// define MVT layer for given table and some attributes
const mapboxLayer = (table) => {
const baseUrl = new URL(`/data`, window.location.href).href;
const mapboxLayer = (table, polygon, box) => {
let columns = ["denue_nombre", "sector", "sector_nombre"],
filter = `ST_Intersects(denue_geom_4326,ST_GeomFromGeoJSON('${JSON.stringify(box)}'))`;
let pbfLayer = {
id: table,
source: {
type: "vector",
tiles: [`${baseUrl}/${table}/mvt/{z}/{x}/{y}?geom_column=denue_geom_4326&columns=denue_nombre, sector, sector_nombre`],
tiles: [`${baseUrl}/${table}/mvt/{z}/{x}/{y}?geom_column=denue_geom_4326&columns=${columns.join(",")}&filter=${filter}`],
maxzoom: 19,
minzoom: 6
},
......@@ -54,6 +29,7 @@ const mapboxLayer = (table) => {
type: "circle",
"paint": {
//"circle-opacity": 0.5,
'circle-opacity': ['case', ['within', polygon], 0.5, 0],
"circle-radius": 3.5,
"circle-color": [
"interpolate",
......@@ -62,8 +38,7 @@ const mapboxLayer = (table) => {
10, "rgb(49,54,149)",
50, "rgb(255,255,191)",
100, "rgb(158,1,66)"
],
'circle-opacity': ['case', ['within', polygon], 0.5, 0],
]
}
}
return pbfLayer;
......@@ -73,16 +48,19 @@ let map = new mapboxgl.Map({
container: 'mexmap',
accessToken: "pk.eyJ1IjoiZGV2ZWxvcGdlbyIsImEiOiJja2dwcXFic20wYnJnMzBrbG11d3dwYTkyIn0.4WwFOH6C7hDQXV9obU6mAw",
style: 'mapbox://styles/mapbox/dark-v10',
center: [-100.94, 21.15],
zoom: 7
center: [-99.18, 19.48],
zoom: 12
});
map.addControl(new mapboxgl.NavigationControl());
let tiles = mapboxLayer("dim_denue2019");
map.on("style.load", () => {
map.addLayer(tiles);
map.on("style.load", async () => {
d3.json(queryGeom).then( d => {
polygon = JSON.parse(d[0].geom);
box = JSON.parse(d[0].box);
tiles = mapboxLayer("dim_denue2019", polygon, box);
map.addLayer(tiles);
});
});
map.on('click', e => {
......
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