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: '',
+      valuebm: "",
-      options: ['Карта', 'Спутник', 'Монохром'],
+      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", {
+        const basemapTiles = {
-          type: "raster",
+          "topo": [`https://api.mapbox.com/styles/v1/ghermant/cl9vd1nji002n15s2xxj25f4m/tiles/256/{z}/{x}/{y}@2x?access_token=${apiKey}`],
-          tiles: [
+          "satellite": [`https://api.mapbox.com/styles/v1/ghermant/cl9vd1nji002n15s2xxj25f4m/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}`,
+          "mono": [`https://api.mapbox.com/styles/v1/ghermant/cl9olarp0002i14vq9a2d0e7g/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}`,
-          ],
-        });
 
-        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',
+          id: "fields-layer",
-          'type': 'fill',
+          type: "fill",
-          'source': 'fields',
+          source: "fields",
-          'source-layer': 'mygeomapZoom2-2utkfs',
+          "source-layer": "mygeomapZoom2-2utkfs",
-          'paint': {
+          paint: {
-              'fill-color': '#fc9272',
+            "fill-color": "#fc9272",
-              'fill-opacity': 0.5
+            "fill-opacity": 0.5,
           },
-          'layout': {
+          layout: {
-            'visibility': 'visible'
+            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>