geolba/tethys.frontend
6
0
Fork 1
Code Issues 7 Pull Requests Packages Projects 3 Releases 1 Wiki 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
Show Stats 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);

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

@ -10,35 +10,6 @@
</section>
</div> -->
<div class="container-fluid banner mz-5">
<!-- <div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen mx-auto">
<div class="search-box mx-auto">
<div class="field has-addons main-search-from-bg">
<div class="control is-expanded">
<input
v-on:input="searchChanged"
id="search_query"
class="input is-medium"
type="text"
name="q"
autocomplete="off"
v-model="display"
v-bind:placeholder="placeholder"
v-on:keydown.down="onArrowDown"
v-on:keydown.up="onArrowUp"
v-on:keydown.enter="onEnter"
@keydown.tab="close"
v-on:focus="focus"
/>
</div>
<div class="control">
<button class="button input is-medium search-button-icon" @click="search()">
<i class="fas fa-search text-white"></i>
</button>
</div>
</div>
</div>
</div> -->
<!-- <simple-search-component></simple-search-component> -->
<vs-input v-bind:placeholder="'Enter your search term...'" @search-change="onSearch"></vs-input>
</div>
<section v-if="loaded" class="section">