Added a circle and its tile intersection logic

public/index.html

@@ -16,6 +16,7 @@
     <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

@@ -5,10 +5,11 @@
  * November-December 2020
  */
 
-/* global mapboxgl */
+/* global mapboxgl, turf */
 
 const baseUrl = new URL(`/data`, window.location.href).href;
-let selectedMunis = ["09002", "09012"];
+let selectedMunis = [{id: "09002", geom: { coordinates: [[ -99.25958633422852, 19.34791392861453 ]], type: "Polygon" }}, {id: "09012", geom: { coordinates: [[ -99.25958633422852, 19.34791392861453 ]], type: "Polygon" }}],
+    selectedIDs = selectedMunis.map(m => m.id);
 
 // define MVT layer for given table and some attributes
 //const mapboxLayer = (table, n, polygon, box) => {
@@ -121,7 +122,7 @@ map.on("style.load", async () => {
             [
                 "match",
                 ["get", "municipio_cvegeo"],
-                selectedMunis,
+                selectedIDs,
                 true,
                 false
             ]
@@ -147,7 +148,7 @@ map.on("style.load", async () => {
         }
     });
 
-    selectedMunis.forEach( muniID => {
+    selectedIDs.forEach( muniID => {
         map.setFeatureState({
             source: "dim_municipio",
             sourceLayer: "dim_municipio",
@@ -156,9 +157,26 @@ map.on("style.load", async () => {
             selected: true
         });
     });
+
+    map.addSource('circle', {
+        'type': 'geojson',
+        'data': 'http://localhost:8090/circle.geojson'
+    });
+    map.addLayer({
+        'id': 'circle',
+        'type': 'fill',
+        'source': 'circle',
+        'layout': {},
+        'paint': {
+            'fill-color': '#088',
+            'fill-opacity': 0.56
+        }
+    });
 });
 
-let muniID = null;
+let muniID = null,
+    intersects = null,
+    muniGeoms = [];
 
 map.on("click", "denue", async e => {
     // flag we're only clicking denue points
@@ -183,18 +201,23 @@ map.on("click", "muni_polygon", e => {
         return;
     }
 
+    // check type of click between polygons and circle
+    // 1. polygons that do not intersect circle - select and deselect
+    // 2. polygons that intersect circle - select and deselect
+
     let clickedMuni = map.queryRenderedFeatures(e.point, { layers: ["muni_polygon"] });
     if (clickedMuni.length != 0) {
         muniID = e.features[0].id;
-        if (selectedMunis.includes(muniID)) {
+        let muniGeom = e.features[0].geometry;
+        if (selectedMunis.some(e => e.id === muniID)) { // if muni was clicked before
             map.removeFeatureState({
                 source: "dim_municipio",
                 sourceLayer: "dim_municipio",
                 id: muniID
             });
-            selectedMunis = selectedMunis.filter(id => id !== muniID);
-        } else {
-            selectedMunis.push(muniID);
+            // remove clicked polygon from array
+            selectedMunis = selectedMunis.filter( el => el.id !== muniID );
+        } else { // if first time clicking muni
             map.setFeatureState({
                 source: "dim_municipio",
                 sourceLayer: "dim_municipio",
@@ -202,17 +225,43 @@ map.on("click", "muni_polygon", e => {
             }, {
                 selected: true
             });
+            // add clicked polygon to array
+            selectedMunis.push({id: muniID, geom: muniGeom});
         }
-        map.setFilter("denue",
-            ["all",[
-                "match",
-                ["get", "municipio_cvegeo"],
-                selectedMunis,
-                true,
-                false
-            ]
-            ]
-        );
+        // get array of ids and geoms
+        selectedIDs = selectedMunis.map(a => a.id);
+        muniGeoms = selectedMunis.map(a => a.geom);
+
+        // check if selectedMunis intersect circle
+        let circleLayer = map.queryRenderedFeatures( {layers: ["circle"] });
+        let circleGeom = circleLayer[0].geometry;
+        let muniInteresects = selectedMunis.filter( el => turf.intersect(el.geom, circleGeom));
+        let intersectedIDs = muniInteresects.map(a => a.id);
+
+        if (intersectedIDs.length > 0) {
+            let selectedIDs2 = selectedIDs.filter( id => intersectedIDs.indexOf(id) == -1 );
+            map.setFilter("denue",
+                ["any",[
+                    "match",
+                    ["get", "municipio_cvegeo"],
+                    selectedIDs2,
+                    true,
+                    false
+                ], ['within', circleGeom]
+                ]
+            );
+        } else {
+            map.setFilter("denue",
+                ["all",[
+                    "match",
+                    ["get", "municipio_cvegeo"],
+                    selectedIDs,
+                    true,
+                    false
+                ]
+                ]
+            );
+        } //TODO: handle case when nothing is selected
     }
 });