{terminals.map((terminal) => (
setSelectedTerminal(terminal)}
>
-
+
{(() => {
const t = parser.terminals.find(({ ID }) => ID === terminal);
return `${t?.ICAO} - ${t?.FullName}`;
diff --git a/browser/src/components/map/Map.tsx b/browser/src/components/map/Map.tsx
new file mode 100644
index 0000000..8353b3b
--- /dev/null
+++ b/browser/src/components/map/Map.tsx
@@ -0,0 +1,95 @@
+import { default as L } from 'leaflet';
+import 'leaflet-svg-shape-markers';
+import hash from 'object-hash';
+import { createRef, Fragment, useEffect, type FC } from 'react';
+import { GeoJSON, MapContainer, TileLayer } from 'react-leaflet';
+
+interface MapProps {
+ procedures: object[];
+}
+
+export const Map: FC = ({ procedures }) => {
+ const mapRef = createRef();
+ const layerRef = createRef();
+
+ useEffect(() => {
+ if (layerRef.current && mapRef.current) {
+ mapRef.current.flyToBounds(layerRef.current.getBounds(), {
+ animate: false,
+ padding: [50, 50],
+ });
+ }
+ });
+
+ return (
+
+
+ {procedures.map((procedure) => (
+
+ ({
+ color: '#ff00ff',
+ stroke: true,
+ weight: 5,
+ opacity: 1,
+ dashArray: properties.isManual ? '20, 20' : undefined,
+ })}
+ filter={(feature) => feature.geometry.type !== 'Point'}
+ ref={layerRef}
+ />
+ {
+ 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') {
+ layer.bindPopup(
+ `${properties.name}
+ ${properties.altitude} ft
+ ${properties.speed} kts
+ CNSTR:
+ ${properties.altitudeConstraint ?? ''}
+ ${properties.speedConstraint ?? ''}
`
+ );
+ }
+ }}
+ filter={(feature) => feature.geometry.type === 'Point'}
+ />
+
+ ))}
+
+ );
+};
diff --git a/browser/src/index.css b/browser/src/index.css
deleted file mode 100644
index 29806f8..0000000
--- a/browser/src/index.css
+++ /dev/null
@@ -1,8 +0,0 @@
-* {
- box-sizing: border-box;
-}
-
-html,
-body {
- margin: 0;
-}
diff --git a/browser/src/main.tsx b/browser/src/main.tsx
index ccc7e2b..9262461 100644
--- a/browser/src/main.tsx
+++ b/browser/src/main.tsx
@@ -3,7 +3,6 @@ import { createRoot } from 'react-dom/client';
import App from './App.tsx';
import 'leaflet/dist/leaflet.css';
-import './index.css';
createRoot(document.getElementById('root')!).render(
diff --git a/browser/src/parser/terminators/FC.ts b/browser/src/parser/terminators/FC.ts
index 4678df1..be612ce 100644
--- a/browser/src/parser/terminators/FC.ts
+++ b/browser/src/parser/terminators/FC.ts
@@ -20,7 +20,7 @@ export const TerminatorsFC = (
const line: LineSegment[] = [[previousFix.longitude, previousFix.latitude]];
if (previousFix.isFlyOver) {
- let crsIntoEndpoint = trackIntoEndpoint;
+ const crsIntoEndpoint = trackIntoEndpoint;
// Check if there even is an arc
if (!crsIntoEndpoint.equal(lastCourse)) {
diff --git a/browser/src/style.css b/browser/src/style.css
new file mode 100644
index 0000000..d4b5078
--- /dev/null
+++ b/browser/src/style.css
@@ -0,0 +1 @@
+@import 'tailwindcss';
diff --git a/browser/src/types/leaflet.d.ts b/browser/src/types/leaflet.d.ts
index ecd5877..23091e2 100644
--- a/browser/src/types/leaflet.d.ts
+++ b/browser/src/types/leaflet.d.ts
@@ -1,4 +1,4 @@
-//eslint-disable-next-line @typescript-eslint/no-unused-vars
+
import 'leaflet';
declare module 'leaflet' {
diff --git a/browser/vite.config.ts b/browser/vite.config.ts
index 26f4e71..1850c1b 100644
--- a/browser/vite.config.ts
+++ b/browser/vite.config.ts
@@ -1,7 +1,8 @@
+import tailwindcss from '@tailwindcss/vite';
import react from '@vitejs/plugin-react-swc';
import { defineConfig } from 'vite';
// https://vite.dev/config/
export default defineConfig({
- plugins: [react()],
+ plugins: [tailwindcss(), react()],
});