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