mirror of
https://github.com/Findus23/RainbowRoad.git
synced 2024-09-19 16:03:52 +02:00
better routing
This commit is contained in:
parent
ce98f31056
commit
012ea9390c
GPG key ID:
54DE4D798D244853
11 changed files with 189 additions and 196 deletions
|
|
@ -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 => {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
]
|
||||
]
|
||||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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 {
|
||||
const metaData: MetaData = {}
|
||||
export interface FeatureProperties {
|
||||
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
|
||||
|
||||
}
|
||||
|
|
|
|||
23
src/loadData.ts
Normal file
23
src/loadData.ts
Normal file
|
|
@ -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))
|
||||
// })
|
||||
|
||||
}
|
||||
63
src/map.ts
63
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 Navigo from "navigo";
|
||||
import {redirect} from "./router";
|
||||
import {areas, buildAttribution, viewFromArea, Wien} from "./areaData";
|
||||
import {FeatureProperties} from "./features";
|
||||
import {areas, viewFromArea, Wien} from "./areaData";
|
||||
import {Crossing} from "../interfaces";
|
||||
import {defaults as defaultControls} from 'ol/control';
|
||||
import {AreaControl} from "./controls";
|
||||
import {loadAllData} from "./loadData";
|
||||
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 => {
|
||||
vectorSource.setAttributions(buildAttribution(importdata.default))
|
||||
})
|
||||
loadAllData(vectorSource)
|
||||
|
||||
})
|
||||
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())
|
||||
if (!featureID || featureID > 10000) {
|
||||
const featureProperties = state.feature.getProperties() as FeatureProperties
|
||||
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
|
||||
if (!featureID || featureID < 0) {
|
||||
const featureProperties = feature.getProperties() as FeatureProperties
|
||||
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);
|
||||
})
|
||||
|
|
|
|||
115
src/popups.ts
115
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 content = document.getElementById('popup-content')!;
|
||||
const closer = document.getElementById('popup-closer')!;
|
||||
const container = document.getElementById('popup')!;
|
||||
const content = document.getElementById('popup-content')!;
|
||||
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);
|
||||
closer.blur();
|
||||
router.navigate("/")
|
||||
return false;
|
||||
};
|
||||
map.on('singleclick', event => {
|
||||
map.forEachFeatureAtPixel(event.pixel, feature => {
|
||||
const coordinate = event.coordinate;
|
||||
let id = Number(feature.getId())
|
||||
if (!id) {
|
||||
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);
|
||||
|
||||
const crossing: Crossing = feature.getProperties().crossing
|
||||
router.navigate("/flag/" + feature.getId())
|
||||
}, {hitTolerance: 5})
|
||||
if (!map.hasFeatureAtPixel(event.pixel, {hitTolerance: 5})) {
|
||||
overlay.setPosition(undefined);
|
||||
closer.blur();
|
||||
router.navigate("/")
|
||||
|
||||
}
|
||||
});
|
||||
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()
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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, () => {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ export default defineConfig({
|
|||
// splitVendorChunkPlugin(),
|
||||
// visualizer(),
|
||||
],
|
||||
base: "",
|
||||
build: {
|
||||
sourcemap: true,
|
||||
rollupOptions: {
|
||||
|
|
|
|||
Loading…
Reference in a new issue