geolba/tethys.frontend
6
0
Fork 1
Code Issues 7 Pull Requests Packages Projects 3 Releases 1 Wiki Activity

Adding comments

Browse Source
This commit is contained in:
Porras-Bernardez 2024-09-03 08:55:11 +02:00
parent c47d77401b
commit f4bd82a453
1 changed files with 24 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/minimap/Minimap.ts
View File

@ -21,7 +21,7 @@ export default class Minimap extends Vue {
[44.0, 9.0], // Southwest corner of the bounds [44.0, 9.0], // Southwest corner of the bounds
[51.0, 18.0] // Northeast 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', { 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 = { const baseMaps = {
// "OpenStreetMap": openStreetMapLayer,
"basemap.at": basemapAtLayer, "basemap.at": basemapAtLayer,
"ESRI Imagery": esriImageryLayer, "ESRI Imagery": esriImageryLayer,
"ESRI Topo": esriTopoLayer "ESRI Topo": esriTopoLayer
@ -49,22 +50,27 @@ export default class Minimap extends Vue {
const [southWest, northEast] = this.bounds; const [southWest, northEast] = this.bounds;
if (southWest[0] === northEast[0] || southWest[1] === northEast[1]) { 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]; const center = [southWest[0], southWest[1]] as [number, number];
// Using CircleMarker to maintain constant size regardless of zoom level
const circleMarker = L.circleMarker(center, { const circleMarker = L.circleMarker(center, {
color: '#30D5C8', color: '#30D5C8', // Outline color
fillColor: '#336699', fillColor: '#336699', // Fill color
fillOpacity: 1, fillOpacity: 1, // Opacity of the fill
opacity: 0.5, opacity: 0.5, // Outline opacity
weight: 10, weight: 10, // Outline weight
radius: 10 radius: 10 // Radius in pixels
}).addTo(map); }).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( const markerBounds = L.latLngBounds(
[center[0] - buffer, center[1] - buffer], [center[0] - buffer, center[1] - buffer], // Southwest corner
[center[0] + buffer, center[1] + buffer] [center[0] + buffer, center[1] + buffer] // Northeast corner
); );
// Add a click event to the CircleMarker
circleMarker.on('click', () => { circleMarker.on('click', () => {
map.fitBounds(markerBounds, { padding: [10, 10] }); map.fitBounds(markerBounds, { padding: [10, 10] });
}); });
@ -72,12 +78,14 @@ export default class Minimap extends Vue {
map.fitBounds(markerBounds, { padding: [10, 10] }); map.fitBounds(markerBounds, { padding: [10, 10] });
} else { } else {
const rectangle = L.rectangle(this.bounds, { // Otherwise, generate a rectangle
color: '#30D5C8', const rectangle = L.rectangle(this.bounds, {
weight: 2, color: '#30D5C8',
opacity: 1 weight: 2,
}).addTo(map); opacity: 1
}).addTo(map); //336699
// Add a click event to the Rectangle
rectangle.on('click', () => { rectangle.on('click', () => {
map.fitBounds(this.bounds, { padding: [18, 18] }); map.fitBounds(this.bounds, { padding: [18, 18] });
}); });