Minimap: - bounds corrected to prevent problems with coverages in the map limit.

- Sources info simplified

src/components/minimap/Minimap.ts

@@ -14,24 +14,18 @@ export default class Minimap extends Vue {
   mounted() {
     const map = L.map('map', {
       center: [47.71, 13.55],
-      zoomControl: false, // Disable zoom controls
+      zoomControl: true,
       zoom: 6,
-      // maxZoom: 9,
       minZoom: 5,
       maxBounds: [
-        [45.0, 10.0], // Southwest corner of the bounds
+        [44.0, 9.0], // Southwest corner of the bounds
-        [50.0, 17.0]  // Northeast corner of the bounds
+        [51.0, 18.0]  // Northeast corner of the bounds
       ],
-      maxBoundsViscosity: 1.0 // Ensure the map cannot be dragged outside the bounds
+      maxBoundsViscosity: 1
     });
   
-    // 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>',
+      attribution: '<a href="https://www.basemap.at">basemap.at</a>',
       noWrap: true,
       subdomains: ['', '1', '2', '3', '4']
     }).addTo(map);
@@ -45,7 +39,6 @@ export default class Minimap extends Vue {
     });
   
     const baseMaps = {
-    //   "OpenStreetMap": openStreetMapLayer,
       "basemap.at": basemapAtLayer,
       "ESRI Imagery": esriImageryLayer,
       "ESRI Topo": esriTopoLayer
@@ -56,70 +49,42 @@ export default class Minimap extends Vue {
     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 center = [southWest[0], southWest[1]] as [number, number];
-      
-      // const radius = 1000; // You can adjust the radius as needed
-
-      // // Draw a filled circle
-      // var circle = L.circle(center, {
-      //   color: '#30D5C8',       // Outline color
-      //   fillColor: '#336699' ,  // Fill color
-      //   fillOpacity: 1,   // Opacity of the fill
-      //   opacity: 0.5, 
-      //   weight: 10,
-      //   radius: radius         // Radius in meters
-      // }).addTo(map);
-
-      // Using CircleMarker to maintain constant size regardless of zoom level
       const circleMarker = L.circleMarker(center, {
-        color: '#30D5C8',       // Outline color
+        color: '#30D5C8',
-        fillColor: '#336699',   // Fill color
+        fillColor: '#336699',
-        fillOpacity: 1,         // Opacity of the fill
+        fillOpacity: 1,
-        opacity: 0.5,           // Outline opacity
+        opacity: 0.5,
-        weight: 10,             // Outline weight
+        weight: 10,
-        radius: 10              // Radius in pixels
+        radius: 10
       }).addTo(map);
   
-
+      const buffer = 0.01;
-      // // Create an empty circle to adjust the map to it
-      // var circle = L.circle(center, {radius: radius}).addTo(map);
-
-      // // Fit the map's view to the circle's bounds
-      // map.fitBounds(circle.getBounds());
-
-      // Manually create a small bounding box around the marker's center to fit bounds
-      const buffer = 0.01; // Adjust this value to control the area around the marker
       const markerBounds = L.latLngBounds(
-        [center[0] - buffer, center[1] - buffer], // Southwest corner
+        [center[0] - buffer, center[1] - buffer],
-        [center[0] + buffer, center[1] + buffer]  // Northeast corner
+        [center[0] + buffer, center[1] + buffer]
       );
   
-      // Add a click event to the CircleMarker
       circleMarker.on('click', () => {
-        // map.setView(this.originalCenter, this.originalZoom);
+        map.fitBounds(markerBounds, { padding: [10, 10] });
-        map.fitBounds(markerBounds);
       });
   
-      map.fitBounds(markerBounds);
+      map.fitBounds(markerBounds, { padding: [10, 10] });
   
     } else {
-      // Otherwise, generate a rectangle
       const rectangle = L.rectangle(this.bounds, {
         color: '#30D5C8',
         weight: 2,
         opacity: 1
-      }).addTo(map); //336699
+      }).addTo(map);
   
-      // Add a click event to the Rectangle
       rectangle.on('click', () => {
-        // map.setView(this.originalCenter, this.originalZoom);
+        map.fitBounds(this.bounds, { padding: [18, 18] });
-        map.fitBounds(this.bounds);
       });
   
-      // Fit the map's view to the rectangle's bounds
+      // Fit the map's view to the rectangle's bounds with padding
-      map.fitBounds(this.bounds);
+      map.fitBounds(this.bounds, { padding: [18, 18] });
     }
   }
+  
 }

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

@@ -160,7 +160,7 @@
                     </div>
                     <div class="card">
                         <div class="column">
-                            <h3 class="label uppercase">MAP</h3>
+                            <!-- <h3 class="label uppercase">MAP</h3> -->
                             <Minimap :bounds="dataset.Bounds"></Minimap>
                         </div>
                     </div>