add: fields layer w/ controls

frontend/src/components/MapComponent.vue

@@ -1,5 +1,8 @@
 <template>
     <div class="map-wrap">
+        <div id="layer-control" class="d-flex flex-direction-column">
+            <va-checkbox class="mb-4" v-model="valuecb" :label="labelcb" />
+        </div>
         <div id="map" class="map" ref="mapContainer"></div>
     </div>
 </template>
@@ -7,7 +10,7 @@
 
 <script>
 import maplibregl from "maplibre-gl";
-import { markRaw, onMounted, onUnmounted, reactive, shallowRef, watch } from "vue";
+import { markRaw, onMounted, onUnmounted, reactive, ref, shallowRef, watch } from "vue";
 export default {
     name: "map-component",
     props: {
@@ -20,6 +23,8 @@ export default {
         const mapContainer = shallowRef(null);
         const map = shallowRef(null);
         let currentFadr = reactive({ "fadr": [] });
+        const valuecb = ref(true);
+        const labelcb = 'Месторождения'
 
         const apiKey = "pk.eyJ1IjoiZ2hlcm1hbnQiLCJhIjoiY2pncDUwcnRmNDQ4ZjJ4czdjZXMzaHZpNyJ9.3rFyYRRtvLUngHm027HZ7A";
 
@@ -28,6 +33,10 @@ export default {
             updateSamplesLayer()
         });
 
+        watch(() => valuecb.value, (_currentValue, _oldValue) => {
+            updateFieldsLayer()
+        });
+
         const buildMap = () => {
             map.value = markRaw(new maplibregl.Map({
                 container: mapContainer.value, // container id
@@ -58,6 +67,25 @@ export default {
                 );
 
 
+                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',
                     "tiles": ["http://localhost:8080/martin/public.geodata/{z}/{x}/{y}.pbf"],
@@ -191,6 +219,12 @@ export default {
             }
         };
 
+        const updateFieldsLayer = () => {
+            const visibility = valuecb.value ? 'visible' : 'none';
+
+            map.value.setLayoutProperty('fields-layer', 'visibility', visibility);
+        };
+
         onMounted(() => {
             buildMap()
         });
@@ -202,7 +236,7 @@ export default {
 
 
         return {
-            map, mapContainer, currentFadr
+            map, mapContainer, currentFadr, valuecb, labelcb
         }
     }
 }
@@ -225,4 +259,11 @@ export default {
     height: 100%;
     /* z-index: -1; */
 }
+
+#layer-control {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    z-index: 5;
+}
 </style>

frontend/src/main.js

@@ -34,6 +34,7 @@ import {
     VaScrollContainer,
     VaDropdown,
     VaDropdownContent,
+    VaCheckbox,
 } from 'vuestic-ui'
 import 'vuestic-ui/dist/styles/essential.css'
 import 'vuestic-ui/dist/styles/grid.css'
@@ -82,6 +83,7 @@ app.use(createVuesticEssential({
         VaScrollContainer,
         VaDropdown,
         VaDropdownContent,
+        VaCheckbox,
     }
 }));