Initial minimap concept added to the dataset-detail

src/components/MapComponent.vue

@@ -0,0 +1,40 @@
+<template>
+    <div id="map" style="height: 300px;"></div>
+  </template>
+  
+  <script lang="ts">
+  import { defineComponent, onMounted } from 'vue';
+  import * as L from 'leaflet';
+  import 'leaflet/dist/leaflet.css';
+  
+  export default defineComponent({
+    name: 'MapComponent',
+    setup() {
+      onMounted(() => {
+        const map = L.map('map').setView([47.71, 13.55], 6);
+
+        // // Create the map
+        // this.map = L.map('map', {
+        //     center: [47.71, 13.55],
+        //     zoom: 7,
+        //     minZoom: 6,
+        //     editable: true // For the "Leaflet.Editable" library
+        // });
+  
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+          attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+        }).addTo(map);
+      });
+  
+      return {};
+    }
+  });
+  </script>
+  
+  <style scoped>
+  #map {
+    height: 100%;
+    width: 100%;
+  }
+  </style>
+