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

Minimap: - bounds corrected to prevent problems with coverages in the map limit.

Browse Source 
- Sources info simplified
This commit is contained in:
Porras-Bernardez 2024-09-02 16:31:00 +02:00
parent bd32e6071d
commit c47d77401b
2 changed files with 39 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> 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: <a href="https://www.basemap.at">basemap.at</a>',
attribution: '<a href="https://www.basemap.at">basemap.at</a>',
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 &copy; Esri'
});
const esriTopoLayer = L.tileLayer('https://server.arcgisonline.com/arcgis/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles &copy; 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] });
}
}
}

2
src/views/dataset-detail.component/dataset-detail.component.vue
View File

@ -160,7 +160,7 @@
</div>
<div class="card">
<div class="column">
<h3 class="label uppercase">MAP</h3>
<!-- <h3 class="label uppercase">MAP</h3> -->
<Minimap :bounds="dataset.Bounds"></Minimap>
</div>
</div>