better routing

commands/fetch.ts

@@ -53,6 +53,10 @@ async function runfetch(filename: string) {
 
         if (typeof d.geo !== "undefined") {
             d.geo.length = lineLengthInM(d.geo.coords[0], d.geo.coords[1])
+            if (d.id < 100) {
+                const max = 2 ** 32
+                d.id = Math.floor(Math.random() * max);
+            }
             continue
         }
         const geosource = d.geosource
@@ -77,6 +81,8 @@ async function runfetch(filename: string) {
         // crossings[i] = d
         fs.writeFileSync(filename, JSON.stringify(data, null, 2))
     }
+    fs.writeFileSync(filename, JSON.stringify(data, null, 2))
+
 }
 
 fs.readdirSync("../data/").forEach(file => {

data/Oberösterreich.json

@@ -1,6 +1,6 @@
 [
   {
-    "id": 1,
+    "id": 2160025690,
     "name": "Nordico",
     "type": "prideFlag",
     "sources": [
@@ -29,7 +29,7 @@
     }
   },
   {
-    "id": 2,
+    "id": 2057144734,
     "name": "Mozartkreuzung 1/2",
     "type": "prideFlag",
     "set": "Mozartkreuzung",
@@ -59,7 +59,7 @@
     }
   },
   {
-    "id": 3,
+    "id": 712336288,
     "name": "Mozartkreuzung 2/2",
     "type": "prideFlag",
     "set": "Mozartkreuzung",
@@ -89,7 +89,7 @@
     }
   },
   {
-    "id": 4,
+    "id": 3393664309,
     "name": "Grieskirchen",
     "type": "prideFlag",
     "sources": [
@@ -129,7 +129,7 @@
     }
   },
   {
-    "id": 5,
+    "id": 762490778,
     "name": "Bad Ischl",
     "type": "prideFlag",
     "sources": [
@@ -166,4 +166,4 @@
       "length": 9.36
     }
   }
-]
+]

data/Wien.json

@@ -1,6 +1,6 @@
 [
   {
-    "id": 1,
+    "id": 1740508417,
     "name": "Praterstern",
     "sources": [
       {
@@ -34,7 +34,7 @@
     }
   },
   {
-    "id": 2,
+    "id": 1650233937,
     "name": "Spitalgasse/Lazarettgasse",
     "bezirk": 9,
     "type": "transFlag",
@@ -72,7 +72,7 @@
     }
   },
   {
-    "id": 3,
+    "id": 83431426,
     "name": "Gumpendorfer Straße/Kaunitzgasse",
     "bezirk": 6,
     "type": "prideFlag",
@@ -107,7 +107,7 @@
     }
   },
   {
-    "id": 4,
+    "id": 4288760626,
     "name": "Schönbrunner Straße/Pilgramgasse",
     "bezirk": 5,
     "type": "prideFlag",
@@ -142,7 +142,7 @@
     }
   },
   {
-    "id": 5,
+    "id": 2780254397,
     "name": "Burgtheater/Rathausplatz",
     "bezirk": 1,
     "type": "prideFlag",
@@ -178,7 +178,7 @@
     }
   },
   {
-    "id": 6,
+    "id": 2774137854,
     "name": "Meidlinger Markt",
     "bezirk": 12,
     "type": "prideFlag",
@@ -217,7 +217,7 @@
     }
   },
   {
-    "id": 7,
+    "id": 1063544959,
     "name": "Laaer-Berg-Straße",
     "bezirk": 10,
     "type": "prideFlag",
@@ -262,7 +262,7 @@
     }
   },
   {
-    "id": 8,
+    "id": 1521482113,
     "name": "Währinger Straße/Kutschkermarkt",
     "bezirk": 18,
     "type": "prideFlag",
@@ -301,7 +301,7 @@
     }
   },
   {
-    "id": 9,
+    "id": 3958225692,
     "name": "Landstraßer Hauptstraße",
     "bezirk": 3,
     "type": "prideFlag",
@@ -332,7 +332,7 @@
     }
   },
   {
-    "id": 10,
+    "id": 1346655170,
     "name": "Operngasse/Schleifmühlgasse",
     "bezirk": 4,
     "type": "prideFlag",
@@ -371,7 +371,7 @@
     }
   },
   {
-    "id": 11,
+    "id": 862021905,
     "name": "Schönbrunner Straße/Ramperstorffergasse",
     "bezirk": 5,
     "type": "transFlag",
@@ -406,7 +406,7 @@
     }
   },
   {
-    "id": 12,
+    "id": 151167188,
     "name": "Kennedybrücke/Hietzinger Hauptstraße",
     "bezirk": 13,
     "type": "prideFlag",
@@ -440,7 +440,7 @@
     }
   },
   {
-    "id": 13,
+    "id": 1238371047,
     "name": "Kennedybrücke/Hadikgasse",
     "bezirk": 14,
     "type": "prideFlag",
@@ -473,7 +473,7 @@
     }
   },
   {
-    "id": 14,
+    "id": 232762522,
     "name": "Simmeringer Platz",
     "bezirk": 11,
     "type": "prideFlag",
@@ -507,7 +507,7 @@
     }
   },
   {
-    "id": 15,
+    "id": 3922122587,
     "name": "Mauer Hauptplatz",
     "bezirk": 23,
     "type": "prideFlag",
@@ -541,7 +541,7 @@
     }
   },
   {
-    "id": 16,
+    "id": 2105989939,
     "name": "Elterleinplatz/Kalvarienberggasse",
     "bezirk": 17,
     "type": "prideFlag",
@@ -575,7 +575,7 @@
     }
   },
   {
-    "id": 17,
+    "id": 41666860,
     "name": "Rennweg",
     "bezirk": 3,
     "type": "prideFlag",
@@ -615,7 +615,7 @@
     }
   },
   {
-    "id": 18,
+    "id": 3932188971,
     "name": "Museumsquartier",
     "bezirk": 1,
     "type": "prideFlag",
@@ -651,7 +651,7 @@
     }
   },
   {
-    "id": 19,
+    "id": 1010081192,
     "name": "Pilgrambrücke/Linke Wienzeile",
     "bezirk": 6,
     "type": "transFlag",
@@ -686,7 +686,7 @@
     }
   },
   {
-    "id": 20,
+    "id": 3012718795,
     "name": "Floridsdorfer Spitz 1/3",
     "bezirk": 21,
     "type": "prideFlag",
@@ -721,7 +721,7 @@
     }
   },
   {
-    "id": 21,
+    "id": 999941480,
     "name": "Floridsdorfer Spitz 2/3",
     "bezirk": 21,
     "type": "prideFlag",
@@ -756,7 +756,7 @@
     }
   },
   {
-    "id": 22,
+    "id": 1502936995,
     "name": "Floridsdorfer Spitz 3/3",
     "bezirk": 21,
     "type": "prideFlag",
@@ -796,7 +796,7 @@
     }
   },
   {
-    "id": 23,
+    "id": 4228588348,
     "name": "Josefstädter Straße/Albertgasse 1/3",
     "bezirk": 8,
     "type": "prideFlag",
@@ -827,7 +827,7 @@
     }
   },
   {
-    "id": 24,
+    "id": 695015193,
     "name": "Josefstädter Straße/Albertgasse 2/3",
     "bezirk": 8,
     "type": "transFlag",
@@ -859,7 +859,7 @@
     }
   },
   {
-    "id": 25,
+    "id": 2982464201,
     "name": "Josefstädter Straße/Albertgasse 3/3",
     "bezirk": 8,
     "type": "transFlag",
@@ -899,7 +899,7 @@
     }
   },
   {
-    "id": 26,
+    "id": 1928064980,
     "name": "Äußere Mariahilfer Straße",
     "bezirk": 15,
     "type": "prideFlag",
@@ -935,7 +935,7 @@
     }
   },
   {
-    "id": 27,
+    "id": 3129325299,
     "name": "Mariahilfer Straße/Neubaugasse",
     "bezirk": 6,
     "type": "prideFlag",
@@ -975,7 +975,7 @@
     }
   },
   {
-    "id": 28,
+    "id": 4181297250,
     "name": "Thaliastraße/Brunnenstraße 1/3",
     "bezirk": 16,
     "type": "prideFlag",
@@ -1013,7 +1013,7 @@
     }
   },
   {
-    "id": 29,
+    "id": 3599201578,
     "name": "Thaliastraße/Brunnenstraße 2/3",
     "bezirk": 16,
     "type": "prideFlag",
@@ -1048,7 +1048,7 @@
     }
   },
   {
-    "id": 30,
+    "id": 3997135747,
     "name": "Thaliastraße/Brunnenstraße 3/3",
     "bezirk": 16,
     "type": "prideFlag",
@@ -1085,7 +1085,7 @@
     }
   },
   {
-    "id": 31,
+    "id": 75101305,
     "name": "Peter-Jordan-Straße/Dänenstraße 1/4",
     "bezirk": 19,
     "type": "prideFlag",
@@ -1121,7 +1121,7 @@
     }
   },
   {
-    "id": 32,
+    "id": 376409592,
     "name": "Peter-Jordan-Straße/Dänenstraße 2/4",
     "bezirk": 19,
     "type": "prideFlag",
@@ -1152,7 +1152,7 @@
     }
   },
   {
-    "id": 33,
+    "id": 2946118523,
     "name": "Peter-Jordan-Straße/Dänenstraße 3/4",
     "bezirk": 19,
     "type": "prideFlag",
@@ -1183,7 +1183,7 @@
     }
   },
   {
-    "id": 34,
+    "id": 2260634750,
     "name": "Peter-Jordan-Straße/Dänenstraße 4/4",
     "bezirk": 19,
     "type": "prideFlag",
@@ -1214,7 +1214,7 @@
     }
   },
   {
-    "id": 35,
+    "id": 388184700,
     "name": "Billrothstraße/Gymnasiumstraße",
     "bezirk": 19,
     "type": "prideFlag",
@@ -1244,7 +1244,7 @@
     }
   },
   {
-    "id": 36,
+    "id": 2484638731,
     "name": "Rauscherstraße/Wallensteinstraße",
     "bezirk": 20,
     "type": "prideFlag",
@@ -1281,7 +1281,7 @@
     }
   },
   {
-    "id": 37,
+    "id": 1587033531,
     "name": "Winarskystraße/Dresdner Straße",
     "bezirk": 20,
     "type": "prideFlag",
@@ -1311,7 +1311,7 @@
     }
   },
   {
-    "id": 38,
+    "id": 1222134532,
     "name": "Pilgramgasse/Margaretenstraße",
     "bezirk": 5,
     "type": "prideFlag",

src/areaData.ts

@@ -35,7 +35,7 @@ export function viewFromArea(area: Area): View {
     return new View({
         center: fromLonLat(area.center),
         zoom: area.zoom,
-        extent: transformExtent(area.extent, 'EPSG:4326', 'EPSG:3857'),
+        // extent: transformExtent(area.extent, 'EPSG:4326', 'EPSG:3857'),
         constrainOnlyCenter: true
     })
 }

src/controls.ts

@@ -1,56 +0,0 @@
-import {Control} from "ol/control"
-import {Options} from "ol/control/Control"
-import Navigo from "navigo";
-import {router} from "./map";
-
-interface CustomOptions extends Options {
-    router: Navigo
-}
-
-export class AreaControl extends Control {
-    private textbox: HTMLDivElement
-
-    constructor(opt_options: CustomOptions) {
-        const options = opt_options || {}
-
-        const button = document.createElement('button')
-        button.innerText = 'c'
-
-        const element = document.createElement('div')
-        element.id = "city-selector"
-        element.className = 'ol-unselectable ol-control'
-        element.appendChild(button)
-
-        const textbox = document.createElement('div')
-
-        textbox.classList.add("textbox")
-        textbox.classList.add("ol-control")
-
-        const test = ["Wien", "Oberösterreich"]
-        test.forEach(n => {
-            const a = document.createElement('a')
-            a.href = "/" + encodeURIComponent(n)
-            a.innerText = n
-            a.dataset.navigo = ""
-            textbox.appendChild(a)
-        })
-        // textbox.style.display = "none"
-        element.appendChild(textbox)
-        router.updatePageLinks()
-
-        super({
-            element: element,
-            target: options.target,
-        });
-        this.textbox = textbox
-        button.addEventListener('click', this.handleClick.bind(this), false)
-    }
-
-    handleClick() {
-        if (this.textbox.style.display === "block") {
-            this.textbox.style.display = "none"
-        } else {
-            this.textbox.style.display = "block"
-        }
-    }
-}

src/features.ts

@@ -5,10 +5,14 @@ import {Feature} from "ol";
 import {LineString, Point} from "ol/geom";
 import {averageCoords} from "../utils/geo";
 
-export type MetaData = { [id: number]: Crossing }
+export type FeatureType = "line" | "dot"
 
-export function loadData(data: Crossing[], vectorSource: VectorSource): MetaData {
+export interface FeatureProperties {
-    const metaData: MetaData = {}
+    crossing: Crossing
+    type: FeatureType
+}
+
+export function loadData(data: Crossing[], vectorSource: VectorSource): void {
     console.info(data)
     data.sort((a, b) => {
         /*
@@ -35,12 +39,12 @@ export function loadData(data: Crossing[], vectorSource: VectorSource): MetaData
         const featureDot = new Feature({
             geometry: new Point(averageCoords(points))
         });
+
+        featureLine.setProperties({"crossing": c, "type": "line"} as FeatureProperties)
+        featureDot.setProperties({"crossing": c, "type": "dot"} as FeatureProperties)
         featureLine.setId(c.id)
         featureDot.setId(c.id + 10000)
-        metaData[c.id] = c
         vectorSource.addFeature(featureLine);
         vectorSource.addFeature(featureDot);
     })
-    return metaData
-
 }

src/loadData.ts

@@ -0,0 +1,23 @@
+import {Crossing} from "../interfaces";
+import {loadData} from "./features";
+import VectorSource from "ol/source/Vector";
+
+export function loadAllData(vectorSource: VectorSource): void {
+    // @ts-ignore
+    import("../data/Wien.json?inline").then((data) => {
+        loadData(data.default as unknown as Crossing[], vectorSource)
+    })
+
+// import("../data/Wien.json?url").then(importdata => {
+//     vectorSource.setAttributions(buildAttribution(importdata.default))
+// })
+
+// @ts-ignore
+    import("../data/Oberösterreich.json?inline").then((data) => {
+        loadData(data.default as unknown as Crossing[], vectorSource)
+    })
+// import("../data/Oberösterreich.json?url").then(importdata => {
+//     vectorSource.setAttributions(buildAttribution(importdata.default))
+// })
+
+}

src/map.ts

@@ -9,17 +9,15 @@ import {Line, Vector2d} from "./vectorUtils";
 import {drawZebraCrossing, zebraPatterns} from "./zebraUtils";
 import prideFlag from "../assets/prideflag.svg"
 import transFlag from "../assets/transflag.svg"
-import {loadData, MetaData} from "./features";
+import {FeatureProperties} from "./features";
-import Navigo from "navigo";
+import {areas, viewFromArea, Wien} from "./areaData";
-import {redirect} from "./router";
-import {areas, buildAttribution, viewFromArea, Wien} from "./areaData";
 import {Crossing} from "../interfaces";
-import {defaults as defaultControls} from 'ol/control';
+import {loadAllData} from "./loadData";
-import {AreaControl} from "./controls";
+import "./router"
+import {router} from "./router";
 
-export const router = new Navigo("/")
 const map = new Map({
-    controls: defaultControls().extend([new AreaControl({router: router})]),
+    // controls: defaultControls().extend([new AreaControl({router: router})]),
     target: 'map',
     layers: [
         new TileLayer({
@@ -29,33 +27,9 @@ const map = new Map({
     view: viewFromArea(Wien)
 });
 const vectorSource = new VectorSource();
-let metaData: MetaData
-router.on("/Wien", () => {
-    map.setView(viewFromArea(Wien))
-    // @ts-ignore
-    import("../data/Wien.json?inline").then((data) => {
-        metaData = loadData(data.default as unknown as Crossing[], vectorSource)
-    })
 
-    import("../data/Wien.json?url").then(importdata => {
+loadAllData(vectorSource)
-        vectorSource.setAttributions(buildAttribution(importdata.default))
-    })
 
-})
-router.on("/Ober%C3%B6sterreich", () => {
-    map.setView(viewFromArea(areas.OOE))
-
-    // @ts-ignore
-    import("../data/Oberösterreich.json?inline").then((data) => {
-        metaData = loadData(data.default as unknown as Crossing[], vectorSource)
-    })
-    import("../data/Oberösterreich.json?url").then(importdata => {
-        vectorSource.setAttributions(buildAttribution(importdata.default))
-    })
-
-})
-redirect(router, "/", "/Wien")
-router.resolve()
 const greenLine = new Style({
     fill: new Fill({color: '#00FF00'}),
     stroke: new Stroke({color: '#00FF00', width: 2})
@@ -67,11 +41,11 @@ function renderer(coordinates: Coordinate | Coordinate[] | Coordinate[][], state
     const line = new Line(start, end)
     // console.log(line.vec.length())
     const ctx = state.context;
-    const featureID = Number(state.feature.getId())
+    const featureProperties = state.feature.getProperties() as FeatureProperties
-    if (!featureID || featureID > 10000) {
+    if (featureProperties.type != "line") {
         return
     }
-    const crossing = metaData[featureID]
+    const crossing: Crossing = featureProperties.crossing
     let numStripes = crossing.geo!.length / 0.5
     if (state.resolution > 0.3) {
         numStripes /= 2
@@ -114,12 +88,13 @@ const vectorLineLayer = new VectorLayer({
         if (zoom > 17) {
             return crossingsStyle
         }
-        const featureID = Number(feature.getId()) - 10000
+        const featureProperties = feature.getProperties() as FeatureProperties
-        if (!featureID || featureID < 0) {
+        const crossing = featureProperties.crossing
+        if (featureProperties.type != "dot") {
             return
         }
-        const crossing = metaData[featureID]
+
-        if (typeof crossing==="undefined") {
+        if (typeof crossing === "undefined") {
             return
         }
         switch (crossing.type) {
@@ -132,6 +107,12 @@ const vectorLineLayer = new VectorLayer({
 });
 map.addLayer(vectorLineLayer);
 
+Object.entries(areas).forEach(([name, area]) => {
+    router.on("/" + encodeURIComponent(area.name), () => {
+        map.setView(viewFromArea(area))
+    })
+})
+
 
 // window.bla = function () {
 //     const view = map.getView()
@@ -146,5 +127,5 @@ map.addLayer(vectorLineLayer);
 // }
 
 import("./popups").then(popups => {
-    popups.initPopups(map, metaData);
+    popups.initPopups(map, vectorSource);
 })

src/popups.ts

@@ -1,67 +1,88 @@
-import {Overlay} from "ol";
+import {Feature, Overlay} from "ol";
 import {createDateWithDisclaimer, displaySources} from "./text";
 import type Map from "ol/Map";
 import {Crossing} from "../interfaces";
 import {createElement} from "./domutils";
 import "hint.css/hint.base.css"
+import {router} from "./router";
+import VectorSource from "ol/source/Vector";
+import {FeatureProperties} from "./features";
+import {Point} from "ol/geom";
 
-export function initPopups(map: Map, metaData: { [id: number]: Crossing }) {
+const container = document.getElementById('popup')!;
-    const container = document.getElementById('popup')!;
+const content = document.getElementById('popup-content')!;
-    const content = document.getElementById('popup-content')!;
+const closer = document.getElementById('popup-closer')!;
-    const closer = document.getElementById('popup-closer')!;
+const overlay = new Overlay({
+    element: container,
+    autoPan: {
+        animation: {
+            duration: 250,
+        }
+    },
+});
+
+export function initPopups(map: Map, vectorSource: VectorSource) {
 
-    const overlay = new Overlay({
-        element: container,
-        autoPan: {
-            animation:{
-                duration:250,
-            }
-        },
-    });
     map.addOverlay(overlay);
 
     closer.onclick = function () {
-        overlay.setPosition(undefined);
+        router.navigate("/")
-        closer.blur();
         return false;
     };
     map.on('singleclick', event => {
         map.forEachFeatureAtPixel(event.pixel, feature => {
             const coordinate = event.coordinate;
-            let id = Number(feature.getId())
+            const crossing: Crossing = feature.getProperties().crossing
-            if (!id) {
+            router.navigate("/flag/" + feature.getId())
-                return
-            }
-            if (id > 10000) {
-                id -= 10000
-            }
-            const crossing = metaData[id]
-
-            content.innerHTML = "";
-            const p = createElement("p")
-            p.innerText = crossing.name
-            p.classList.add("name")
-            content.appendChild(p)
-
-            const dateWithDisclaimer = createDateWithDisclaimer(crossing.sources)
-            content.appendChild(dateWithDisclaimer)
-
-            if (crossing.comment) {
-                const p = createElement("p")
-                const small = createElement("small")
-                small.innerText = crossing.comment
-                p.appendChild(small)
-                content.appendChild(p)
-            }
-            const sourcesBlock = displaySources(crossing.sources)
-            content.appendChild(createElement("hr"))
-            content.appendChild(sourcesBlock)
-            overlay.setPosition(coordinate);
-
         }, {hitTolerance: 5})
         if (!map.hasFeatureAtPixel(event.pixel, {hitTolerance: 5})) {
-            overlay.setPosition(undefined);
+            router.navigate("/")
-            closer.blur();
+
         }
     });
+    router.on("/flag/:id", (match) => {
+        const id = match?.data?.id
+        if (!id) {
+            return
+        }
+        console.log("routing")
+        console.info(id)
+
+        const feature = vectorSource.getFeatureById(id) as Feature<Point>
+        if (!feature) {
+            return
+        }
+        console.log(feature.getProperties())
+
+        const featureProperties = feature.getProperties() as FeatureProperties
+        const crossing = featureProperties.crossing
+
+        content.innerHTML = "";
+        const p = createElement("p")
+        p.innerText = crossing.name
+        p.classList.add("name")
+        content.appendChild(p)
+
+        const dateWithDisclaimer = createDateWithDisclaimer(crossing.sources)
+        content.appendChild(dateWithDisclaimer)
+
+        if (crossing.comment) {
+            const p = createElement("p")
+            const small = createElement("small")
+            small.innerText = crossing.comment
+            p.appendChild(small)
+            content.appendChild(p)
+        }
+        const sourcesBlock = displaySources(crossing.sources)
+        content.appendChild(createElement("hr"))
+        content.appendChild(sourcesBlock)
+        overlay.setPosition(feature.getGeometry()?.getCoordinates());
+
+    })
+    router.on("/", () => {
+        overlay.setPosition(undefined);
+        closer.blur();
+    })
+    router.resolve()
+
 }

src/router.ts

@@ -1,4 +1,19 @@
 import Navigo, {Route} from "navigo";
+import {areas, viewFromArea, Wien} from "./areaData";
+export const router = new Navigo("/")
+
+// router.on("/Wien", () => {
+//     map.setView(viewFromArea(Wien))
+//
+// })
+// router.on("/Ober%C3%B6sterreich", () => {
+//     map.setView(viewFromArea(areas.OOE))
+//
+//
+// })
+
+// redirect(router, "/", "/Wien")
+
 
 export function redirect(router:Navigo,from:string,to:string){
     router.on(from, () => {

vite.config.js

@@ -5,7 +5,6 @@ export default defineConfig({
         // splitVendorChunkPlugin(),
         // visualizer(),
     ],
-    base: "",
     build: {
         sourcemap: true,
         rollupOptions: {