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 @@
<body>
<div id="mexmap"></div>
<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>
</body>
......
public/js/functions.js
View file @ 11696c91
......@@ -5,7 +5,41 @@
* 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 baseUrl = new URL(`/data`, window.location.href).href;
let pbfLayer = {
......@@ -19,7 +53,7 @@ const mapboxLayer = (table) => {
"source-layer": table,
type: "circle",
"paint": {
"circle-opacity": 0.5,
//"circle-opacity": 0.5,
"circle-radius": 3.5,
"circle-color": [
"interpolate",
......@@ -28,7 +62,8 @@ 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;
......@@ -50,25 +85,29 @@ map.on("style.load", () => {
map.addLayer(tiles);
});
map.on('click', function (e) {
var features = map.queryRenderedFeatures(e.point,
{ layers: ['dim_denue2019'] }
);
map.on('click', e => {
if (turf.booleanWithin(turf.point([e.lngLat.lng, e.lngLat.lat]), polygon)) {
var features = map.queryRenderedFeatures(e.point,
{ layers: ['dim_denue2019'] }
);
if (features.length != 0) {
new mapboxgl.Popup()
.setLngLat(e.lngLat)
.setHTML(features[0].properties['denue_nombre'])
.addTo(map);
if (features.length != 0) {
new mapboxgl.Popup()
.setLngLat(e.lngLat)
.setHTML(features[0].properties['denue_nombre'])
.addTo(map);
}
}
});
// Change the cursor to a pointer when the mouse is over the states layer.
map.on('mouseenter', 'dim_denue2019', function () {
map.getCanvas().style.cursor = 'pointer';
// 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', function () {
map.on('mouseleave', 'dim_denue2019', () => {
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