- add leaflet

- start with map-view.component: basic webgis functionalities

src/App.vue

@@ -37,6 +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">                    
+                    <router-link class="navbar-link is-arrowless" to="/map">Map</router-link>
+                </li> -->
                 <!-- <li class="navbar-item">
                     <a class="navbar-link is-arrowless" href="#">HELP</a>
                 </li> -->

src/app.ts

@@ -3,7 +3,8 @@ import { Watch } from "vue-property-decorator";
 // import { RouteLocation } from "vue-router";
 import HelloWorld from "./components/HelloWorld/HelloWorld.vue";
 import HomeViewComponent from "./views/home-view/home-view-component.vue";
-import HelpViewComponent from "./views/map-view/help-view-component.vue";
+import HelpViewComponent from "./views/help-view/help-view-component.vue";
+import MapViewComponent from "./views/map-view/map-view.component";
 import SearchViewComponent from "./views/search-view/search-view-component.vue";
 import DatasetDetailComponent from "./views/dataset-detail.component/dataset-detail.component.vue";
 import ServiceViewComponent from "./views/services-view/service-view-component.vue";
@@ -34,6 +35,7 @@ import { VUE_APP_PORTAL } from "./constants";
         // FacetCategory,
         // ActiveFacetCategory,
         HelpViewComponent,
+        MapViewComponent,
         SearchViewComponent,
         DatasetDetailComponent,
         ServiceViewComponent,

src/app2.ts

@@ -3,7 +3,7 @@ import { Watch } from "vue-property-decorator";
 // import { RouteLocation } from "vue-router";
 import HelloWorld from "./components/HelloWorld/HelloWorld.vue";
 import HomeViewComponent from "./views/home-view/home-view-component.vue";
-import HelpViewComponent from "./views/map-view/help-view-component.vue";
+import HelpViewComponent from "./views/help-view/help-view-component.vue";
 import SearchViewComponent from "./views/search-view/search-view-component.vue";
 import DatasetDetailComponent from "./views/dataset-detail.component/dataset-detail.component.vue";
 import ServiceViewComponent from "./views/services-view/service-view-component.vue";

src/notes.txt

@@ -68,4 +68,10 @@ npm install --save moment@latest
 ==================== matomo tracking ==========================
 npm install --save vue-matomo
 
-declare module 'vue-matomo'; inside shims-vue.d.ts
+declare module 'vue-matomo'; inside shims-vue.d.ts
+
+======================== leaflet ==========================
+npm install --save leaflet@latest 
+npm install --save-dev @types/leaflet
+
+http://geolba.net/tethys/

src/router/index.ts

@@ -1,6 +1,7 @@
 import { createWebHistory, createRouter } from "vue-router";
 import HomeViewComponent from "@/views/home-view/home-view-component.vue";
-import HelpViewComponent from "@/views/map-view/help-view-component.vue";
+import HelpViewComponent from "@/views/help-view/help-view-component.vue";
+import MapViewComponent from "@/views/map-view/map-view.component.vue";
 import SearchViewComponent from "@/views/search-view/search-view-component";
 import ServiceViewComponent from "@/views/services-view/service-view-component.vue";
 import OaiViewComponent from "@/views/oai-view/oai-view-component.vue";
@@ -21,6 +22,11 @@ const routes = [
         name: "Help",
         component: HelpViewComponent,
     },
+    {
+        path: "/map",
+        name: "Map",
+        component: MapViewComponent,
+    },
     {
         path: "/search/:display?/:type?",
         name: "Search",

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

@@ -0,0 +1,53 @@
+import { Options, Vue } from "vue-class-component";
+import { Prop } from "vue-property-decorator";
+import { Map, Control, MapOptions, LatLngBoundsExpression, tileLayer, TileLayer } from "leaflet";
+
+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';
+
+@Options({
+    name: "MapViewComponent",
+    components: {},
+})
+export default class MapViewComponent extends Vue {
+    /**
+     * A map with the given ID is created inside this component. This ID can be used the get the map instance over the map cache service.
+     */
+    @Prop()
+    public mapId!: string;
+
+    protected oldBaseLayer: Control.LayersObject = {};
+    protected map!: Map;
+    protected zoomControl!: Control.Zoom;
+
+    beforeMount() {
+        if (this.mapId === undefined || this.mapId === null) {
+            this.mapId = this.generateUUID();
+        }
+    }
+
+    protected initMap(): void {
+        this.map = new Map(this.mapId);
+        // this.mapService.setMap(this.mapId, this.map);
+        // this.onMapInitializedEvent.emit(this.mapId);
+
+        // if (this.baseMaps && this.baseMaps.size > 0) {
+        // 	this.baseMaps.forEach((layerOptions, key) => this.addBaseMap(layerOptions));
+        // } else {
+        // 	this.addBaseMap();
+        // }
+        // if (this.fitBounds) {
+        // 	this.map.fitBounds(this.fitBounds);
+        // }
+    }
+
+    private generateUUID(): string {
+        function s4() {
+            return Math.floor((1 + Math.random()) * 0x10000)
+                .toString(16)
+                .substring(1);
+        }
+        return s4() + s4() + "-" + s4() + "-" + s4() + "-" + s4() + "-" + s4() + s4() + s4();
+    }
+}

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

@@ -0,0 +1,23 @@
+<template>
+    <div class="container">
+        <section class="section">
+            <div class="column is-full text-center">
+                <h1>TETHYS SERVICES</h1>
+                <p class="lead">Map</p>
+                <hr class="center-line" />
+            </div>
+        </section>
+    </div>
+</template>
+
+<script lang="ts">
+import MapViewComponent from "./map-view.component";
+export default MapViewComponent;
+</script>
+
+<style scoped lang="scss">
+.section {
+    font-size: 0.8rem;
+    padding: 0;
+}
+</style>