add: map click filter

src/components/MapComponent.vue

@@ -10,9 +10,10 @@ import maplibregl from "maplibre-gl";
 import { markRaw, onMounted, onUnmounted, shallowRef, } from "vue";
 export default {
     name: "map-component",
-    setup() {
+    setup(_props, context) {
         const mapContainer = shallowRef(null);
         const map = shallowRef(null);
+        let currentFadr = {};
 
         onMounted(() => {
             const apiKey = "pk.eyJ1IjoiZ2hlcm1hbnQiLCJhIjoiY2pncDUwcnRmNDQ4ZjJ4czdjZXMzaHZpNyJ9.3rFyYRRtvLUngHm027HZ7A";
@@ -83,17 +84,29 @@ export default {
                 // Change the cursor style as a UI indicator.
                 map.value.getCanvas().style.cursor = 'pointer';
 
+
+            });
+
+            map.value.on('mouseleave', 'samples-layer', (e) => {
+                map.value.getCanvas().style.cursor = '';
+                popup.remove();
+            });
+
+            map.value.on('click', 'samples-layer', (e) => {
                 // Populate the popup and set its coordinates
                 // based on the feature found.
                 popup
                     .setLngLat(e.lngLat)
                     .setHTML(JSON.stringify(e.features[0].properties))
                     .addTo(map.value);
-            });
+                let fadr = {
-
+                    "fadr": e.features[0].properties["fadr"]
-            map.value.on('mouseleave', 'samples-layer', (e) => {
+                };
-                map.value.getCanvas().style.cursor = '';
+                fadr = currentFadr["fadr"] == fadr["fadr"] ?
-                popup.remove();
+                    { "fadr": "Any" } :
+                    fadr;
+                currentFadr = fadr;
+                context.emit('mapClick', fadr);
             });
         });
 
@@ -104,7 +117,7 @@ export default {
 
 
         return {
-            map, mapContainer
+            map, mapContainer, currentFadr
         }
     }
 }

src/components/OverviewScreen.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="overview">
         <va-card class="content-container">
-            <map-component />
+            <map-component @mapClick="$emit('mapClick', $event)" />
         </va-card>
         <va-card class="content-container">
             <va-data-table :items="items" :hoverable="true" />

src/views/FrontView.vue

@@ -4,7 +4,7 @@
         <div class="central-view">
             <sidebar @filter="applyFilters" />
             <div class="main-view">
-                <overview-screen :items="items" />
+                <overview-screen :items="items" @mapClick="applyFilters" />
             </div>
         </div>
     </div>
@@ -61,7 +61,7 @@ export default {
             };
 
             this.fetchFiltered(this.currentFilters);
-        }
+        },
     },
     created() {
         this.fetchAllItems()