Minimap: changing of colour, removal of zoom controls

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/minimap/Minimap.ts

@@ -0,0 +1,71 @@
+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

@@ -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,11 +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 Minimap from '@/components/minimap/Minimap.vue';
+import * as L from 'leaflet';
 
 @Component({
     name: "DatasetDetailComponent",
     components: {
         VsInput,
+        Minimap,
         // DataMetricsBadge,
     },
 })
@@ -172,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">
@@ -186,6 +187,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>
+                            <Minimap :bounds="dataset.Bounds"></Minimap>
+                        </div>
+                    </div>
                     <div class="card">
                         <div class="column">
                             <h3 class="label uppercase">Beitragende/Contributor</h3>
@@ -322,11 +329,13 @@
 </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;