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

- add webgis: overview of all oai datasets via mocking service

Browse Source
This commit is contained in:
Arno Kaimbacher 2022-01-27 17:17:40 +01:00
parent 5fe134a650
commit 745c3e1349
8 changed files with 2142 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.vue
View File

@ -37,9 +37,9 @@
<!-- <a class="navbar-link is-arrowless" href="#">INTRO</a> -->
<router-link class="navbar-link is-arrowless" to="/help">HELP</router-link>
</li>
<!-- <li class="navbar-item">
<li class="navbar-item">
<router-link class="navbar-link is-arrowless" to="/map">Map</router-link>
</li> -->
</li>
<!-- <li class="navbar-item">
<a class="navbar-link is-arrowless" href="#">HELP</a>
</li> -->

3
src/assets/scss/main-styles.scss
View File

@ -49,10 +49,11 @@ $table-striped-row-even-hover-background-color: #ecf2fa;
@import "~bulma/sass/helpers/_all.sass";
@import "~bulma/sass/components/navbar.sass";
// @import "~bulma/sass/components/tabs.sass";
@import "~bulma/sass/components/media.sass";
// @import "~bulma/sass/components/media.sass";
@import "~bulma/sass/components/modal.sass";
@import "~bulma/sass/components/card.sass";
@import "~bulma/sass/components/panel.sass";
@import "~bulma/sass/layout/_all.sass";

97
src/components/map/map.component.ts
View File

@ -1,11 +1,14 @@
import { Options, Vue } from "vue-class-component";
import { Prop } from "vue-property-decorator";
import { Map, MapOptions, tileLayer } from "leaflet";
import { Prop, Emit } from "vue-property-decorator";
import { LatLng, LatLngBounds, Map, MapOptions, Rectangle, tileLayer } from "leaflet";
import { LayerOptions } from "./map-options";
import DatasetService from "../../services/dataset.service";
import { Subscription } from "rxjs";
import { OaiDataset } from "@/models/oai";
const DEFAULT_BASE_LAYER_NAME = "BaseLayer";
// const DEFAULT_BASE_LAYER_URL = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
const DEFAULT_BASE_LAYER_ATTRIBUTION = '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors';
const DEFAULT_BASE_LAYER_ATTRIBUTION = '&copy; <a href="http://basemap.at" target="_blank">Basemap.at</a>, <a href="http://www.geologie.ac.at" target="_blank">Geologie.ac.at</a>';
@Options({
// selector: "app-map",
@ -32,9 +35,18 @@ export default class MapComponent extends Vue {
@Prop()
public mapOptions!: MapOptions;
/**
* Informs when initialization is done with map id.
*/
// @Emit("search-change")
// public onMapInitializedEvent: EventEmitter<string> = new EventEmitter();
// protected oldBaseLayer: Control.LayersObject = {};
protected map!: Map;
// protected zoomControl!: Control.Zoom;
private subscriptions: Array<Subscription> = [];
private error = "";
private tethys!: Array<OaiDataset>;
public beforeMount(): void {
if (this.mapId === undefined || this.mapId === null) {
@ -42,15 +54,73 @@ export default class MapComponent extends Vue {
}
}
public mounted(): void {
this.initMap();
}
beforeUnmount(): void {
//unsunscribe to ensure no memory leaks
// this.subscription.unsubscribe();
for (const sub of this.subscriptions) {
sub.unsubscribe();
}
}
protected initMap(): void {
this.map = new Map(this.mapId, this.mapOptions);
// this.mapService.setMap(this.mapId, this.map);
// this.onMapInitializedEvent.emit(this.mapId);
this.addBaseMap();
const newSubs = DatasetService.getOAI().subscribe(
(res: Array<OaiDataset>) => {
this.tethys = res;
this.map.createPane("bottom");
// this.map.getPane('bottom').style.zIndex = "550";
this.map.createPane("top");
// this.map.getPane('top').style.zIndex = "650";
for (let index = 0; index < this.tethys.length; index++) {
this.addPolygon(index);
}
},
(error: string) => this.errorHandler(error),
);
this.subscriptions.push(newSubs);
}
private errorHandler(err: string): void {
this.error = err;
// this.loading = false;
}
private addPolygon(i: number) {
const southWest = new LatLng(this.tethys[i].south, this.tethys[i].west),
northEast = new LatLng(this.tethys[i].north, this.tethys[i].east);
const bounds = new LatLngBounds(southWest, northEast);
const bW = this.tethys[i].east - this.tethys[i].west;
new Rectangle(bounds, {
color: /GEOFAST/g.test(this.tethys[i].title) ? "red" : "green",
fill: bW > 0.3 ? false : true,
weight: bW > 0.3 || bW < 0.03 ? 3 : 1,
pane: bW > 0.2 ? "bottom" : "top",
}).addTo(this.map).bindPopup(`<p>DOI: <a target="_blank" href="https://doi.org/${this.tethys[i].doi}">${this.tethys[i].doi}</a>
<br><strong>${this.tethys[i].title}</strong><br>
publ.: ${this.tethys[i].creator}<br>
und ${this.tethys[i].contributor}
</p>`);
}
private addBaseMap(layerOptions?: LayerOptions): void {
if (this.map) {
const map = this.map.setView([47.7, 13.5], 7);
const southWest = new LatLng(46.5, 9.9),
northEast = new LatLng(48.9, 16.9),
bounds = new LatLngBounds(southWest, northEast);
// zoom the map to that bounding box
map.fitBounds(bounds);
// let tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
// maxZoom: 18,
// minZoom: 3,
@ -60,10 +130,20 @@ export default class MapComponent extends Vue {
const layerOptions = {
label: DEFAULT_BASE_LAYER_NAME,
visible: true,
layer: tileLayer.wms("https://ows.terrestris.de/osm-gray/service", {
format: "image/png",
// layer: tileLayer.wms("https://ows.terrestris.de/osm-gray/service", {
// format: "image/png",
// attribution: DEFAULT_BASE_LAYER_ATTRIBUTION,
// layers: "OSM-WMS",
// }),
// tileLayer.provider("BasemapAT.grau")
layer: tileLayer("https://maps{s}.wien.gv.at/basemap/bmapgrau/normal/google3857/{z}/{y}/{x}.png", {
subdomains: ["", "1", "2", "3", "4"],
attribution: DEFAULT_BASE_LAYER_ATTRIBUTION,
layers: "OSM-WMS",
bounds: [
[46.35877, 8.782379],
[49.037872, 17.189532],
],
detectRetina: false,
}),
// layer: new TileLayer(DEFAULT_BASE_LAYER_URL, {
// attribution: DEFAULT_BASE_LAYER_ATTRIBUTION
@ -81,9 +161,4 @@ export default class MapComponent extends Vue {
}
return s4() + s4() + "-" + s4() + "-" + s4() + "-" + s4() + "-" + s4() + s4() + s4();
}
mounted(): void {
// alert("Hello World!");
this.initMap();
}
}

39
src/components/map/map.component.vue
View File

@ -1,5 +1,9 @@
<template>
<div v-bind:id="mapId" class="map-container mapDesktop"></div>
<div v-bind:id="mapId" class="map-container mapDesktop">
<div class="loading">
<span class="spinner-border text-danger" role="status"></span>
</div>
</div>
</template>
<script lang="ts">
@ -8,12 +12,37 @@ export default MapComponent;
</script>
<style lang="scss" scoped>
@import "~bulma/sass/utilities/initial-variables.sass";
.mapDesktop {
overflow: hidden;
position: absolute;
bottom: 30px;
top: 30px;
left: 30px;
right: 30px;
bottom: 0px;
top: 10px;
left: 0px;
right: 0px;
}
// @media screen and (min-width: 769px) {
@media screen and (min-width: $tablet), print {
.mapDesktop {
overflow: hidden;
position: absolute;
bottom: 0px;
top: 0px;
left: 0px;
right: 0px;
}
}
.loading {
position: absolute;
top: 50%;
left: 50%;
z-index: 1000;
color: red;
width: 3rem;
height: 3rem;
text-align: center;
vertical-align: middle;
}
</style>

11
src/models/oai.ts Normal file
View File

@ -0,0 +1,11 @@
export interface OaiDataset {
doi: string;
title: string;
creator: string;
contributor: string;
subject: string;
north: number;
south: number;
east: number;
west: number;
}

15
src/services/dataset.service.ts
View File

@ -1,11 +1,13 @@
import api from "../api/api";
import { Observable } from "rxjs";
import { Observable, of } from "rxjs";
import { map } from "rxjs/operators";
import { Dataset, DbDataset, Suggestion } from "@/models/dataset";
import { SolrResponse } from "@/models/headers";
import { ActiveFilterCategories } from "@/models/solr";
import { VUE_APP_PORTAL } from "@/constants";
import { deserialize, instanceToInstance } from "class-transformer";
import { OAI_DATASETS } from "./mock-oai-datasets";
import { OaiDataset } from "@/models/oai";
class DatasetService {
// for the autocomplete search
@ -173,6 +175,17 @@ class DatasetService {
return dataset;
}
public getOAI(): Observable<OaiDataset[]> {
//const host = "https://resource.geolba.net/tethys/harvestOAI.php";
// const path = "/api/dataset/" + id;
// const apiUrl = host + path;
// const oaiDataset = api.get<any>(apiUrl);
const oaiDatasets = of(OAI_DATASETS);
// this.messageService.add('HeroService: fetched heroes');
return oaiDatasets;
}
private prepareDataset(datasetObj: DbDataset, apiUrl: string): DbDataset {
const dataset = deserialize<DbDataset>(DbDataset, JSON.stringify(datasetObj));
dataset.url = document.documentURI;

1918
src/services/mock-oai-datasets.ts Normal file
View File

File diff suppressed because it is too large Load Diff

104
src/views/map-view/map-view.component.vue
View File

@ -1,10 +1,38 @@
<template>
<div class="container main">
<div class="canvas-area is-8 column">
<div class="container map main">
<!-- <header class="">
<span id="heading" class="fs-4">Map</span>
</header
<br />
<h1>TETHYS SERVICES</h1>
-->
<div id="div-map">
<MapComponent v-bind:mapId="'map'" v-bind:mapOptions="mapOptions"> </MapComponent>
</div>
<div class="columns is-tablet">
<div class="column is-half">
<h2>Map views</h2>
<p>Ready to beyond the starter map? Check out these map views that you can quickly access.</p>
<ul class="icon-list">
<!-- <li><a href="javascript:window.open(window.location.href.split('?')[0],'_self')">alle Datenpublikationen</a></li>
<li><a href="javascript:window.open(window.location.href.split('?')[0]+'?layer=gk50','_self')">GK50 Kartendaten</a></li>
<li><a href="javascript:window.open(window.location.href.split('?')[0]+'?layer=geofast','_self')">Geofast Datensätze</a></li> -->
<li><a href="javascript:window.open(window.location.href.split('?')[0],'_self')">alle Datenpublikationen</a></li>
<li><a href="javascript:window.open(window.location.href.split('?')[0]+'?layer=gk50','_self')">GK50 Kartendaten</a></li>
<li><a href="javascript:window.open(window.location.href.split('?')[0]+'?layer=geofast','_self')">Geofast Datensätze</a></li>
</ul>
</div>
<div class="column is-half">
<h2>Catalog views</h2>
<p>Read more detailed documentation on using the Tethys Research Data Repository.</p>
<ul class="icon-list">
<li><a href="https://tethys.at">GK50 Kartendaten</a></li>
<li><a href="https://tethys.at">Geofast Datenpublikationen</a></li>
<li><a href="https://tethys.at">Rohstoff Geologie</a></li>
</ul>
</div>
</div>
</div>
</template>
@ -15,43 +43,55 @@ export default MapViewComponent;
</script>
<style lang="scss">
.section {
font-size: 0.8rem;
padding: 0;
.map .h2,
.map h2 {
font-size: 2rem;
}
.main {
// padding-top: 65px;
// flex-wrap: wrap;
// justify-content: space-around;
// .section {
// font-size: 0.8rem;
// padding: 0;
// }
position: absolute;
overflow: hidden;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow-y: scroll;
.fs-4 {
font-size: 1.5rem !important;
}
.canvas-area {
/* flex: 2;
.icon-list {
padding-left: 0;
list-style: none;
}
.icon-list li::before {
display: block;
flex-shrink: 0;
width: 1.5em;
height: 1.5em;
margin-right: 0.5rem;
content: "";
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23212529' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z'/%3E%3C/svg%3E")
no-repeat center center / 100% auto;
}
.icon-list li {
display: flex;
align-items: center;
justify-content: center; */
height: 100%;
align-items: flex-start;
margin-bottom: 0.25rem;
}
*,
::after,
::before {
box-sizing: border-box;
}
#div-map {
position: relative;
height: 500px;
width: 500px;
height: 400px;
width: 100%;
}
.mapDesktop {
overflow: hidden;
position: absolute;
bottom: 30px;
top: 30px;
left: 30px;
right: 30px;
}
// .mapDesktop {
// overflow: hidden;
// position: absolute;
// bottom: 30px;
// top: 30px;
// left: 30px;
// right: 30px;
// }
</style>