- add leaflet

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

package-lock.json

@@ -13,6 +13,7 @@
         "axios": "^0.24.0",
         "class-transformer": "^0.5.1",
         "core-js": "^3.6.5",
+        "leaflet": "^1.7.1",
         "moment": "^2.29.1",
         "qs": "^6.10.1",
         "rxjs": "^6.6.0",
@@ -23,6 +24,7 @@
         "vue-router": "^4.0.12"
       },
       "devDependencies": {
+        "@types/leaflet": "^1.7.9",
         "@typescript-eslint/eslint-plugin": "^4.18.0",
         "@typescript-eslint/parser": "^4.18.0",
         "@vue/cli-plugin-babel": "~4.5.0",
@@ -1972,6 +1974,12 @@
         "@types/range-parser": "*"
       }
     },
+    "node_modules/@types/geojson": {
+      "version": "7946.0.8",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.8.tgz",
+      "integrity": "sha512-1rkryxURpr6aWP7R786/UQOkJ3PcpQiWkAXBmdWc7ryFWqN6a4xfK7BtjXvFBKO9LjQ+MWQSWxYeZX1OApnArA==",
+      "dev": true
+    },
     "node_modules/@types/glob": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.2.0.tgz",
@@ -1997,6 +2005,15 @@
       "integrity": "sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==",
       "dev": true
     },
+    "node_modules/@types/leaflet": {
+      "version": "1.7.9",
+      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.7.9.tgz",
+      "integrity": "sha512-H8vPgD49HKzqM41ArHGZM70g/tfhp8W+JcPxfnF+5H/Xvp+xiP+KQOUNWU8U89fqS1Jj3cpRY/+nbnaHFzwnFA==",
+      "dev": true,
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
     "node_modules/@types/mime": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz",
@@ -10042,6 +10059,11 @@
       "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
       "dev": true
     },
+    "node_modules/leaflet": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.7.1.tgz",
+      "integrity": "sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw=="
+    },
     "node_modules/levn": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz",
@@ -18629,6 +18651,12 @@
         "@types/range-parser": "*"
       }
     },
+    "@types/geojson": {
+      "version": "7946.0.8",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.8.tgz",
+      "integrity": "sha512-1rkryxURpr6aWP7R786/UQOkJ3PcpQiWkAXBmdWc7ryFWqN6a4xfK7BtjXvFBKO9LjQ+MWQSWxYeZX1OApnArA==",
+      "dev": true
+    },
     "@types/glob": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.2.0.tgz",
@@ -18654,6 +18682,15 @@
       "integrity": "sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==",
       "dev": true
     },
+    "@types/leaflet": {
+      "version": "1.7.9",
+      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.7.9.tgz",
+      "integrity": "sha512-H8vPgD49HKzqM41ArHGZM70g/tfhp8W+JcPxfnF+5H/Xvp+xiP+KQOUNWU8U89fqS1Jj3cpRY/+nbnaHFzwnFA==",
+      "dev": true,
+      "requires": {
+        "@types/geojson": "*"
+      }
+    },
     "@types/mime": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz",
@@ -24986,6 +25023,11 @@
         "launch-editor": "^2.3.0"
       }
     },
+    "leaflet": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.7.1.tgz",
+      "integrity": "sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw=="
+    },
     "levn": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz",

package.json

@@ -14,6 +14,7 @@
     "axios": "^0.24.0",
     "class-transformer": "^0.5.1",
     "core-js": "^3.6.5",
+    "leaflet": "^1.7.1",
     "moment": "^2.29.1",
     "qs": "^6.10.1",
     "rxjs": "^6.6.0",
@@ -24,6 +25,7 @@
     "vue-router": "^4.0.12"
   },
   "devDependencies": {
+    "@types/leaflet": "^1.7.9",
     "@typescript-eslint/eslint-plugin": "^4.18.0",
     "@typescript-eslint/parser": "^4.18.0",
     "@vue/cli-plugin-babel": "~4.5.0",

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

@@ -69,3 +69,9 @@ npm install --save moment@latest
 npm install --save vue-matomo
 
 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>