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

src/App.vue

@@ -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> -->

src/assets/scss/main-styles.scss

@@ -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";

src/components/map/map.component.ts

@@ -1,11 +1,14 @@
 import { Options, Vue } from "vue-class-component";
-import { Prop } from "vue-property-decorator";
+import { Prop, Emit } from "vue-property-decorator";
-import { Map, MapOptions, tileLayer } from "leaflet";
+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", {
+                // layer: tileLayer.wms("https://ows.terrestris.de/osm-gray/service", {
-                    format: "image/png",
+                //     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();
-    }
 }

src/components/map/map.component.vue

@@ -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;
+    bottom: 0px;
-    top: 30px;
+    top: 10px;
-    left: 30px;
+    left: 0px;
-    right: 30px;
+    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>

src/models/oai.ts

@@ -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;
+}

src/services/dataset.service.ts

@@ -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;

src/views/map-view/map-view.component.vue

@@ -1,10 +1,38 @@
 <template>
-    <div class="container main">
+    <div class="container map main">
-        <div class="canvas-area is-8 column">
+        <!-- <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 {
+.map .h2,
-    font-size: 0.8rem;
+.map h2 {
-    padding: 0;
+    font-size: 2rem;
 }
-.main {
+// .section {
-    // padding-top: 65px;
+//     font-size: 0.8rem;
-    // flex-wrap: wrap;
+//     padding: 0;
-    // justify-content: space-around;
+// }
 
-    position: absolute;
+.fs-4 {
-    overflow: hidden;
+    font-size: 1.5rem !important;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    overflow-y: scroll;
 }
-.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;
+    align-items: flex-start;
-    justify-content: center; */
+    margin-bottom: 0.25rem;
-    height: 100%;
+}
+*,
+::after,
+::before {
+    box-sizing: border-box;
 }
-
 #div-map {
     position: relative;
-    height: 500px;
+    height: 400px;
-    width: 500px;
+    width: 100%;
 }
 
-.mapDesktop {
+// .mapDesktop {
-    overflow: hidden;
+//     overflow: hidden;
-    position: absolute;
+//     position: absolute;
-    bottom: 30px;
+//     bottom: 30px;
-    top: 30px;
+//     top: 30px;
-    left: 30px;
+//     left: 30px;
-    right: 30px;
+//     right: 30px;
-}
+// }
 </style>