add: center item map

frontend/src/components/ItemDetails.vue

@@ -38,7 +38,8 @@
         </div>
 
         <va-card id="map" class="content-container map-container">
-            <item-map-component v-if="detailsLoaded" :internal_id="this.itemDetails.internal_id" />
+            <item-map-component v-if="detailsLoaded" :internal_id="this.itemDetails.internal_id"
+                :x_coord="this.itemDetails.x_coord" :y_coord="this.itemDetails.y_coord" />
             <h3 v-else>map is loading</h3>
         </va-card>
         <va-card id="contact" class="content-container">

frontend/src/components/ItemMapComponent.vue

@@ -15,6 +15,12 @@ export default {
             type: String,
             required: true,
         },
+        x_coord: {
+            required: true,
+        },
+        y_coord: {
+            required: true,
+        },
     },
     setup(props, _context) {
         const mapContainer = shallowRef(null);
@@ -23,8 +29,6 @@ export default {
         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/
@@ -33,33 +37,27 @@ export default {
                     sources: {},
                     layers: []
                 },
-                center: [37.625, 55.751], // starting position [lng, lat]
+                // we cut our map below, compensate for it while centering
+                center: [props.y_coord, props.x_coord - 25], // 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.addSource('basemap-source', {
+                    'type': 'raster',
+                    'tiles': [`https://api.mapbox.com/styles/v1/ghermant/cl8vg2r97001m14o4c2qzw9t6/tiles/256/{z}/{x}/{y}@2x?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
+                        'id': 'basemap-layer',
+                        'type': 'raster',
+                        'source': 'basemap-source',
+                        'paint': {}
                     }
                 );
 
-
                 map.value.addSource('samples', {
                     'type': 'vector',
                     "tiles": ["http://localhost:8080/martin/public.geodata/{z}/{x}/{y}.pbf"],
@@ -74,7 +72,7 @@ export default {
                     'paint': {
                         'circle-stroke-width': 1,
                         'circle-stroke-color': '#FFFFFF',
-                        'circle-color': 'yellow',
+                        'circle-color': '#d95f0e',
                         'circle-opacity': 0.8,
                         'circle-radius': 16
                     },