Initial minimap concept added to the dataset-detail

package-lock.json

@@ -14,7 +14,7 @@
         "axios": "^1.2.2",
         "class-transformer": "^0.5.1",
         "dayjs": "^1.10.7",
-        "leaflet": "^1.7.1",
+        "leaflet": "^1.9.4",
         "qs": "^6.10.1",
         "rxjs": "^7.5.5",
         "vue": "^3.2.47",

package.json

@@ -17,7 +17,7 @@
     "axios": "^1.2.2",
     "class-transformer": "^0.5.1",
     "dayjs": "^1.10.7",
-    "leaflet": "^1.7.1",
+    "leaflet": "^1.9.4",
     "qs": "^6.10.1",
     "rxjs": "^7.5.5",
     "vue": "^3.2.47",

src/App.vue

@@ -166,6 +166,7 @@ export default App;
 </script>
 
 <style scoped lang="scss">
+@import 'leaflet/dist/leaflet.css';
 // #app {
 //   font-family: Avenir, Helvetica, Arial, sans-serif;
 //   -webkit-font-smoothing: antialiased;

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>
+  

src/views/dataset-detail.component/dataset-detail.component.ts

@@ -9,11 +9,13 @@ import { Suggestion } from "@/models/dataset";
 import { VUE_API } from "@/constants";
 // import DataMetricsBadge from "data-metrics-badge/dist/data-metrics-badge.js";
 // import DataMetricsBadge from "@/components/datacite/DataMetricsBadge.vue";
+import MapComponent from '@/components/MapComponent.vue';
 
 @Component({
     name: "DatasetDetailComponent",
     components: {
         VsInput,
+        MapComponent,
         // DataMetricsBadge,
     },
 })

src/views/dataset-detail.component/dataset-detail.component.vue

@@ -186,6 +186,12 @@
                             <!-- <data-metrics-badge v-bind:doi="dataset.identifier.value" display="small"></data-metrics-badge> -->
                         </div>
                     </div>
+                    <div class="card">
+                        <div class="column">
+                            <h3 class="label uppercase">MAP</h3>
+                            <MapComponent></MapComponent>
+                        </div>
+                    </div>
                     <div class="card">
                         <div class="column">
                             <h3 class="label uppercase">Beitragende/Contributor</h3>
@@ -327,6 +333,7 @@ export default DatasetDetailComponent;
 </script>
 
 <style scoped lang="scss">
+// @import 'leaflet/dist/leaflet.css';
 .section {
     font-size: 0.8rem;
     padding: 0;