Skip to content

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

Filter tiles inside polygon

parent 077df679
Hide whitespace changes
Inline Side-by-side
Showing with 56 additions and 16 deletions
public/index.html
View file @ 11696c91
...@@ -15,6 +15,7 @@ ...@@ -15,6 +15,7 @@
<body> <body>
<div id="mexmap"></div> <div id="mexmap"></div>
<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="../js/functions.js"></script> <script src="../js/functions.js"></script>
</body> </body>
......
public/js/functions.js
View file @ 11696c91
...@@ -5,7 +5,41 @@ ...@@ -5,7 +5,41 @@
* November 2020 * November 2020
*/ */
// define MVT layer for given table and all trimester column /* 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
]
]
]
}
}
// define MVT layer for given table and some attributes
const mapboxLayer = (table) => { const mapboxLayer = (table) => {
const baseUrl = new URL(`/data`, window.location.href).href; const baseUrl = new URL(`/data`, window.location.href).href;
let pbfLayer = { let pbfLayer = {
...@@ -19,7 +53,7 @@ const mapboxLayer = (table) => { ...@@ -19,7 +53,7 @@ const mapboxLayer = (table) => {
"source-layer": table, "source-layer": table,
type: "circle", type: "circle",
"paint": { "paint": {
"circle-opacity": 0.5, //"circle-opacity": 0.5,
"circle-radius": 3.5, "circle-radius": 3.5,
"circle-color": [ "circle-color": [
"interpolate", "interpolate",
...@@ -28,7 +62,8 @@ const mapboxLayer = (table) => { ...@@ -28,7 +62,8 @@ 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;
...@@ -50,25 +85,29 @@ map.on("style.load", () => { ...@@ -50,25 +85,29 @@ map.on("style.load", () => {
map.addLayer(tiles); map.addLayer(tiles);
}); });
map.on('click', function (e) { map.on('click', e => {
var features = map.queryRenderedFeatures(e.point, if (turf.booleanWithin(turf.point([e.lngLat.lng, e.lngLat.lat]), polygon)) {
{ layers: ['dim_denue2019'] } var features = map.queryRenderedFeatures(e.point,
); { layers: ['dim_denue2019'] }
);
if (features.length != 0) { if (features.length != 0) {
new mapboxgl.Popup() new mapboxgl.Popup()
.setLngLat(e.lngLat) .setLngLat(e.lngLat)
.setHTML(features[0].properties['denue_nombre']) .setHTML(features[0].properties['denue_nombre'])
.addTo(map); .addTo(map);
}
} }
}); });
// Change the cursor to a pointer when the mouse is over the states layer. // Change the cursor to a pointer when the mouse is over the denue layer.
map.on('mouseenter', 'dim_denue2019', function () { map.on('mouseenter', 'dim_denue2019', e => {
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. // Change it back to a pointer when it leaves.
map.on('mouseleave', 'dim_denue2019', function () { map.on('mouseleave', 'dim_denue2019', () => {
map.getCanvas().style.cursor = ''; 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