add: base map switcher proto

frontend/src/components/MapComponent.vue

@@ -1,7 +1,9 @@
 <template>
     <div class="map-wrap">
         <div id="layer-control" class="d-flex flex-direction-column">
-            <va-checkbox class="mb-4" v-model="valuecb" label="Месторождения" />
+            <va-radio class="radio-switcher" v-for="(option, index) in viewOptions" :key="index"
+                v-model="selectedOption" :option="option" :label="viewLabels[index]"></va-radio>
+            <va-checkbox class="mb-4 fields-switch" v-model="valuecb" label="Месторождения" />
         </div>
         <div id="map" class="map" ref="mapContainer"></div>
     </div>
@@ -24,6 +26,9 @@ export default {
         const map = shallowRef(null);
         let currentFadr = reactive({ "fadr": [] });
         const valuecb = ref(true);
+        const selectedOption = ref("topo");
+        const viewOptions = ["topo", "satellite", "mono"];
+        const viewLabels = ["Карта", "Спутник", "Монохром"];
 
         const apiKey = "pk.eyJ1IjoiZ2hlcm1hbnQiLCJhIjoiY2pncDUwcnRmNDQ4ZjJ4czdjZXMzaHZpNyJ9.3rFyYRRtvLUngHm027HZ7A";
 
@@ -250,7 +255,7 @@ export default {
 
 
         return {
-            map, mapContainer, currentFadr, valuecb
+            map, mapContainer, currentFadr, valuecb, selectedOption, viewOptions, viewLabels
         }
     }
 }
@@ -279,5 +284,14 @@ export default {
     top: 1rem;
     right: 1rem;
     z-index: 5;
+    flex-direction: column;
+}
+
+.radio-switcher {
+    padding-left: 0.3rem;
+}
+
+.fields-switch {
+    margin-top: 1rem;
 }
 </style>