From 0b0ff5eb699cc4e3a401aa2dadd6b9cb82f6f6aa Mon Sep 17 00:00:00 2001 From: Lukas Winkler Date: Tue, 28 Feb 2023 22:27:31 +0100 Subject: [PATCH] add aerial view --- package-lock.json | 54 +++++++++++++++++++++++------------------------ src/map.ts | 25 +++++++++------------- src/style.scss | 6 ++++++ src/toggle.ts | 38 +++++++++++++++++++++++++++++++++ 4 files changed, 81 insertions(+), 42 deletions(-) create mode 100644 src/toggle.ts diff --git a/package-lock.json b/package-lock.json index 358ecbc..f385de8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -482,9 +482,9 @@ "dev": true }, "node_modules/@types/node": { - "version": "18.11.18", - "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.18.tgz", - "integrity": "sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA==" + "version": "18.14.2", + "resolved": "https://registry.npmjs.org/@types/node/-/node-18.14.2.tgz", + "integrity": "sha512-1uEQxww3DaghA0RxqHx0O0ppVlo43pJhepY51OxuQIKHpjbnYLA7vcdwioNPzIqmC2u3I/dmylcqjlh0e7AyUA==" }, "node_modules/acorn": { "version": "8.8.2", @@ -577,9 +577,9 @@ "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==" }, "node_modules/axios": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/axios/-/axios-1.3.0.tgz", - "integrity": "sha512-oCye5nHhTypzkdLIvF9SaHfr8UAquqCn1KY3j8vsrjeol8yohAdGxIpRPbF1bOLsx33HOAatdfMX1yzsj2cHwg==", + "version": "1.3.4", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.3.4.tgz", + "integrity": "sha512-toYm+Bsyl6VC5wSkfkbbNB6ROv7KY93PEBBL6xyDczaIHasAiv4wPqQ/c4RjoQzipxRD2W5g21cOqQulZ7rHwQ==", "dependencies": { "follow-redirects": "^1.15.0", "form-data": "^4.0.0", @@ -960,9 +960,9 @@ ] }, "node_modules/immutable": { - "version": "4.2.2", - "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.2.2.tgz", - "integrity": "sha512-fTMKDwtbvO5tldky9QZ2fMX7slR0mYpY5nbnFWYp0fOzDhHqhgIw9KoYgxLWsoNTS9ZHGauHj18DTyEw6BK3Og==", + "version": "4.2.4", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.2.4.tgz", + "integrity": "sha512-WDxL3Hheb1JkRN3sQkyujNlL/xRjAo3rJtaU5xeufUauG66JdMr32bLj4gF+vWl84DIA3Zxw7tiAjneYzRRw+w==", "dev": true }, "node_modules/inflight": { @@ -1128,9 +1128,9 @@ } }, "node_modules/minimist": { - "version": "1.2.7", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.7.tgz", - "integrity": "sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==", + "version": "1.2.8", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz", + "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==", "funding": { "url": "https://github.com/sponsors/ljharb" } @@ -1213,9 +1213,9 @@ } }, "node_modules/ol-mapbox-style": { - "version": "9.5.0", - "resolved": "https://registry.npmjs.org/ol-mapbox-style/-/ol-mapbox-style-9.5.0.tgz", - "integrity": "sha512-ArYzeuZ4dOYZ6UnhXK30kNBdouZay/r6LzLsFGnvJ86lxY6ShJu2FtcKCFGCOZoJZYyoLCStHYOHcRrVLDaJ0Q==", + "version": "9.7.0", + "resolved": "https://registry.npmjs.org/ol-mapbox-style/-/ol-mapbox-style-9.7.0.tgz", + "integrity": "sha512-YX3u8FBJHsRHaoGxmd724Mp5WPTuV7wLQW6zZhcihMuInsSdCX1EiZfU+8IAL7jG0pbgl5YgC0aWE/MXJcUXxg==", "dependencies": { "@mapbox/mapbox-gl-style-spec": "^13.23.1", "mapbox-to-css-font": "^2.4.1" @@ -1395,9 +1395,9 @@ } }, "node_modules/rollup": { - "version": "3.12.1", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.12.1.tgz", - "integrity": "sha512-t9elERrz2i4UU9z7AwISj3CQcXP39cWxgRWLdf4Tm6aKm1eYrqHIgjzXBgb67GNY1sZckTFFi0oMozh3/S++Ig==", + "version": "3.17.3", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.17.3.tgz", + "integrity": "sha512-p5LaCXiiOL/wrOkj8djsIDFmyU9ysUxcyW+EKRLHb6TKldJzXpImjcRSR+vgo09DBdofGcOoLOsRyxxG2n5/qQ==", "dev": true, "bin": { "rollup": "dist/bin/rollup" @@ -1416,9 +1416,9 @@ "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==" }, "node_modules/sass": { - "version": "1.58.0", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.58.0.tgz", - "integrity": "sha512-PiMJcP33DdKtZ/1jSjjqVIKihoDc6yWmYr9K/4r3fVVIEDAluD0q7XZiRKrNJcPK3qkLRF/79DND1H5q1LBjgg==", + "version": "1.58.3", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.58.3.tgz", + "integrity": "sha512-Q7RaEtYf6BflYrQ+buPudKR26/lH+10EmO9bBqbmPh/KeLqv8bjpTNqxe71ocONqXq+jYiCbpPUmQMS+JJPk4A==", "dev": true, "dependencies": { "chokidar": ">=3.0.0 <4.0.0", @@ -1566,15 +1566,15 @@ "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==" }, "node_modules/vite": { - "version": "4.0.4", - "resolved": "https://registry.npmjs.org/vite/-/vite-4.0.4.tgz", - "integrity": "sha512-xevPU7M8FU0i/80DMR+YhgrzR5KS2ORy1B4xcX/cXLsvnUWvfHuqMmVU6N0YiJ4JWGRJJsLCgjEzKjG9/GKoSw==", + "version": "4.1.4", + "resolved": "https://registry.npmjs.org/vite/-/vite-4.1.4.tgz", + "integrity": "sha512-3knk/HsbSTKEin43zHu7jTwYWv81f8kgAL99G5NWBcA1LKvtvcVAC4JjBH1arBunO9kQka+1oGbrMKOjk4ZrBg==", "dev": true, "dependencies": { - "esbuild": "^0.16.3", - "postcss": "^8.4.20", + "esbuild": "^0.16.14", + "postcss": "^8.4.21", "resolve": "^1.22.1", - "rollup": "^3.7.0" + "rollup": "^3.10.0" }, "bin": { "vite": "bin/vite.js" diff --git a/src/map.ts b/src/map.ts index 0e4f434..1bb6ed8 100644 --- a/src/map.ts +++ b/src/map.ts @@ -19,17 +19,24 @@ import {router} from "./router"; import {transformExtent} from "ol/proj"; import {defaults as defaultControls} from 'ol/control'; import {InfoButton} from "./info"; +import {MapButton} from "./toggle"; const map = new Map({ // controls: defaultControls().extend([new AreaControl({router: router})]), target: 'map', layers: [ new TileLayer({ - source: new OSM({url: "https://maps.lw1.at/tiles/1.0.0/osm/GLOBAL_MERCATOR/{z}/{x}/{y}.png"}) + source: new OSM({url: "https://maps.lw1.at/tiles/1.0.0/osm/GLOBAL_MERCATOR/{z}/{x}/{y}.png"}), + }), + new TileLayer({ + source: new OSM({ + url: "https://maps.lw1.at/tiles/1.0.0/basemap_orthofoto/GLOBAL_MERCATOR/{z}/{x}/{y}.jpeg", + }), + visible: false }), ], view: viewFromArea(Wien), - controls: defaultControls().extend([new InfoButton({})]) + controls: defaultControls().extend([new InfoButton({}), new MapButton({})]) }); const vectorSource = new VectorSource({ @@ -40,11 +47,6 @@ const vectorSource = new VectorSource({ loadAllData(vectorSource) -const greenLine = new Style({ - fill: new Fill({color: '#00FF00'}), - stroke: new Stroke({color: '#00FF00', width: 2}) -}) - function renderer(coordinates: Coordinate | Coordinate[] | Coordinate[][], state: State): void { const start = Vector2d.fromCoordList(coordinates[0] as Coordinate) const end = Vector2d.fromCoordList(coordinates[1] as Coordinate) @@ -87,13 +89,7 @@ const transFlagStyle = new Style({ scale: 0.05 }) }) -const circleStyle = new Style({ - image: new Circle({ - fill: new Fill({color: "red"}), - stroke: new Stroke({color: "green"}), - radius: 10, - }), -}) + const vectorLineLayer = new VectorLayer({ source: vectorSource, style: function (feature, resolution) { @@ -136,7 +132,6 @@ Object.entries(areas).forEach(([name, area]) => { }) }) - // window.bla = function () { // const view = map.getView() // map.setView( diff --git a/src/style.scss b/src/style.scss index 840a4b4..76dbf93 100644 --- a/src/style.scss +++ b/src/style.scss @@ -123,9 +123,15 @@ p { } } } + .ol-touch .ol-control.info-button a { font-size: 1.5em; } +.ol-control.map-button { + bottom: .5rem; + left: 2.375rem; + +} #overlay { diff --git a/src/toggle.ts b/src/toggle.ts new file mode 100644 index 0000000..5e1959b --- /dev/null +++ b/src/toggle.ts @@ -0,0 +1,38 @@ +import {Control} from "ol/control"; +import {Options} from "ol/control/Control"; +import {createElement} from "./domutils"; +import {router} from "./router"; + +export class MapButton extends Control { + showingOrtho = false + + constructor(opt_options: Options) { + const options = opt_options || {}; + + const button = createElement('button'); + button.innerHTML = 'm'; + + const element = createElement('div'); + element.className = 'map-button ol-unselectable ol-control'; + element.appendChild(button); + router.updatePageLinks() + + super({ + element: element, + target: options.target, + }); + + button.addEventListener('click', this.handleToggle.bind(this), false); + } + + handleToggle() { + const firstLayer = this.getMap()!.getLayers().getArray()[0] + const secondLayer = this.getMap()!.getLayers().getArray()[1] + const thirdLayer = this.getMap()!.getLayers().getArray()[2] + + this.showingOrtho = !this.showingOrtho + firstLayer.setVisible(!this.showingOrtho) + secondLayer.setVisible(this.showingOrtho) + thirdLayer.setOpacity(this.showingOrtho ? 0.5 : 1) + } +}