fix: failure to display item map dot

frontend/src/components/ItemMapComponent.vue

@@ -7,7 +7,7 @@
 
 <script>
 import maplibregl from "maplibre-gl";
-import { markRaw, onMounted, onUnmounted, reactive, shallowRef, } from "vue";
+import { markRaw, onMounted, onUnmounted, reactive, shallowRef, watchEffect, } from "vue";
 export default {
     name: "item-map-component",
     props: {
@@ -25,6 +25,31 @@ export default {
     setup(props, _context) {
         const mapContainer = shallowRef(null);
         const map = shallowRef(null);
+        let isSampleLayerAdded = false;
+
+        const addSamplesLayer = () => {
+            map.value.addSource('samples', {
+                'type': 'vector',
+                "tiles": ["http://localhost:8080/martin/public.geodata/{z}/{x}/{y}.pbf"],
+                'promoteId': 'fadr',
+            });
+
+            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': '#d95f0e',
+                    'circle-opacity': 0.8,
+                    'circle-radius': 16
+                },
+                filter: ["==", ["get", "internal_id"], props.internal_id]
+            });
+        }
+
 
         onMounted(() => {
             const apiKey = "pk.eyJ1IjoiZ2hlcm1hbnQiLCJhIjoiY2pncDUwcnRmNDQ4ZjJ4czdjZXMzaHZpNyJ9.3rFyYRRtvLUngHm027HZ7A";
@@ -58,25 +83,11 @@ export default {
                     }
                 );
 
-                map.value.addSource('samples', {
-                    'type': 'vector',
-                    "tiles": ["http://localhost:8080/martin/public.geodata/{z}/{x}/{y}.pbf"],
-                    'promoteId': 'fadr',
-                });
-
-                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': '#d95f0e',
-                        'circle-opacity': 0.8,
-                        'circle-radius': 16
-                    },
-                    filter: ["==", ["get", "internal_id"], props.internal_id]
+                watchEffect(() => {
+                    if (!isSampleLayerAdded && typeof props.internal_id !== typeof undefined) {
+                        isSampleLayerAdded = true;
+                        addSamplesLayer();
+                    }
                 });
             });