package-lock.json

@@ -14,7 +14,7 @@
         "axios": "^1.2.2",
         "class-transformer": "^0.5.1",
         "dayjs": "^1.10.7",
-        "leaflet": "^1.9.4",
+        "leaflet": "^1.7.1",
         "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.9.4",
+    "leaflet": "^1.7.1",
     "qs": "^6.10.1",
     "rxjs": "^7.5.5",
     "vue": "^3.2.47",

src/App.vue

@@ -166,7 +166,6 @@ 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/minimap/Minimap.ts

@@ -1,71 +0,0 @@
-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],
-      zoomControl: false, // Disable zoom controls
-      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: '#30D5C8', weight: 4, opacity: 1 }).addTo(map); //336699
-
-      // 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: '#30D5C8', weight: 2, opacity: 1 }).addTo(map); //336699
-
-      // Fit the map's view to the rectangle's bounds
-      map.fitBounds(this.bounds);
-    }
-  }
-}

src/components/minimap/Minimap.vue

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

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

@@ -1,4 +1,3 @@
-<!-- detail-dataset.component.vue -->
 <template v-if="datasetId">
     <!-- <div class="container">
         <section class="section" v-if="dataset != undefined">
@@ -187,12 +186,6 @@
                             <!-- <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>
-                            <Minimap :bounds="dataset.Bounds"></Minimap>
-                        </div>
-                    </div>
                     <div class="card">
                         <div class="column">
                             <h3 class="label uppercase">Beitragende/Contributor</h3>
@@ -329,13 +322,11 @@
 </template>
 
 <script lang="ts">
-import Minimap from "@/components/Minimap.vue";
 import DatasetDetailComponent from "./dataset-detail.component";
 export default DatasetDetailComponent;
 </script>
 
 <style scoped lang="scss">
-// @import 'leaflet/dist/leaflet.css';
 .section {
     font-size: 0.8rem;
     padding: 0;