Publication minimap implemented

src/components/MapComponent.vue

@@ -1,40 +0,0 @@
-<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/components/minimap/Minimap.ts

@@ -0,0 +1,70 @@
+import { Component, Prop, Vue } from 'vue-facing-decorator';
+import * as L from 'leaflet';
+import 'leaflet/dist/leaflet.css';
+
+@Component({
+  name: 'Minimap',
+})
+export default class Minimap extends Vue {
+  @Prop({ type: Array, required: true }) bounds!: L.LatLngBoundsLiteral;
+
+  mounted() {
+    const map = L.map('map', {
+      center: [47.71, 13.55],
+      zoom: 6,
+      maxZoom: 9,
+      minZoom: 5,
+      maxBounds: [
+        [45.0, 10.0], // Southwest corner of the bounds
+        [50.0, 17.0]  // Northeast corner of the bounds
+      ],
+      maxBoundsViscosity: 1.0 // Ensure the map cannot be dragged outside the bounds
+    });
+
+    // const openStreetMapLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    //   attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+    //   noWrap: true // Prevent tiles from wrapping outside the bounds
+    // }).addTo(map);
+
+    const basemapAtLayer = L.tileLayer('https://maps{s}.wien.gv.at/basemap/geolandbasemap/normal/google3857/{z}/{y}/{x}.png', {
+      attribution: 'Datenquelle: <a href="https://www.basemap.at">basemap.at</a>',
+      noWrap: true,
+      subdomains: ['', '1', '2', '3', '4']
+    }).addTo(map);
+
+    const esriImageryLayer = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
+      attribution: 'Tiles &copy; Esri'
+    });
+
+    const esriTopoLayer = L.tileLayer('https://server.arcgisonline.com/arcgis/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', {
+      attribution: 'Tiles &copy; Esri'
+    });
+
+    const baseMaps = {
+    //   "OpenStreetMap": openStreetMapLayer,
+      "basemap.at": basemapAtLayer,
+      "ESRI Imagery": esriImageryLayer,
+      "ESRI Topo": esriTopoLayer
+    };
+
+    L.control.layers(baseMaps).addTo(map);
+
+    const [southWest, northEast] = this.bounds;
+
+    if (southWest[0] === northEast[0] || southWest[1] === northEast[1]) {
+      // If y_min and y_max (and x_min and x_max) are equal, generate a circle
+      const center = [southWest[0], southWest[1]] as L.LatLngExpression;
+      const radius = 1000; // You can adjust the radius as needed
+      const circle = L.circle(center, { radius, color: '#336699', weight: 4, opacity: 1 }).addTo(map);
+
+      // Fit the map's view to the circle's bounds
+      map.fitBounds(circle.getBounds());
+    } else {
+      // Otherwise, generate a rectangle
+      const rectangle = L.rectangle(this.bounds, { color: '#336699', weight: 2, opacity: 1 }).addTo(map);
+
+      // Fit the map's view to the rectangle's bounds
+      map.fitBounds(this.bounds);
+    }
+  }
+}

src/components/minimap/Minimap.vue

@@ -0,0 +1,16 @@
+<!-- Contains the template and references the TypeScript logic. -->
+<template>
+  <div id="map" style="height: 300px;"></div>
+</template>
+
+<script lang="ts">
+import Minimap from './Minimap';
+export default Minimap;
+</script>
+
+<style scoped>
+#map {
+  height: 100%;
+  width: 100%;
+}
+</style>

src/models/dataset.ts

@@ -264,6 +264,19 @@ export class DbDataset {
             return "";
         }
     }
+
+    /* Provides the bounds of the publication for the Leaflet minimap */
+    public get Bounds(): L.LatLngBoundsLiteral | string {
+        if (this.coverage != undefined) { 
+            return [
+                [Number(this.coverage.y_min), Number(this.coverage.x_min)], // Southwest corner
+                [Number(this.coverage.y_max), Number(this.coverage.x_max)]  // Northeast corner
+            ];
+        } else {
+            return ""; 
+        }
+    }
+    
 }
 type Nullable<T> = T | undefined;
 

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

@@ -1,3 +1,4 @@
+// detail-dataset.component.ts
 import { Component, Vue, Prop } from "vue-facing-decorator";
 import { DbDataset } from "@/models/dataset";
 import DatasetService from "../../services/dataset.service";
@@ -9,13 +10,14 @@ 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';
+import Minimap from '@/components/minimap/Minimap.vue';
+import * as L from 'leaflet';
 
 @Component({
     name: "DatasetDetailComponent",
     components: {
         VsInput,
-        MapComponent,
+        Minimap,
         // DataMetricsBadge,
     },
 })
@@ -174,4 +176,6 @@ export default class DatasetDetailComponent extends Vue {
         citation += ", Wien";
         return citation;
     }
+
+    
 }

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

@@ -1,3 +1,4 @@
+<!-- detail-dataset.component.vue -->
 <template v-if="datasetId">
     <!-- <div class="container">
         <section class="section" v-if="dataset != undefined">
@@ -189,7 +190,7 @@
                     <div class="card">
                         <div class="column">
                             <h3 class="label uppercase">MAP</h3>
-                            <MapComponent></MapComponent>
+                            <Minimap :bounds="dataset.Bounds"></Minimap>
                         </div>
                     </div>
                     <div class="card">
@@ -328,6 +329,7 @@
 </template>
 
 <script lang="ts">
+import Minimap from "@/components/Minimap.vue";
 import DatasetDetailComponent from "./dataset-detail.component";
 export default DatasetDetailComponent;
 </script>