change: basemaps handling

frontend/src/components/MapComponent.vue

@@ -1,7 +1,13 @@
 <template>
   <div class="map-wrap">
-    <div id="basemap-selector"><va-select v-model="valuebm" :options="options"/></div>
-     <div id="layer-control" class="d-flex flex-direction-column">
+    <div id="layer-control" class="d-flex flex-direction-column">
+      <va-radio
+        v-for="(option, index) in options"
+        :key="index"
+        v-model="selectedOption"
+        :option="option"
+        :label="labels[index]"
+      />
       <va-checkbox class="mb-4" v-model="valuecb" :label="label" />
     </div>
     <div id="map" class="map" ref="mapContainer"></div>
@@ -28,11 +34,11 @@ export default {
   },
   data() {
     return {
-      valuebm: '',
-      options: ['Карта', 'Спутник', 'Монохром'],
+      valuebm: "",
+      options: ["Карта", "Спутник", "Монохром"],
       valuecb: true,
-      label: 'Месторождения'
-    }
+      label: "Месторождения",
+    };
   },
   setup(props, context) {
     const mapContainer = shallowRef(null);
@@ -66,28 +72,19 @@ export default {
       );
 
       map.value.on("load", () => {
-        map.value.addSource("topo-basemap", {
-          type: "raster",
-          tiles: [
-            `https://api.mapbox.com/styles/v1/ghermant/cl9vd1nji002n15s2xxj25f4m/tiles/256/{z}/{x}/{y}@2x?access_token=${apiKey}`,
-          ],
-        });
-
-        map.value.addSource("satellite-basemap", {
-          type: "raster",
-          tiles: [
-            `https://api.mapbox.com/styles/v1/ghermant/cl9olarp0002i14vq9a2d0e7g/tiles/256/{z}/{x}/{y}@2x?access_token=${apiKey}`,
-          ],
-        });
+        const basemapTiles = {
+          "topo": [`https://api.mapbox.com/styles/v1/ghermant/cl9vd1nji002n15s2xxj25f4m/tiles/256/{z}/{x}/{y}@2x?access_token=${apiKey}`],
+          "satellite": [`https://api.mapbox.com/styles/v1/ghermant/cl9vd1nji002n15s2xxj25f4m/tiles/256/{z}/{x}/{y}@2x?access_token=${apiKey}`],
+          "mono": [`https://api.mapbox.com/styles/v1/ghermant/cl9olarp0002i14vq9a2d0e7g/tiles/256/{z}/{x}/{y}@2x?access_token=${apiKey}`]
+        }
 
-        map.value.addSource("mono-basemap", {
+        map.value.addSource("basemap", {
           type: "raster",
           tiles: [
-            `https://api.mapbox.com/styles/v1/ghermant/cl9vd7xwi004u14nxu3j83scj/tiles/256/{z}/{x}/{y}@2x?access_token=${apiKey}`,
+            `https://api.mapbox.com/styles/v1/ghermant/cl9vd1nji002n15s2xxj25f4m/tiles/256/{z}/{x}/{y}@2x?access_token=${apiKey}`,
           ],
         });
 
-
         map.value.addLayer({
           id: "basemap-layer",
           type: "raster",
@@ -97,22 +94,23 @@ export default {
 
         map.value.addSource("fields", {
           type: "vector",
-          tiles: [`https://api.mapbox.com/v4/ghermant.cpc0xaaw/{z}/{x}/{y}.mvt?access_token=${apiKey}`]
-        })
+          tiles: [
+            `https://api.mapbox.com/v4/ghermant.cpc0xaaw/{z}/{x}/{y}.mvt?access_token=${apiKey}`,
+          ],
+        });
         map.value.addLayer({
-          'id': 'fields-layer',
-          'type': 'fill',
-          'source': 'fields',
-          'source-layer': 'mygeomapZoom2-2utkfs',
-          'paint': {
-              'fill-color': '#fc9272',
-              'fill-opacity': 0.5
+          id: "fields-layer",
+          type: "fill",
+          source: "fields",
+          "source-layer": "mygeomapZoom2-2utkfs",
+          paint: {
+            "fill-color": "#fc9272",
+            "fill-opacity": 0.5,
           },
-          'layout': {
-            'visibility': 'visible'
-          }
-        })
-
+          layout: {
+            visibility: "visible",
+          },
+        });
 
         map.value.addSource("samples", {
           type: "vector",
@@ -281,17 +279,9 @@ export default {
   z-index: -1;
 }
 
-#basemap-selector {
-  position: absolute;
-  top: 1rem;
-  left: 1rem;
-}
-
 #layer-control {
   position: absolute;
   top: 1rem;
   right: 1rem;
 }
-
-
 </style>