add: individual item map

frontend/src/components/ItemDetails.vue

@@ -35,7 +35,8 @@
         </div>
 
         <va-card id="map" class="content-container">
-            <map-component />
+            <item-map-component v-if="detailsLoaded" :internal_id="this.itemDetails.internal_id" />
+            <h3 v-else>map is loading</h3>
         </va-card>
         <va-card id="contact" class="content-container">
             <va-card-title>Contact Sales Representative</va-card-title>
@@ -45,7 +46,7 @@
 
 
 <script>
-import MapComponent from "./MapComponent.vue";
+import ItemMapComponent from "@/components/ItemMapComponent.vue";
 export default {
     name: "item-details",
     data() {
@@ -62,7 +63,8 @@ export default {
             ],
             itemPreview: {},
             baseURL: "http://localhost:8080",
-            imageExtension: "bmp"
+            imageExtension: "bmp",
+            detailsLoaded: false,
         };
     },
     methods: {
@@ -71,6 +73,7 @@ export default {
             fetch(`${baseURL}/item/${this.$route.params.id}`)
                 .then(res => res.json())
                 .then(data => this.itemDetails = data)
+                .then(() => this.detailsLoaded = true)
                 .catch((e) => console.log(e));
         },
         getPreviewPath(){
@@ -99,9 +102,12 @@ export default {
     computed: {
         slotPreviewPath(){
             return this.getPreviewPath()
+        },
+        internalID(){
+            return
         }
     },
-    components: { MapComponent }
+    components: { ItemMapComponent }
 }
 </script>
 

frontend/src/components/ItemMapComponent.vue

@@ -0,0 +1,117 @@
+<template>
+    <div class="map-wrap">
+        <div id="map" class="map" ref="mapContainer"></div>
+    </div>
+</template>
+
+
+<script>
+import maplibregl from "maplibre-gl";
+import { markRaw, onMounted, onUnmounted, reactive, shallowRef, } from "vue";
+export default {
+    name: "item-map-component",
+    props: {
+        internal_id: {
+            type: String,
+            required: true,
+        },
+    },
+    setup(props, _context) {
+        const mapContainer = shallowRef(null);
+        const map = shallowRef(null);
+
+        onMounted(() => {
+            const apiKey = "pk.eyJ1IjoiZ2hlcm1hbnQiLCJhIjoiY2pncDUwcnRmNDQ4ZjJ4czdjZXMzaHZpNyJ9.3rFyYRRtvLUngHm027HZ7A";
+
+            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/
+                style: {
+                    version: 8,
+                    sources: {},
+                    layers: []
+                },
+                center: [37.625, 55.751], // starting position [lng, lat]
+                zoom: 2, // starting zoom
+                maxZoom: 10
+            }));
+
+            map.value.on('load', () => {
+                map.value.addSource('countries', {
+                    'type': 'vector',
+                    "tiles": [`https://api.mapbox.com/v4/ghermant.aq1p7k29/{z}/{x}/{y}.mvt?access_token=${apiKey}`]
+                });
+
+                map.value.addLayer(
+                    {
+                        'id': 'countries-layer',
+                        'type': 'line',
+                        'source': 'countries',
+                        'source-layer': 'ne_110m_admin_0_countries-cz6wwp',
+                        'paint': {
+                            "line-color": "blue",
+                            "line-width": 3
+                        },
+                        'filter': ["==", ["get", "NAME"], "Russia"],
+                        "maxzoom": 4
+                    }
+                );
+
+
+                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': 'yellow',
+                        'circle-opacity': 0.8,
+                        'circle-radius': 16
+                    },
+                    filter: ["==", ["get", "internal_id"], props.internal_id]
+                });
+            });
+
+        });
+
+        onUnmounted(() => {
+            // TODO: remove even listeners too
+            map.value?.remove();
+        })
+
+
+        return {
+            map, mapContainer,
+        }
+    }
+}
+
+</script>
+
+
+<style lang="css">
+.map-wrap {
+    position: relative;
+    height: 100vh;
+    width: 100%;
+}
+
+.map {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    /* z-index: -1; */
+}
+</style>