From c47d77401b1880f185f5068c1367f9db9a878a07 Mon Sep 17 00:00:00 2001 From: frankporras Date: Mon, 2 Sep 2024 16:31:00 +0200 Subject: [PATCH] Minimap: - bounds corrected to prevent problems with coverages in the map limit. - Sources info simplified --- src/components/minimap/Minimap.ts | 111 ++++++------------ .../dataset-detail.component.vue | 2 +- 2 files changed, 39 insertions(+), 74 deletions(-) diff --git a/src/components/minimap/Minimap.ts b/src/components/minimap/Minimap.ts index b2fed85..55e331e 100644 --- a/src/components/minimap/Minimap.ts +++ b/src/components/minimap/Minimap.ts @@ -14,112 +14,77 @@ 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 - [50.0, 17.0] // Northeast corner of the bounds + [44.0, 9.0], // Southwest 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: '© OpenStreetMap 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: basemap.at', + attribution: 'basemap.at', 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 © Esri' }); - + const esriTopoLayer = L.tileLayer('https://server.arcgisonline.com/arcgis/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', { attribution: 'Tiles © 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 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 - fillColor: '#336699', // Fill color - fillOpacity: 1, // Opacity of the fill - opacity: 0.5, // Outline opacity - weight: 10, // Outline weight - radius: 10 // Radius in pixels + color: '#30D5C8', + fillColor: '#336699', + fillOpacity: 1, + opacity: 0.5, + weight: 10, + radius: 10 }).addTo(map); - - - // // 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 buffer = 0.01; const markerBounds = L.latLngBounds( - [center[0] - buffer, center[1] - buffer], // Southwest corner - [center[0] + buffer, center[1] + buffer] // Northeast corner + [center[0] - buffer, center[1] - buffer], + [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); + map.fitBounds(markerBounds, { padding: [10, 10] }); }); - - 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 - - // Add a click event to the Rectangle + const rectangle = L.rectangle(this.bounds, { + color: '#30D5C8', + weight: 2, + opacity: 1 + }).addTo(map); + rectangle.on('click', () => { - // map.setView(this.originalCenter, this.originalZoom); - map.fitBounds(this.bounds); + map.fitBounds(this.bounds, { padding: [18, 18] }); }); - - // Fit the map's view to the rectangle's bounds - map.fitBounds(this.bounds); + + // Fit the map's view to the rectangle's bounds with padding + map.fitBounds(this.bounds, { padding: [18, 18] }); } } + } \ No newline at end of file diff --git a/src/views/dataset-detail.component/dataset-detail.component.vue b/src/views/dataset-detail.component/dataset-detail.component.vue index d52905e..c8a3e9e 100644 --- a/src/views/dataset-detail.component/dataset-detail.component.vue +++ b/src/views/dataset-detail.component/dataset-detail.component.vue @@ -160,7 +160,7 @@
-

MAP

+