TFDi_MD-11_QA/NavDataExplorer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

map style

Browse Source
This commit is contained in:
Kilian Hofmann
2025-07-14 05:02:22 +02:00
parent af7ac30926
commit 0d797519cb
21 changed files with 174 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files
browser/src/App.tsx
+26 -11
View File
@@ -3,6 +3,7 @@ import Parser from "./parser/parser";
import { createRef, useEffect, useState } from "react";
import hash from "object-hash";
import Leaflet from "leaflet";
import "leaflet-svg-shape-markers";
import L from "leaflet";
const parser = await Parser.instance();
@@ -11,7 +12,7 @@ const terminals = [10394, 10395, 10475, 10480, 10482, 10485, 10653];
function App() {
const [selectedTerminal, setSelectedTerminal] = useState(terminals[0]);
const [procedure, setProcedure] = useState<string>();
const [procedure, setProcedure] = useState<object>();
const mapRef = createRef<Leaflet.Map>();
const layerRef = createRef<Leaflet.GeoJSON>();
@@ -49,26 +50,40 @@ function App() {
<GeoJSON
key={hash(procedure ?? "") + "lines"}
data={procedure}
style={{
color: "#00ffff",
style={({ properties }) => ({
color: "#ff00ff",
stroke: true,
weight: 5,
opacity: 1,
}}
dashArray: properties.isManual ? "20, 20" : undefined,
})}
filter={(feature) => feature.geometry.type !== "Point"}
ref={layerRef}
/>
<GeoJSON
key={hash(procedure ?? "") + "points"}
data={procedure}
style={(feature) => ({
color: feature.properties["marker-color"],
stroke: false,
style={{
color: "black",
fill: true,
fillOpacity: 1,
})}
pointToLayer={(_, latlng) => {
return L.circleMarker(latlng, { radius: 5 });
fillColor: "transparent",
stroke: true,
weight: 3,
}}
pointToLayer={({ properties }, latlng) => {
if (properties.isFlyOver)
return L.shapeMarker(latlng, {
shape: "triangle",
radius: 6,
});
if (properties.isIntersection)
return L.circleMarker(latlng, { radius: 6 });
return L.shapeMarker(latlng, {
shape: "star-4",
radius: 10,
rotation: 45,
});
}}
onEachFeature={({ geometry, properties }, layer) => {
if (geometry.type === "Point") {
browser/src/parser/node.ts
+4 -3
View File
@@ -2,12 +2,13 @@ import Parser from "./parser.ts";
// mutate fetch to be local
// @ts-ignore
// @ts-expect-error Global override
// eslint-disable-next-line no-global-assign
fetch = async (path: string) => {
// @ts-ignore
const fs = await import("fs");
return {
json: () => JSON.parse(fs.readFileSync(`public/${path}`)),
json: () =>
JSON.parse(fs.readFileSync(`public/${path}`) as unknown as string),
};
};
browser/src/parser/parser.ts
+7 -7
View File
@@ -35,9 +35,9 @@ class Parser {
public static instance = async () => {
if (!Parser._instance) {
const waypoints = await (await fetch("navdata/Waypoints.json")).json();
const runways = await (await fetch("navdata/Runways.json")).json();
const terminals = await (await fetch("navdata/Terminals.json")).json();
const waypoints = await (await fetch("NavData/Waypoints.json")).json();
const runways = await (await fetch("NavData/Runways.json")).json();
const terminals = await (await fetch("NavData/Terminals.json")).json();
Parser._instance = new Parser(waypoints, runways, terminals);
}
@@ -71,12 +71,12 @@ class Parser {
if (!runway) throw new Error("Procedure links to non existent Runway");
// Load procedure
const procedure = (await (
await fetch(`navdata/TermID_${terminalID}.json`)
await fetch(`NavData/TermID_${terminalID}.json`)
).json()) as TerminalEntry[];
// Output variables
const navFixes: NavFix[] = [];
const lineSegments: { line: LineSegment[] }[] = [];
const lineSegments: { line: LineSegment[]; [x: string]: unknown }[] = [];
// Initials
navFixes.push({
@@ -167,7 +167,7 @@ class Parser {
);
if (fixToAdd) navFixes.push(fixToAdd);
if (lineToAdd) {
lineSegments.push({ line: lineToAdd });
lineSegments.push({ line: lineToAdd, isManual: true });
updateLastCourse(lineToAdd);
}
break;
@@ -256,7 +256,7 @@ class Parser {
);
if (fixToAdd) navFixes.push(fixToAdd);
if (lineToAdd) {
lineSegments.push({ line: lineToAdd });
lineSegments.push({ line: lineToAdd, isManual: true });
updateLastCourse(lineToAdd);
}
break;
browser/src/parser/terminators/AF.ts
-1
View File
@@ -11,7 +11,6 @@ export const TerminatorsAF = (
latitude: leg.WptLat,
longitude: leg.WptLon,
name: waypoint?.Ident ?? undefined,
"marker-color": leg.IsFlyOver ? "#ff0000" : undefined,
isFlyOver: leg.IsFlyOver,
altitude: leg.Alt ? leg.Alt.parseAltitude() : previousFix.altitude,
speed: leg.SpeedLimit
browser/src/parser/terminators/CF.ts
-1
View File
@@ -11,7 +11,6 @@ export const TerminatorsCF = (
latitude: leg.WptLat,
longitude: leg.WptLon,
name: waypoint?.Ident ?? undefined,
"marker-color": leg.IsFlyOver ? "#ff0000" : undefined,
isFlyOver: leg.IsFlyOver,
altitude: leg.Alt ? leg.Alt.parseAltitude() : previousFix.altitude,
speed: leg.SpeedLimit
browser/src/parser/terminators/CI.ts
-1
View File
@@ -19,7 +19,6 @@ export const TerminatorsCI = (
nextFix,
crs
)!,
"marker-color": leg.IsFlyOver ? "#ff0000" : undefined,
isFlyOver: leg.IsFlyOver,
altitude: leg.Alt ? leg.Alt.parseAltitude() : previousFix.altitude,
speed: leg.SpeedLimit
browser/src/parser/terminators/CR.ts
-1
View File
@@ -16,7 +16,6 @@ export const TerminatorsCR = (
{ latitude: leg.NavLat, longitude: leg.NavLon },
leg.NavBear.toTrue({ latitude: leg.NavLat, longitude: leg.NavLon })
)!,
"marker-color": leg.IsFlyOver ? "#ff0000" : undefined,
isFlyOver: leg.IsFlyOver,
altitude: leg.Alt ? leg.Alt.parseAltitude() : previousFix.altitude,
speed: leg.SpeedLimit
browser/src/parser/terminators/RF.ts
-1
View File
@@ -13,7 +13,6 @@ export const TerminatorsRF = (
latitude: leg.WptLat,
longitude: leg.WptLon,
name: waypoint?.Ident ?? undefined,
"marker-color": leg.IsFlyOver ? "#ff0000" : undefined,
isFlyOver: leg.IsFlyOver,
altitude: leg.Alt ? leg.Alt.parseAltitude() : previousFix.altitude,
speed: leg.SpeedLimit
browser/src/parser/terminators/TF.ts
-1
View File
@@ -12,7 +12,6 @@ export const TerminatorsTF = (
latitude: leg.WptLat,
longitude: leg.WptLon,
name: waypoint?.Ident ?? undefined,
"marker-color": leg.IsFlyOver ? "#ff0000" : undefined,
isFlyOver: leg.IsFlyOver,
altitude: leg.Alt ? leg.Alt.parseAltitude() : previousFix.altitude,
speed: leg.SpeedLimit
browser/src/parser/terminators/VA.ts
-1
View File
@@ -19,7 +19,6 @@ export const TerminatorsVA = (
leg.Course.toTrue(previousFix)
),
name: leg.Alt,
"marker-color": "#ff0000",
isFlyOver: true,
altitude: leg.Alt.parseAltitude(),
speed: leg.SpeedLimit
browser/src/parser/terminators/VD.ts
-1
View File
@@ -15,7 +15,6 @@ export const TerminatorsVD = (
leg.Course.toTrue(previousFix)
),
name: leg.Distance.toString(),
"marker-color": "#ff0000",
isFlyOver: true,
altitude: leg.Alt ? leg.Alt.parseAltitude() : previousFix.altitude,
speed: leg.SpeedLimit
browser/src/parser/terminators/VI.ts
-1
View File
@@ -20,7 +20,6 @@ export const TerminatorsVI = (
nextFix,
crs
)!,
"marker-color": leg.IsFlyOver ? "#ff0000" : undefined,
isFlyOver: leg.IsFlyOver,
altitude: leg.Alt ? leg.Alt.parseAltitude() : previousFix.altitude,
speed: leg.SpeedLimit
browser/src/parser/utils/computeIntersection.ts
+7 -1
View File
@@ -85,5 +85,11 @@ export const computeIntersection = (
const lat = φ3.toDegrees();
const lon = λ3.toDegrees();
return { ...p1, latitude: lat, longitude: lon, name: "INTC" };
return {
...p1,
latitude: lat,
longitude: lon,
name: "INTC",
isIntersection: true,
};
};
browser/src/types/geojson.d.ts
Vendored
+1 -1
View File
@@ -1,3 +1,3 @@
declare module "geojson" {
export const parse: (data: any, format: any) => any;
export const parse: (data: object, format: object) => object;
}
browser/src/types/leaflet.d.ts
Vendored
+24
View File
@@ -0,0 +1,24 @@
//eslint-disable-next-line @typescript-eslint/no-unused-vars
import * as L from "leaflet";
declare module "leaflet" {
export function shapeMarker(
latlng: LatLngExpression,
options?: PathOptions & {
shape?:
| "diamond"
| "square"
| "triangle"
| "triangle-up"
| "triangle-down"
| "arrowhead"
| "arrowhead-up"
| "arrowhead-down"
| "circle"
| "x"
| string;
radius?: number;
rotation?: number;
}
): Path;
}
browser/src/types/types.d.ts
Vendored
+2
View File
@@ -85,6 +85,8 @@ export declare global {
"marker-color"?: string;
altitudeConstraint?: string;
speedConstraint?: number;
// For map
isIntersection?: boolean;
};
type LineSegment = [number, number];