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 @@