From 24024790b5c7dddd5c3040183c204e5072805b25 Mon Sep 17 00:00:00 2001
From: rrr-marble <rrr@marble.lan>
Date: Mon, 31 Oct 2022 15:29:06 +0300
Subject: [PATCH] add: fields layer labeles popup

---
 frontend/src/components/MapComponent.vue | 24 +++++++++++++++++++-----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/MapComponent.vue b/frontend/src/components/MapComponent.vue
index 8ccb89c..cac1827 100644
--- a/frontend/src/components/MapComponent.vue
+++ b/frontend/src/components/MapComponent.vue
@@ -1,7 +1,7 @@
 <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" />
+            <va-checkbox class="mb-4" v-model="valuecb" label="Месторождения" />
         </div>
         <div id="map" class="map" ref="mapContainer"></div>
     </div>
@@ -24,7 +24,6 @@ export default {
         const map = shallowRef(null);
         let currentFadr = reactive({ "fadr": [] });
         const valuecb = ref(true);
-        const labelcb = 'Месторождения'
 
         const apiKey = "pk.eyJ1IjoiZ2hlcm1hbnQiLCJhIjoiY2pncDUwcnRmNDQ4ZjJ4czdjZXMzaHZpNyJ9.3rFyYRRtvLUngHm027HZ7A";
 
@@ -116,7 +115,23 @@ export default {
             const popup = new maplibregl.Popup({
                 closeButton: false,
                 closeOnClick: false,
-            })
+            });
+
+            map.value.on("dblclick", "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.
@@ -221,7 +236,6 @@ export default {
 
         const updateFieldsLayer = () => {
             const visibility = valuecb.value ? 'visible' : 'none';
-
             map.value.setLayoutProperty('fields-layer', 'visibility', visibility);
         };
 
@@ -236,7 +250,7 @@ export default {
 
 
         return {
-            map, mapContainer, currentFadr, valuecb, labelcb
+            map, mapContainer, currentFadr, valuecb
         }
     }
 }