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] }); });