add: map clear on empty click

frontend/src/components/MapComponent.vue

@@ -29,8 +29,6 @@ export default {
         });
 
         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,6 +141,34 @@ 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 = () => {
@@ -162,11 +188,11 @@ export default {
                         'circle-color': [
                             'case',
                             ['boolean', ['feature-state', 'beenClicked'], false],
-                                '#ffff00',
-                                '#1a9641'
+                            '#fec44f',
+                            '#d95f0e'
                         ],
                         'circle-opacity': 0.8,
-                            'circle-radius': 16
+                        'circle-radius': 8
                     },
                     filter: ["match", ["get", "internal_id"], props.idlist, true, false]
                 });