add: map popup

src/components/MapComponent.vue

@@ -28,7 +28,7 @@ export default {
                     layers: []
                 },
                 center: [37.625, 55.751], // starting position [lng, lat]
-                zoom: 5, // starting zoom
+                zoom: 2, // starting zoom
                 maxZoom: 10
             }));
 
@@ -69,25 +69,32 @@ export default {
                         'circle-stroke-color': '#FFFFFF',
                         'circle-color': '#1a9641',
                         'circle-opacity': 0.8,
-                        'circle-radius': 6
+                        'circle-radius': 16
                     }
                 });
             });
 
-            window.addEventListener("mouseenter", (e) => {
-                if (e.target.id == "samples-layer") {
+            const popup = new maplibregl.Popup({
+                closeButton: false,
+                closeOnClick: false,
+            })
+
+            map.value.on('mouseover', 'samples-layer', (e) => {
                 // Change the cursor style as a UI indicator.
                 map.value.getCanvas().style.cursor = 'pointer';
-                }
+
+                // Populate the popup and set its coordinates
+                // based on the feature found.
+                popup
+                    .setLngLat(e.lngLat)
+                    .setHTML(JSON.stringify(e.features[0].properties))
+                    .addTo(map.value);
             });
 
-            window.addEventListener("mouseenter", (e) => {
-                if (e.target.id == "samples-layer") {
-                    // Change the cursor style as a UI indicator.
+            map.value.on('mouseleave', 'samples-layer', (e) => {
                 map.value.getCanvas().style.cursor = '';
-                }
-            })
-
+                popup.remove();
+            });
         });
 
         onUnmounted(() => {