add: paint deposit on click

src/components/MapComponent.vue

@@ -57,7 +57,8 @@ export default {
 
                 map.value.addSource('samples', {
                     'type': 'vector',
-                    "tiles": ["http://localhost:8080/martin/public.geodata/{z}/{x}/{y}.pbf"]
+                    "tiles": ["http://localhost:8080/martin/public.geodata/{z}/{x}/{y}.pbf"],
+                    'promoteId': 'fadr',
                 });
 
                 map.value.addLayer({
@@ -68,7 +69,12 @@ export default {
                     'paint': {
                         'circle-stroke-width': 1,
                         'circle-stroke-color': '#FFFFFF',
-                        'circle-color': '#1a9641',
+                        'circle-color': [
+                            'case',
+                            ['boolean', ['feature-state', 'beenClicked'], false],
+                            '#ffff00',
+                            '#1a9641'
+                        ],
                         'circle-opacity': 0.8,
                         'circle-radius': 16
                     }
@@ -83,8 +89,6 @@ export default {
             map.value.on('mouseover', 'samples-layer', (e) => {
                 // Change the cursor style as a UI indicator.
                 map.value.getCanvas().style.cursor = 'pointer';
-
-
             });
 
             map.value.on('mouseleave', 'samples-layer', (e) => {
@@ -105,7 +109,33 @@ export default {
                 fadr = currentFadr["fadr"] == fadr["fadr"] ?
                     { "fadr": "Any" } :
                     fadr;
+
+                // check if we need to remove any old paint
+                if (currentFadr["fadr"] !== "Any") {
+                    map.value.setFeatureState(
+                        {
+                            source: 'samples',
+                            sourceLayer: 'public.geodata',
+                            id: currentFadr["fadr"]
+                        },
+                        { beenClicked: false }
+                    );
+                };
+
+                // check if we need to apply any new paint 
+                if (fadr["fadr"] !== "Any") {
+                    map.value.setFeatureState(
+                        {
+                            source: 'samples',
+                            sourceLayer: 'public.geodata',
+                            id: fadr["fadr"]
+                        },
+                        { beenClicked: true }
+                    );
+                };
+
                 currentFadr = fadr;
+
                 context.emit('mapClick', fadr);
             });
         });