add: map clear on empty click

frontend/src/components/MapComponent.vue

@@ -24,13 +24,11 @@ export default {
         const apiKey = "pk.eyJ1IjoiZ2hlcm1hbnQiLCJhIjoiY2pncDUwcnRmNDQ4ZjJ4czdjZXMzaHZpNyJ9.3rFyYRRtvLUngHm027HZ7A";
 
 
-        watch(()=> [...props.idlist], (_currentValue, _oldValue) => {
+        watch(() => [...props.idlist], (_currentValue, _oldValue) => {
             updateSamplesLayer()
         });
 
         const buildMap = () => {
-            const initialState = { lng: 37.625, lat: 55.751, zoom: 5 };
-
             map.value = markRaw(new maplibregl.Map({
                 container: mapContainer.value, // container id
                 // DOCS: https://maplibre.org/maplibre-gl-js-docs/style-spec/
@@ -39,7 +37,7 @@ export default {
                     sources: {},
                     layers: []
                 },
-                center: [37.625, 55.751], // starting position [lng, lat]
+                center: [80, 40], // starting position [lng, lat]
                 zoom: 2, // starting zoom
                 maxZoom: 10
             }));
@@ -143,33 +141,61 @@ export default {
                 context.emit('mapClick', currentFadr);
             });
 
+
+            map.value.on('click', (e) => {
+
+                console.log(e);
+                console.log(currentFadr.fadr);
+                console.log(e.point)
+                const features = map.value.queryRenderedFeatures(e.point)
+                console.log(features)
+                if (!features.length) {
+                    currentFadr["fadr"].forEach((oldFadr) => {
+                        map.value.setFeatureState(
+                            {
+                                source: 'samples',
+                                sourceLayer: 'public.geodata',
+                                id: oldFadr
+                            },
+                            { beenClicked: false }
+                        );
+                    })
+                    currentFadr["fadr"].length = 0;
+                    console.log("clear fadr");
+                }
+                console.log(currentFadr.fadr);
+
+
+                context.emit('mapClick', currentFadr);
+            });
+
         };
 
         const updateSamplesLayer = () => {
-            if (map.value.getLayer('samples-layer')){
+            if (map.value.getLayer('samples-layer')) {
                 map.value.removeLayer('samples-layer');
             }
-            
-            if(props.idlist.length){
+
+            if (props.idlist.length) {
                 map.value.addLayer({
-                        'id': 'samples-layer',
-                        'source': 'samples',
-                        'source-layer': 'public.geodata',
-                        'type': 'circle',
-                        'paint': {
-                            'circle-stroke-width': 1,
-                            'circle-stroke-color': '#FFFFFF',
-                            'circle-color': [
-                                'case',
-                                ['boolean', ['feature-state', 'beenClicked'], false],
-                                '#ffff00',
-                                '#1a9641'
-                            ],
-                            'circle-opacity': 0.8,
-                            'circle-radius': 16
-                        },
-                        filter: ["match", ["get", "internal_id"], props.idlist, true, false]
-                    });
+                    'id': 'samples-layer',
+                    'source': 'samples',
+                    'source-layer': 'public.geodata',
+                    'type': 'circle',
+                    'paint': {
+                        'circle-stroke-width': 1,
+                        'circle-stroke-color': '#FFFFFF',
+                        'circle-color': [
+                            'case',
+                            ['boolean', ['feature-state', 'beenClicked'], false],
+                            '#fec44f',
+                            '#d95f0e'
+                        ],
+                        'circle-opacity': 0.8,
+                        'circle-radius': 8
+                    },
+                    filter: ["match", ["get", "internal_id"], props.idlist, true, false]
+                });
             }
         };