From ccf4e238f32fd4091bad8ca32cfcaca98cc79b05 Mon Sep 17 00:00:00 2001
From: frankporras <francisco.porras-bernardez@geosphere.at>
Date: Thu, 23 May 2024 16:59:17 +0200
Subject: [PATCH] Initial minimap concept added to the dataset-detail

---
 package-lock.json                             |  2 +-
 package.json                                  |  2 +-
 src/App.vue                                   |  1 +
 src/components/MapComponent.vue               | 40 +++++++++++++++++++
 .../dataset-detail.component.ts               |  2 +
 .../dataset-detail.component.vue              |  7 ++++
 6 files changed, 52 insertions(+), 2 deletions(-)
 create mode 100644 src/components/MapComponent.vue

diff --git a/package-lock.json b/package-lock.json
index ea6b588..dd1474d 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index de5f0e1..9c2e95f 100644
--- a/package.json
+++ b/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",
diff --git a/src/App.vue b/src/App.vue
index 9b042da..ed37f71 100644
--- a/src/App.vue
+++ b/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;
diff --git a/src/components/MapComponent.vue b/src/components/MapComponent.vue
new file mode 100644
index 0000000..5606f84
--- /dev/null
+++ b/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>
+  
\ No newline at end of file
diff --git a/src/views/dataset-detail.component/dataset-detail.component.ts b/src/views/dataset-detail.component/dataset-detail.component.ts
index af8a4e9..85b06a2 100644
--- a/src/views/dataset-detail.component/dataset-detail.component.ts
+++ b/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,
     },
 })
diff --git a/src/views/dataset-detail.component/dataset-detail.component.vue b/src/views/dataset-detail.component/dataset-detail.component.vue
index 0a94183..d3894e8 100644
--- a/src/views/dataset-detail.component/dataset-detail.component.vue
+++ b/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;