msc: fields popup onclick

frontend/src/components/MapComponent.vue

@@ -1,87 +1,144 @@
 <template>
   <div class="map-wrap">
+    <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>
   </div>
 </template>
 
-
 <script>
 import maplibregl from "maplibre-gl";
-import { markRaw, onMounted, onUnmounted, reactive, shallowRef, watch } from "vue";
+import {
+  markRaw,
+  onMounted,
+  onUnmounted,
+  reactive,
+  shallowRef,
+  watch,
+} from "vue";
 export default {
   name: "map-component",
   props: {
     idlist: {
       type: Array,
       required: true,
-        }
+    },
+  },
+  data() {
+    return {
+      valuebm: "",
+      options: ["Карта", "Спутник", "Монохром"],
+      valuecb: true,
+      label: "Месторождения",
+    };
   },
   setup(props, context) {
     const mapContainer = shallowRef(null);
     const map = shallowRef(null);
-        let currentFadr = reactive({ "fadr": [] });
+    let currentFadr = reactive({ fadr: [] });
 
-        const apiKey = "pk.eyJ1IjoiZ2hlcm1hbnQiLCJhIjoiY2pncDUwcnRmNDQ4ZjJ4czdjZXMzaHZpNyJ9.3rFyYRRtvLUngHm027HZ7A";
+    const apiKey =
+      "pk.eyJ1IjoiZ2hlcm1hbnQiLCJhIjoiY2pncDUwcnRmNDQ4ZjJ4czdjZXMzaHZpNyJ9.3rFyYRRtvLUngHm027HZ7A";
 
-
-        watch(() => [...props.idlist], (_currentValue, _oldValue) => {
-            updateSamplesLayer()
-        });
+    watch(
+      () => [...props.idlist],
+      (_currentValue, _oldValue) => {
+        updateSamplesLayer();
+      }
+    );
 
     const buildMap = () => {
-            map.value = markRaw(new maplibregl.Map({
+      map.value = markRaw(
+        new maplibregl.Map({
           container: mapContainer.value, // container id
           // DOCS: https://maplibre.org/maplibre-gl-js-docs/style-spec/
           style: {
             version: 8,
             sources: {},
-                    layers: []
+            layers: [],
           },
           center: [80, 40], // starting position [lng, lat]
           zoom: 2, // starting zoom
-                maxZoom: 10
-            }));
-
-            map.value.on('load', () => {
-                map.value.addSource('basemap-source', {
-                    'type': 'raster',
-                    'tiles': [`https://api.mapbox.com/styles/v1/ghermant/cl8vg2r97001m14o4c2qzw9t6/tiles/256/{z}/{x}/{y}@2x?access_token=${apiKey}`]
+          maxZoom: 10,
         })
+      );
 
-                map.value.addLayer(
-                    {
-                        'id': 'basemap-layer',
-                        'type': 'raster',
-                        'source': 'basemap-source',
-                        'paint': {}
+      map.value.on("load", () => {
+        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("basemap", {
+          type: "raster",
+          tiles: [
+            `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",
+          source: "topo-basemap",
+          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",
+          },
+          minzoom: 4
+        });
 
-                map.value.addSource('samples', {
-                    'type': 'vector',
-                    "tiles": ["http://localhost:8080/martin/public.geodata/{z}/{x}/{y}.pbf"],
-                    'promoteId': 'fadr',
+        map.value.addSource("samples", {
+          type: "vector",
+          tiles: [
+            "http://localhost:8080/martin/public.geodata/{z}/{x}/{y}.pbf",
+          ],
+          promoteId: "fadr",
         });
 
         map.value.addLayer({
-                    'id': 'samples-layer',
-                    'source': 'samples',
-                    'source-layer': 'public.geodata',
-                    'type': 'circle',
-                    'paint': {
-                        'circle-stroke-width': 1,
-                        'circle-stroke-color': '#FFFFFF',
-                        'circle-color': [
-                            'case',
-                            ['boolean', ['feature-state', 'beenClicked'], false],
-                            '#fec44f',
-                            '#d95f0e'
+          id: "samples-layer",
+          source: "samples",
+          "source-layer": "public.geodata",
+          type: "circle",
+          paint: {
+            "circle-stroke-width": 1,
+            "circle-stroke-color": "#FFFFFF",
+            "circle-color": [
+              "case",
+              ["boolean", ["feature-state", "beenClicked"], false],
+              "#fec44f",
+              "#d95f0e",
             ],
-                        'circle-opacity': 0.8,
-                        'circle-radius': 8
+            "circle-opacity": 0.8,
+            "circle-radius": 8,
           },
-                    filter: ["match", ["get", "internal_id"], props.idlist, true, false]
+          filter: ["match", ["get", "internal_id"], props.idlist, true, false],
         });
       });
 
@@ -90,9 +147,24 @@ export default {
         closeOnClick: false,
       })
 
-            map.value.on('mouseover', 'samples-layer', (e) => {
+      map.value.on("click", "fields-layer", (e) => {
+        new maplibregl.Popup({})
+          .setLngLat(e.lngLat)
+          .setHTML(e.features[0].properties["descriptio"])
+          .addTo(map.value);
+      })
+
+      map.value.on("mouseover", "fields-layer", (e) => {
+        map.value.getCanvas().style.cursor = "pointer";
+      })
+
+      map.value.on("mouseleave", "fields-layer", (e) => {
+        map.value.getCanvas().style.cursor = "";
+      })
+
+      map.value.on("mouseover", "samples-layer", (e) => {
         // Change the cursor style as a UI indicator.
-                map.value.getCanvas().style.cursor = 'pointer';
+        map.value.getCanvas().style.cursor = "pointer";
         // Populate the popup and set its coordinates
         // based on the feature found.
         popup
@@ -101,35 +173,35 @@ export default {
           .addTo(map.value);
       });
 
-            map.value.on('mouseleave', 'samples-layer', (e) => {
-                map.value.getCanvas().style.cursor = '';
+      map.value.on("mouseleave", "samples-layer", (e) => {
+        map.value.getCanvas().style.cursor = "";
         popup.remove();
       });
 
-            map.value.on('click', 'samples-layer', (e) => {
+      map.value.on("click", "samples-layer", (e) => {
         let newFadr = e.features[0].properties["fadr"];
 
-                let newFadrFound = currentFadr["fadr"].indexOf(newFadr)
+        let newFadrFound = currentFadr["fadr"].indexOf(newFadr);
         if (newFadrFound > -1) {
           //remove old paint
           map.value.setFeatureState(
             {
-                            source: 'samples',
-                            sourceLayer: 'public.geodata',
-                            id: newFadr
+              source: "samples",
+              sourceLayer: "public.geodata",
+              id: newFadr,
             },
             { beenClicked: false }
           );
 
           // remove from filters
-                    currentFadr["fadr"].splice(newFadrFound, 1)
+          currentFadr["fadr"].splice(newFadrFound, 1);
         } else {
           // apply new paint
           map.value.setFeatureState(
             {
-                            source: 'samples',
-                            sourceLayer: 'public.geodata',
-                            id: newFadr
+              source: "samples",
+              sourceLayer: "public.geodata",
+              id: newFadr,
             },
             { beenClicked: true }
           );
@@ -138,78 +210,75 @@ export default {
           currentFadr["fadr"].push(newFadr);
         }
 
-                context.emit('mapClick', currentFadr);
+        context.emit("mapClick", currentFadr);
       });
 
-
-            map.value.on('click', (e) => {
-                const features = map.value.queryRenderedFeatures(e.point)
+      map.value.on("click", (e) => {
+        const features = map.value.queryRenderedFeatures(e.point);
         if (!features.length) {
           currentFadr["fadr"].forEach((oldFadr) => {
             map.value.setFeatureState(
               {
-                                source: 'samples',
-                                sourceLayer: 'public.geodata',
-                                id: oldFadr
+                source: "samples",
+                sourceLayer: "public.geodata",
+                id: oldFadr,
               },
               { beenClicked: false }
             );
-                    })
+          });
           currentFadr["fadr"].length = 0;
         }
 
-                context.emit('mapClick', currentFadr);
+        context.emit("mapClick", currentFadr);
       });
-
     };
 
     const updateSamplesLayer = () => {
-            if (map.value.getLayer('samples-layer')) {
-                map.value.removeLayer('samples-layer');
+      if (map.value.getLayer("samples-layer")) {
+        map.value.removeLayer("samples-layer");
       }
 
       if (props.idlist.length) {
         map.value.addLayer({
-                    'id': 'samples-layer',
-                    'source': 'samples',
-                    'source-layer': 'public.geodata',
-                    'type': 'circle',
-                    'paint': {
-                        'circle-stroke-width': 1,
-                        'circle-stroke-color': '#FFFFFF',
-                        'circle-color': [
-                            'case',
-                            ['boolean', ['feature-state', 'beenClicked'], false],
-                            '#fec44f',
-                            '#d95f0e'
+          id: "samples-layer",
+          source: "samples",
+          "source-layer": "public.geodata",
+          type: "circle",
+          paint: {
+            "circle-stroke-width": 1,
+            "circle-stroke-color": "#FFFFFF",
+            "circle-color": [
+              "case",
+              ["boolean", ["feature-state", "beenClicked"], false],
+              "#fec44f",
+              "#d95f0e",
             ],
-                        'circle-opacity': 0.8,
-                        'circle-radius': 8
+            "circle-opacity": 0.8,
+            "circle-radius": 8,
           },
-                    filter: ["match", ["get", "internal_id"], props.idlist, true, false]
+          filter: ["match", ["get", "internal_id"], props.idlist, true, false],
         });
       }
     };
 
     onMounted(() => {
-            buildMap()
+      buildMap();
     });
 
     onUnmounted(() => {
       // TODO: remove even listeners too
       map.value?.remove();
-        })
-
+    });
 
     return {
-            map, mapContainer, currentFadr
-        }
-    }
-}
-
+      map,
+      mapContainer,
+      currentFadr,
+    };
+  },
+};
 </script>
 
-
 <style lang="css">
 .map-wrap {
   position: relative;
@@ -223,6 +292,12 @@ export default {
   bottom: 0;
   width: 100%;
   height: 100%;
-    /* z-index: -1; */
+  z-index: -1;
+}
+
+#layer-control {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
 }
 </style>

frontend/src/components/Sidebar.vue

@@ -17,7 +17,7 @@ export default {
 <style lang="css">
 .sidebar-proper {
     height: max(100vh, 100%);
-    box-shadow: 0 0 15px rgba(0, 0, 0, 0.75);
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.25);
     clip-path: inset(0px -15px 0px 0px);
     overflow-y: hidden;
 }