Adding comments

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 {
+      // Otherwise, generate a rectangle
       const rectangle = L.rectangle(this.bounds, { 
         color: '#30D5C8', 
         weight: 2, 
         opacity: 1 
-      }).addTo(map);
+      }).addTo(map); //336699
 
+      // Add a click event to the Rectangle
       rectangle.on('click', () => {
         map.fitBounds(this.bounds, { padding: [18, 18] });
       });