From f4bd82a45361fe65af1b0fb747488b42e0a6a97c Mon Sep 17 00:00:00 2001
From: frankporras <francisco.porras-bernardez@geosphere.at>
Date: Tue, 3 Sep 2024 08:55:11 +0200
Subject: [PATCH] Adding comments

---
 src/components/minimap/Minimap.ts | 40 ++++++++++++++++++-------------
 1 file changed, 24 insertions(+), 16 deletions(-)

diff --git a/src/components/minimap/Minimap.ts b/src/components/minimap/Minimap.ts
index 55e331e..5bdb079 100644
--- a/src/components/minimap/Minimap.ts
+++ b/src/components/minimap/Minimap.ts
@@ -21,7 +21,7 @@ export default class Minimap extends Vue {
         [44.0, 9.0], // Southwest corner of the bounds
         [51.0, 18.0]  // Northeast corner of the bounds
       ],
-      maxBoundsViscosity: 1
+      maxBoundsViscosity: 1.0 // Ensure the map cannot be dragged outside the bounds
     });
   
     const basemapAtLayer = L.tileLayer('https://maps{s}.wien.gv.at/basemap/geolandbasemap/normal/google3857/{z}/{y}/{x}.png', {
@@ -39,6 +39,7 @@ export default class Minimap extends Vue {
     });
   
     const baseMaps = {
+      //   "OpenStreetMap": openStreetMapLayer,
       "basemap.at": basemapAtLayer,
       "ESRI Imagery": esriImageryLayer,
       "ESRI Topo": esriTopoLayer
@@ -49,22 +50,27 @@ 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 [number, number];
+// Using CircleMarker to maintain constant size regardless of zoom level
       const circleMarker = L.circleMarker(center, {
-        color: '#30D5C8',
-        fillColor: '#336699',
-        fillOpacity: 1,
-        opacity: 0.5,
-        weight: 10,
-        radius: 10
+        color: '#30D5C8',       // Outline color
+        fillColor: '#336699',   // Fill color
+        fillOpacity: 1,         // Opacity of the fill
+        opacity: 0.5,           // Outline opacity
+        weight: 10,             // Outline weight
+        radius: 10              // Radius in pixels
       }).addTo(map);
   
-      const buffer = 0.01;
+      // 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],
-        [center[0] + buffer, center[1] + buffer]
+        [center[0] - buffer, center[1] - buffer], // Southwest corner
+        [center[0] + buffer, center[1] + buffer]  // Northeast corner
       );
   
+      
+      // Add a click event to the CircleMarker
       circleMarker.on('click', () => {
         map.fitBounds(markerBounds, { padding: [10, 10] });
       });
@@ -72,12 +78,14 @@ export default class Minimap extends Vue {
       map.fitBounds(markerBounds, { padding: [10, 10] });
   
     } else {
-      const rectangle = L.rectangle(this.bounds, {
-        color: '#30D5C8',
-        weight: 2,
-        opacity: 1
-      }).addTo(map);
-  
+      // Otherwise, generate a rectangle
+      const rectangle = L.rectangle(this.bounds, { 
+        color: '#30D5C8', 
+        weight: 2, 
+        opacity: 1 
+      }).addTo(map); //336699
+
+      // Add a click event to the Rectangle
       rectangle.on('click', () => {
         map.fitBounds(this.bounds, { padding: [18, 18] });
       });