diff --git a/package-lock.json b/package-lock.json index 7436790..d213b0e 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index f77b6d9..c4e2c9d 100644 --- a/package.json +++ b/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", diff --git a/src/App.vue b/src/App.vue index edfb35c..4b962b9 100644 --- a/src/App.vue +++ b/src/App.vue @@ -37,6 +37,9 @@ HELP + diff --git a/src/app.ts b/src/app.ts index ae25b76..f71306a 100644 --- a/src/app.ts +++ b/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, diff --git a/src/app2.ts b/src/app2.ts index 0044597..1b10854 100644 --- a/src/app2.ts +++ b/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"; diff --git a/src/notes.txt b/src/notes.txt index 93b6779..ddde7a1 100644 --- a/src/notes.txt +++ b/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 \ No newline at end of file +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/ \ No newline at end of file diff --git a/src/router/index.ts b/src/router/index.ts index c1d6964..6b93dc9 100644 --- a/src/router/index.ts +++ b/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", diff --git a/src/views/map-view/help-view-component.scss b/src/views/help-view/help-view-component.scss similarity index 100% rename from src/views/map-view/help-view-component.scss rename to src/views/help-view/help-view-component.scss diff --git a/src/views/map-view/help-view-component.ts b/src/views/help-view/help-view-component.ts similarity index 100% rename from src/views/map-view/help-view-component.ts rename to src/views/help-view/help-view-component.ts diff --git a/src/views/map-view/help-view-component.vue b/src/views/help-view/help-view-component.vue similarity index 100% rename from src/views/map-view/help-view-component.vue rename to src/views/help-view/help-view-component.vue diff --git a/src/views/map-view/map-view.component.ts b/src/views/map-view/map-view.component.ts new file mode 100644 index 0000000..7d0b123 --- /dev/null +++ b/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 = '© OpenStreetMap 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(); + } +} diff --git a/src/views/map-view/map-view.component.vue b/src/views/map-view/map-view.component.vue new file mode 100644 index 0000000..ca80002 --- /dev/null +++ b/src/views/map-view/map-view.component.vue @@ -0,0 +1,23 @@ + + + + +