barmar/tethys.frontend
1
0
Fork 0
forked from geolba/tethys.frontend
Code Pull requests Activity

Improvement minimap

Browse source
This commit is contained in:
Porras-Bernardez 2024-09-02 09:34:51 +02:00
parent 953f6551a1
commit bd32e6071d
2 changed files with 61 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

68
src/components/minimap/Minimap.ts
View file

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