add: map points of interest

frontend/src/components/MapComponent.vue

@@ -52,17 +52,37 @@ export default {
                         "maxzoom": 4
                     }
                 );
+
+
+                map.value.addSource('samples', {
+                    'type': 'vector',
+                    "tiles": ["http://localhost:8080/martin/public.geodata/{z}/{x}/{y}.pbf"]
+                });
+
+                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': '#1a9641',
+                        'circle-opacity': 0.8,
+                        'circle-radius': 6
+                    }
+                });
             });
 
             window.addEventListener("mouseenter", (e) => {
-                if (e.target.id == "countries-layer") {
+                if (e.target.id == "samples-layer") {
                     // Change the cursor style as a UI indicator.
                     map.value.getCanvas().style.cursor = 'pointer';
                 }
             });
 
             window.addEventListener("mouseenter", (e) => {
-                if (e.target.id == "countries-layer") {
+                if (e.target.id == "samples-layer") {
                     // Change the cursor style as a UI indicator.
                     map.value.getCanvas().style.cursor = '';
                 }