diff --git a/src/components/minimap/Minimap.ts b/src/components/minimap/Minimap.ts index 468ef67..b2fed85 100644 --- a/src/components/minimap/Minimap.ts +++ b/src/components/minimap/Minimap.ts @@ -8,12 +8,15 @@ import 'leaflet/dist/leaflet.css'; export default class Minimap extends Vue { @Prop({ type: Array, required: true }) bounds!: L.LatLngBoundsLiteral; + // private originalCenter: L.LatLngExpression = [47.71, 13.55]; // Original center + // private originalZoom: number = 6; // Original zoom level + mounted() { const map = L.map('map', { center: [47.71, 13.55], zoomControl: false, // Disable zoom controls zoom: 6, - maxZoom: 9, + // maxZoom: 9, minZoom: 5, maxBounds: [ [45.0, 10.0], // Southwest corner of the bounds @@ -54,15 +57,66 @@ export default class Minimap extends Vue { 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 radius = 1000; // You can adjust the radius as needed - const circle = L.circle(center, { radius, color: '#30D5C8', weight: 4, opacity: 1 }).addTo(map); //336699 + // 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 + }).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 markerBounds = L.latLngBounds( + [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.setView(this.originalCenter, this.originalZoom); + map.fitBounds(markerBounds); + }); + + map.fitBounds(markerBounds); - // Fit the map's view to the circle's bounds - map.fitBounds(circle.getBounds()); } else { // Otherwise, generate a rectangle - const rectangle = L.rectangle(this.bounds, { color: '#30D5C8', weight: 2, opacity: 1 }).addTo(map); //336699 + 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.setView(this.originalCenter, this.originalZoom); + map.fitBounds(this.bounds); + }); // Fit the map's view to the rectangle's bounds map.fitBounds(this.bounds); diff --git a/src/views/dataset-detail.component/dataset-detail.component.vue b/src/views/dataset-detail.component/dataset-detail.component.vue index 159bd77..d52905e 100644 --- a/src/views/dataset-detail.component/dataset-detail.component.vue +++ b/src/views/dataset-detail.component/dataset-detail.component.vue @@ -10,35 +10,6 @@ -->