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

Publication minimap implemented

Browse Source
This commit is contained in:
Porras-Bernardez 2024-05-24 13:47:28 +02:00
parent ccf4e238f3
commit 9968b1e466
6 changed files with 108 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/MapComponent.vue
View File

@ -1,40 +0,0 @@
<template>
<div id="map" style="height: 300px;"></div>
</template>
<script lang="ts">
import { defineComponent, onMounted } from 'vue';
import * as L from 'leaflet';
import 'leaflet/dist/leaflet.css';
export default defineComponent({
name: 'MapComponent',
setup() {
onMounted(() => {
const map = L.map('map').setView([47.71, 13.55], 6);
// // Create the map
// this.map = L.map('map', {
// center: [47.71, 13.55],
// zoom: 7,
// minZoom: 6,
// editable: true // For the "Leaflet.Editable" library
// });
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
});
return {};
}
});
</script>
<style scoped>
#map {
height: 100%;
width: 100%;
}
</style>

70
src/components/minimap/Minimap.ts Normal file
View File

@ -0,0 +1,70 @@
import { Component, Prop, Vue } from 'vue-facing-decorator';
import * as L from 'leaflet';
import 'leaflet/dist/leaflet.css';
@Component({
name: 'Minimap',
})
export default class Minimap extends Vue {
@Prop({ type: Array, required: true }) bounds!: L.LatLngBoundsLiteral;
mounted() {
const map = L.map('map', {
center: [47.71, 13.55],
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
],
maxBoundsViscosity: 1.0 // Ensure the map cannot be dragged outside the bounds
});
// 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>',
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 radius = 1000; // You can adjust the radius as needed
const circle = L.circle(center, { radius, color: '#336699', weight: 4, opacity: 1 }).addTo(map);
// 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: '#336699', weight: 2, opacity: 1 }).addTo(map);
// Fit the map's view to the rectangle's bounds
map.fitBounds(this.bounds);
}
}
}

16
src/components/minimap/Minimap.vue Normal file
View File

@ -0,0 +1,16 @@
<!-- Contains the template and references the TypeScript logic. -->
<template>
<div id="map" style="height: 300px;"></div>
</template>
<script lang="ts">
import Minimap from './Minimap';
export default Minimap;
</script>
<style scoped>
#map {
height: 100%;
width: 100%;
}
</style>

13
src/models/dataset.ts
View File

@ -264,6 +264,19 @@ export class DbDataset {
return "";
}
}
/* Provides the bounds of the publication for the Leaflet minimap */
public get Bounds(): L.LatLngBoundsLiteral | string {
if (this.coverage != undefined) {
return [
[Number(this.coverage.y_min), Number(this.coverage.x_min)], // Southwest corner
[Number(this.coverage.y_max), Number(this.coverage.x_max)] // Northeast corner
];
} else {
return "";
}
}
}
type Nullable<T> = T | undefined;

8
src/views/dataset-detail.component/dataset-detail.component.ts
View File

@ -1,3 +1,4 @@
// detail-dataset.component.ts
import { Component, Vue, Prop } from "vue-facing-decorator";
import { DbDataset } from "@/models/dataset";
import DatasetService from "../../services/dataset.service";
@ -9,13 +10,14 @@ import { Suggestion } from "@/models/dataset";
import { VUE_API } from "@/constants";
// import DataMetricsBadge from "data-metrics-badge/dist/data-metrics-badge.js";
// import DataMetricsBadge from "@/components/datacite/DataMetricsBadge.vue";
import MapComponent from '@/components/MapComponent.vue';
import Minimap from '@/components/minimap/Minimap.vue';
import * as L from 'leaflet';
@Component({
name: "DatasetDetailComponent",
components: {
VsInput,
MapComponent,
Minimap,
// DataMetricsBadge,
},
})
@ -174,4 +176,6 @@ export default class DatasetDetailComponent extends Vue {
citation += ", Wien";
return citation;
}
}

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

@ -1,3 +1,4 @@
<!-- detail-dataset.component.vue -->
<template v-if="datasetId">
<!-- <div class="container">
<section class="section" v-if="dataset != undefined">
@ -189,7 +190,7 @@
<div class="card">
<div class="column">
<h3 class="label uppercase">MAP</h3>
<MapComponent></MapComponent>
<Minimap :bounds="dataset.Bounds"></Minimap>
</div>
</div>
<div class="card">
@ -328,6 +329,7 @@
</template>
<script lang="ts">
import Minimap from "@/components/Minimap.vue";
import DatasetDetailComponent from "./dataset-detail.component";
export default DatasetDetailComponent;
</script>