add: fields interactivity

frontend/src/components/MapComponent.vue

@@ -110,6 +110,7 @@ export default {
           layout: {
             visibility: "visible",
           },
+          minzoom: 4
         });
 
         map.value.addSource("samples", {
@@ -146,6 +147,19 @@ export default {
         closeOnClick: false,
       });
 
+      map.value.on("mouseover", "fields-layer", (e) => {
+        map.value.getCanvas().style.cursor = "pointer";
+        popup
+          .setLngLat(e.lngLat)
+          .setHTML(e.features[0].properties["descriptio"])
+          .addTo(map.value);
+      })
+
+      map.value.on("mouseleave", "fields-layer", (e) => {
+        map.value.getCanvas().style.cursor = "";
+        popup.remove();
+      })
+
       map.value.on("mouseover", "samples-layer", (e) => {
         // Change the cursor style as a UI indicator.
         map.value.getCanvas().style.cursor = "pointer";