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>