add: fields layer with checkbox

frontend/src/components/MapComponent.vue

@@ -1,6 +1,9 @@
 <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">
+      <va-checkbox class="mb-4" v-model="valuecb" :label="label" />
+    </div>
     <div id="map" class="map" ref="mapContainer"></div>
   </div>
 </template>
@@ -26,7 +29,9 @@ export default {
   data() {
     return {
       valuebm: '',
-      options: ['Карта', 'Спутник', 'Монохром']
+      options: ['Карта', 'Спутник', 'Монохром'],
+      valuecb: true,
+      label: 'Месторождения'
     }
   },
   setup(props, context) {
@@ -90,6 +95,24 @@ export default {
           paint: {},
         });
 
+        map.value.addSource("fields", {
+          type: "vector",
+          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
+          },
+          'layout': {
+            'visibility': 'visible'
+          }
+        })
+
 
         map.value.addSource("samples", {
           type: "vector",
@@ -263,4 +286,12 @@ export default {
   top: 1rem;
   left: 1rem;
 }
+
+#layer-control {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+}
+
+
 </style>