add aerial view

package-lock.json

@@ -482,9 +482,9 @@
       "dev": true
     },
     "node_modules/@types/node": {
-      "version": "18.11.18",
+      "version": "18.14.2",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.18.tgz",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.14.2.tgz",
-      "integrity": "sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA=="
+      "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",
+      "version": "1.3.4",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.3.4.tgz",
-      "integrity": "sha512-oCye5nHhTypzkdLIvF9SaHfr8UAquqCn1KY3j8vsrjeol8yohAdGxIpRPbF1bOLsx33HOAatdfMX1yzsj2cHwg==",
+      "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",
+      "version": "4.2.4",
-      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.2.2.tgz",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.2.4.tgz",
-      "integrity": "sha512-fTMKDwtbvO5tldky9QZ2fMX7slR0mYpY5nbnFWYp0fOzDhHqhgIw9KoYgxLWsoNTS9ZHGauHj18DTyEw6BK3Og==",
+      "integrity": "sha512-WDxL3Hheb1JkRN3sQkyujNlL/xRjAo3rJtaU5xeufUauG66JdMr32bLj4gF+vWl84DIA3Zxw7tiAjneYzRRw+w==",
       "dev": true
     },
     "node_modules/inflight": {
@@ -1128,9 +1128,9 @@
       }
     },
     "node_modules/minimist": {
-      "version": "1.2.7",
+      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.7.tgz",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
-      "integrity": "sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -1213,9 +1213,9 @@
       }
     },
     "node_modules/ol-mapbox-style": {
-      "version": "9.5.0",
+      "version": "9.7.0",
-      "resolved": "https://registry.npmjs.org/ol-mapbox-style/-/ol-mapbox-style-9.5.0.tgz",
+      "resolved": "https://registry.npmjs.org/ol-mapbox-style/-/ol-mapbox-style-9.7.0.tgz",
-      "integrity": "sha512-ArYzeuZ4dOYZ6UnhXK30kNBdouZay/r6LzLsFGnvJ86lxY6ShJu2FtcKCFGCOZoJZYyoLCStHYOHcRrVLDaJ0Q==",
+      "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",
+      "version": "3.17.3",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.12.1.tgz",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.17.3.tgz",
-      "integrity": "sha512-t9elERrz2i4UU9z7AwISj3CQcXP39cWxgRWLdf4Tm6aKm1eYrqHIgjzXBgb67GNY1sZckTFFi0oMozh3/S++Ig==",
+      "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",
+      "version": "1.58.3",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.58.0.tgz",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.58.3.tgz",
-      "integrity": "sha512-PiMJcP33DdKtZ/1jSjjqVIKihoDc6yWmYr9K/4r3fVVIEDAluD0q7XZiRKrNJcPK3qkLRF/79DND1H5q1LBjgg==",
+      "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",
+      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-4.0.4.tgz",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-4.1.4.tgz",
-      "integrity": "sha512-xevPU7M8FU0i/80DMR+YhgrzR5KS2ORy1B4xcX/cXLsvnUWvfHuqMmVU6N0YiJ4JWGRJJsLCgjEzKjG9/GKoSw==",
+      "integrity": "sha512-3knk/HsbSTKEin43zHu7jTwYWv81f8kgAL99G5NWBcA1LKvtvcVAC4JjBH1arBunO9kQka+1oGbrMKOjk4ZrBg==",
       "dev": true,
       "dependencies": {
-        "esbuild": "^0.16.3",
+        "esbuild": "^0.16.14",
-        "postcss": "^8.4.20",
+        "postcss": "^8.4.21",
         "resolve": "^1.22.1",
-        "rollup": "^3.7.0"
+        "rollup": "^3.10.0"
       },
       "bin": {
         "vite": "bin/vite.js"

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(

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 {

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)
+    }
+}