MAP rendering

More CF/TF fixes

README.md

@@ -10,7 +10,7 @@
 
 ### Example
 
-LGAV BIBE1K SID (Cycle 2507, ID 10653)
+LGAV 03L BIBE1K SID (Cycle 2507, ID 10653)
 
 ### Minimum Required Fields
 
@@ -40,12 +40,14 @@ LGAV BIBE1K SID (Cycle 2507, ID 10653)
 
 While similar to an RF, the center point is coded differently.
 
+Calculate distance for FMS based on ` 2 * π NavDist * abs(NavBear - Course) 360`.
+
 
 ## Course to Altitude (CA)
 
 ### Example
 
-LGAV BIBE1L SID (Cycle 2507, ID 10654)
+LGAV 03L BIBE1L SID (Cycle 2507, ID 10654)
 
 ### Minimum Required Fields
 
@@ -74,7 +76,7 @@ This new origin is an implicit overfly.
 
 ### Example
 
-LGAV BIBE2F SID (Cycle 2507, ID 10657)
+LGAV 21L BIBE2F SID (Cycle 2507, ID 10657)
 
 ### Minimum Required Fields
 
@@ -98,14 +100,13 @@ LGAV BIBE2F SID (Cycle 2507, ID 10657)
 
 The leg terminates upon reaching `Distance`.
 This intercept point then becomes the origin fix of the succeeding leg.
-This new origin is an implicit overfly.
 
 
 ## Course to Fix (CF)
 
 ### Example
 
-LGAV BIBE2F SID (Cycle 2507, ID 10657)
+LGAV 21L BIBE2F SID (Cycle 2507, ID 10657)
 
 ### Minimum Required Fields
 
@@ -145,7 +146,7 @@ shall be `TurnDir`.
 
 ### Example
 
-LGAV BIBE1L SID (Cycle 2507, ID 10654)
+LGAV 03L BIBE1L SID (Cycle 2507, ID 10654)
 
 ### Minimum Required Fields
 
@@ -170,7 +171,7 @@ This new origin can never be an overfly due to the intercept nature.
 
 ### Example
 
-LGAV KOR1D SID (Cycle 2507, ID 10679)
+LGAV 03L KOR1D SID (Cycle 2507, ID 10679)
 
 ### Minimum Required Fields
 
@@ -197,7 +198,7 @@ This intercept point then becomes the origin fix of the succeeding leg.
 
 ### Example
 
-LGAV KOR1D SID (Cycle 2507, ID 10679)
+LGAV 03L KOR1D SID (Cycle 2507, ID 10679)
 
 ### Minimum Required Fields
 
@@ -219,7 +220,7 @@ LGAV KOR1D SID (Cycle 2507, ID 10679)
 
 ### Example
 
-LGAV BIBE2F SID (Cycle 2507, ID 10657)
+LGAV 21L BIBE2F SID (Cycle 2507, ID 10657)
 
 ### Minimum Required Fields
 
@@ -254,7 +255,7 @@ This new origin is an implicit overfly.
 
 ### Example
 
-LIED CAR6F SID (Cycle 2507, ID 11798)
+LIED 34L/R CAR6F SID (Cycle 2507, ID 11798)
 
 ### Minimum Required Fields
 
@@ -290,7 +291,7 @@ This intercept point then becomes the origin fix of the succeeding leg.
 
 ### Example
 
-LGAV BIBE2T SID (Cycle 2507, ID 10659)
+LGAV 03R BIBE2T SID (Cycle 2507, ID 10659)
 
 ### Minimum Required Fields
 
@@ -318,14 +319,13 @@ LGAV BIBE2T SID (Cycle 2507, ID 10659)
 
 The leg terminates upon reaching  `Distance`.
 This intercept point then becomes the origin fix of the succeeding leg.
-This new origin is an implicit overfly.
 
 
 ## Track from Fix to Manual Termination (FM)
 
 ### Example
 
-LFPV PB2V SID (Cycle 2507, ID 10395)
+LFPV 27 PB2V SID (Cycle 2507, ID 10395)
 
 ### Minimum Required Fields
 
@@ -457,7 +457,7 @@ My guess as for the missing time/distance decider field, assume it to be distanc
 
 ### Example
 
-FAWB VDM29 APP (Cycle 2507, ID 67794), Missed approach procedure
+FAWB 29 VDM29 APP (Cycle 2507, ID 67794), Missed approach procedure
 
 ### Minimum Required Fields
 
@@ -513,7 +513,7 @@ This intercept point then becomes the origin fix of the succeeding leg.
 
 ### Example
 
-LFRN GODA5R SID (cycle 2507, ID 10485)
+LFRN 10 GODA5R SID (cycle 2507, ID 10485)
 
 ### Minimum Required Fields
 
@@ -545,12 +545,14 @@ No radius is specified, but can be inferred based on center point, both endpoint
 
 Example has `NavBear` set to `null`, significance of the inbound tangential track is unknown.
 
+Use `Distance` for calculations in FMS.
+
 
 ## Track to Fix (TF)
 
 ### Example
 
-LFRN GODA5R SID (cycle 2507, ID 10485)
+LFRN 10 GODA5R SID (cycle 2507, ID 10485)
 
 ### Minimum Required Fields
 
@@ -571,7 +573,7 @@ LFRN GODA5R SID (cycle 2507, ID 10485)
 
 ### Example
 
-LFRK LGL4X SID (Cycle 2507, ID 10475)
+LFRK 10 LGL4X SID (Cycle 2507, ID 10475)
 
 ### Minimum Required Fields
 
@@ -599,7 +601,7 @@ This new origin is an implicit overfly.
 
 ### Example
 
-LFRK NEVI4Y SID (Cycle 2507, ID 10482)
+LFRK 31 NEVI4Y SID (Cycle 2507, ID 10482)
 
 ### Minimum Required Fields
 
@@ -622,14 +624,13 @@ LFRK NEVI4Y SID (Cycle 2507, ID 10482)
 
 The leg terminates upon reaching `Distance`.
 This intercept point then becomes the origin fix of the succeeding leg.
-This new origin is an implicit overfly.
 
 
 ## Heading to Intercept (VI)
 
 ### Example
 
-LFRK LUSI4Y SID (Cycle 2507, ID 10480)
+LFRK 31 LUSI4Y SID (Cycle 2507, ID 10480)
 
 ### Minimum Required Fields
 
@@ -656,7 +657,7 @@ This new origin can never be an overfly due to the intercept nature.
 
 ### Example
 
-LFPV PB2P SID (Cycle 2507, ID 10394)
+LFPV 27 PB2P SID (Cycle 2507, ID 10394)
 
 ### Minimum Required Fields
 
@@ -676,7 +677,7 @@ LFPV PB2P SID (Cycle 2507, ID 10394)
 
 ### Example
 
-LIMC MMP8G SID (Cycle 2507, ID 11909)
+LIMC 35R MMP8G SID (Cycle 2507, ID 11909)
 
 ### Minimum Required Fields
 
@@ -696,4 +697,9 @@ LIMC MMP8G SID (Cycle 2507, ID 11909)
 ### Notes
 
 The leg terminates at the intercept point.
-This intercept point then becomes the origin fix of the succeeding leg.
+This intercept point then becomes the origin fix of the succeeding leg.
+
+
+# Other Fields
+
+- `Vnav`: Angle from IAF to MAP. Useful for RNAV.

browser/src/App.tsx

@@ -24,7 +24,7 @@ function App() {
 
   return (
     <>
-      {transitions.length === 0 ? (
+      {!user ? (
         <div className="flex min-h-dvh w-full">
           {!initialized && <div>Loading...</div>}
 
@@ -38,7 +38,27 @@ function App() {
               </a>
             </>
           )}
-          {user && (
+        </div>
+      ) : (
+        <div className="flex h-dvh w-dvw">
+          {selectedAirport && selectedRunway && selectedTerminal ? (
+            <Sidebar
+              airport={selectedAirport}
+              runway={selectedRunway}
+              terminal={selectedTerminal}
+              transitions={transitions}
+              transition={selectedTransition}
+              chart={selectedChart}
+              setTransition={setSelectedTransition}
+              setChart={setSelectedChart}
+              backAction={() => {
+                setSelectedTerminal(undefined);
+                setSelectedChart(undefined);
+                setTransitions([]);
+                setSelectedTransition(undefined);
+              }}
+            />
+          ) : (
             <ProcedureSelect
               selectedAirport={selectedAirport}
               selectedRunway={selectedRunway}
@@ -47,39 +67,29 @@ function App() {
               setSelectedRunway={setSelectedRunway}
               setSelectedTerminal={setSelectedTerminal}
               handleSelection={(selectedTransitions) => {
-                const _transitions = selectedTransitions.map((transition) => ({
-                  name: transition,
-                  data: parser.parse(selectedRunway!, transition),
-                }));
+                let _transitions = selectedTransitions
+                  .map((transition) => ({
+                    name: transition,
+                    data: parser.parse(selectedRunway!, transition),
+                  }))
+                  .filter(
+                    (transition) =>
+                      !transition.name.startsWith('RW') || transition.name === `RW${selectedRunway?.Ident}`
+                  );
+
+                if (_transitions.length > 1)
+                  _transitions = _transitions.filter((transition) => transition.name !== 'ALL');
                 setTransitions(_transitions);
                 setSelectedTransition(_transitions[0]);
                 setSelectedChart(undefined);
               }}
             />
           )}
-        </div>
-      ) : (
-        <div className="flex h-dvh w-dvw">
-          {transitions.length > 0 && selectedAirport && selectedTerminal ? (
-            <>
-              <Sidebar
-                airport={selectedAirport}
-                terminal={selectedTerminal}
-                transitions={transitions}
-                transition={selectedTransition}
-                chart={selectedChart}
-                setTransition={setSelectedTransition}
-                setChart={setSelectedChart}
-                backAction={() => {
-                  setSelectedTerminal(undefined);
-                  setTransitions([]);
-                }}
-              />
-              <Map airport={selectedAirport} chart={selectedChart} procedure={selectedTransition} />
-            </>
-          ) : (
-            <h1 className="text-center text-3xl">Error</h1>
-          )}
+          <Map
+            airport={selectedAirport}
+            chart={selectedChart}
+            procedures={selectedTransition ? [selectedTransition] : []}
+          />
         </div>
       )}
     </>

browser/src/components/Loader.tsx

@@ -0,0 +1,22 @@
+import type { FC } from 'react';
+
+interface LoaderProps {
+  size?: 0.5 | 1 | 2 | 3;
+}
+
+export const Loader: FC<LoaderProps> = ({ size = 2 }) => {
+  const variants = {
+    0.5: 'size-6 border-1 after:top-1 after:left-0.5 after:size-1.5 after:border-1',
+    1: 'size-12 border-2 after:top-2 after:left-1 after:size-3 after:border-2',
+    2: 'size-24 border-4 after:top-3 after:left-2 after:size-6 after:border-4',
+    3: 'size-36 border-6 after:top-4 after:left-3 after:size-9 after:border-6',
+  };
+
+  return (
+    <div className="flex justify-center">
+      <span
+        className={`relative inline-block ${variants[size]} animate-spin rounded-[50%] border-red-500 after:absolute after:rounded-[50%] after:border-black after:content-['']`}
+      ></span>
+    </div>
+  );
+};

browser/src/components/Map.tsx

@@ -1,22 +1,26 @@
 import { default as L } from 'leaflet';
 import 'leaflet-svg-shape-markers';
-import { createRef, type FC } from 'react';
+import { createRef, Fragment, useEffect, type FC } from 'react';
 import { GeoJSON, ImageOverlay, MapContainer, TileLayer } from 'react-leaflet';
 
 interface MapProps {
-  airport: Airport;
+  airport: Airport | undefined;
   chart: Chart | undefined;
-  procedure: Procedure | undefined;
+  procedures: Procedure[];
 }
 
-export const Map: FC<MapProps> = ({ airport, chart, procedure }) => {
+export const Map: FC<MapProps> = ({ airport, chart, procedures }) => {
   const mapRef = createRef<L.Map>();
   const imageRef = createRef<L.ImageOverlay>();
 
+  useEffect(() => {
+    if (airport) mapRef.current?.flyTo([airport?.Latitude, airport?.Longitude], 10, { animate: false });
+  }, [airport]);
+
   return (
     <MapContainer
-      center={[airport.Latitude, airport.Longitude]}
-      zoom={13}
+      center={[0, 0]}
+      zoom={5}
       zoomSnap={0}
       className="h-full w-full"
       ref={(_mapRef) => {
@@ -46,15 +50,15 @@ export const Map: FC<MapProps> = ({ airport, chart, procedure }) => {
         />
       )}
 
-      {procedure && (
-        <>
+      {procedures.map((procedure) => (
+        <Fragment key={procedure.name}>
           <GeoJSON
             key={`${procedure.name}-lines`}
             data={procedure.data}
             style={({ properties }) => ({
-              color: '#ff00ff',
+              color: properties.isMAP ? '#00ffff' : '#ff00ff',
               stroke: true,
-              weight: 5,
+              weight: properties.isMAP ? 2.5 : 5,
               opacity: 1,
               dashArray: properties.isManual ? '20, 20' : undefined,
             })}
@@ -71,12 +75,22 @@ export const Map: FC<MapProps> = ({ airport, chart, procedure }) => {
               weight: 3,
             }}
             pointToLayer={({ properties }, latlng) => {
-              if (properties.isFlyOver)
+              if (properties.isIntersection) return L.circleMarker(latlng, { radius: 6 });
+              else if (properties.IsMAP)
+                return L.shapeMarker(latlng, {
+                  shape: 'square',
+                  radius: 6,
+                });
+              else if (properties.IsFAF)
+                return L.shapeMarker(latlng, {
+                  shape: 'diamond',
+                  radius: 6,
+                });
+              else 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',
@@ -98,8 +112,8 @@ export const Map: FC<MapProps> = ({ airport, chart, procedure }) => {
             }}
             filter={(feature) => feature.geometry.type === 'Point'}
           />
-        </>
-      )}
+        </Fragment>
+      ))}
     </MapContainer>
   );
 };

browser/src/components/ProcedureSelect.tsx

@@ -1,5 +1,6 @@
 import { createRef, useMemo, useState, type Dispatch, type FC, type SetStateAction } from 'react';
 import Parser from '../parser/parser';
+import { Loader } from './Loader';
 
 const parser = await Parser.instance();
 
@@ -24,26 +25,32 @@ export const ProcedureSelect: FC<ProcedureSelectProps> = ({
 }) => {
   const inputRef = createRef<HTMLInputElement>();
   const [error, setError] = useState<string>();
+  const [inFlight, setInFlight] = useState<number>();
 
   const runways = useMemo(
     () => parser.runways.filter(({ AirportID }) => AirportID === selectedAirport?.ID),
     [selectedAirport]
   );
-  const terminals = useMemo(
-    () =>
-      parser.terminals.filter(
-        ({ AirportID, RwyID }) => AirportID === selectedAirport?.ID && (!RwyID || RwyID === selectedRunway?.ID)
-      ),
-    [selectedAirport, selectedRunway]
-  );
+  const terminals = useMemo(() => {
+    const _terminals = parser.terminals.filter(
+      ({ AirportID, RwyID }) => AirportID === selectedAirport?.ID && (!RwyID || RwyID === selectedRunway?.ID)
+    );
+
+    return {
+      star: _terminals.filter((terminal) => terminal.Proc === 1),
+      sid: _terminals.filter((terminal) => terminal.Proc === 2),
+      iap: _terminals.filter((terminal) => terminal.Proc === 3),
+    };
+  }, [selectedAirport, selectedRunway]);
 
   return (
-    <div className="flex w-full flex-col items-center justify-center gap-2 p-2">
+    <div className="flex h-full w-[300px] shrink-0 flex-col overflow-hidden">
       {selectedAirport && (
         <button
-          className="fixed top-2 left-2 cursor-pointer rounded border border-red-500 bg-red-500 px-2 py-1 font-semibold text-stone-50 focus:outline-2 focus:outline-black focus-visible:outline-2 focus-visible:outline-black"
+          className="sticky top-0 m-2 cursor-pointer rounded border border-red-500 bg-red-500 px-2 py-1 font-semibold text-stone-50 focus:outline-2 focus:outline-black focus-visible:outline-2 focus-visible:outline-black"
           onClick={() => {
             setError(undefined);
+            setInFlight(undefined);
 
             if (selectedTerminal) {
               setSelectedTerminal(undefined);
@@ -58,68 +65,126 @@ export const ProcedureSelect: FC<ProcedureSelectProps> = ({
         </button>
       )}
 
-      {!selectedAirport && (
-        <div className="flex w-full flex-col gap-2">
-          <h1 className="text-center text-3xl">Enter Airport ICAO</h1>
-          <input
-            ref={inputRef}
-            className="rounded border border-black px-2 py-1 focus:outline-2 focus-visible:outline-2"
-            onChange={(e) => {
-              if (e.target.value.length <= 4) e.target.value = e.target.value.toUpperCase();
-              else e.target.value = e.target.value.slice(0, 4);
-            }}
-          ></input>
-          <button
-            className="w-full cursor-pointer rounded border border-gray-300 bg-gray-300 px-2 py-1 font-semibold focus:outline-2 focus-visible:outline-2"
-            onClick={() => {
-              const airport = parser.airports.find(({ ICAO }) => ICAO === inputRef.current?.value.toUpperCase());
-              if (!airport) {
-                setError('Airport not found');
-                return;
-              }
-              setSelectedAirport(airport);
-              setError(undefined);
-            }}
-          >
-            Select Airport
-          </button>
-          {error && <span className="text-center text-red-700">{error}</span>}
-        </div>
-      )}
-      {selectedAirport && !selectedRunway && (
-        <div className="flex w-full flex-col gap-2">
-          <h1 className="text-center text-3xl">Select Runway</h1>
-          {runways.map((runway) => (
+      <div className="flex h-[calc(100%-50px)] flex-col gap-2 overflow-y-auto px-2 pb-2">
+        {!selectedAirport && (
+          <div className="flex w-full flex-col gap-2">
+            <h1 className="text-center text-3xl">Enter Airport ICAO</h1>
+            <input
+              ref={inputRef}
+              className="rounded border border-black px-2 py-1 focus:outline-2 focus-visible:outline-2"
+              onChange={(e) => {
+                if (e.target.value.length <= 4) e.target.value = e.target.value.toUpperCase();
+                else e.target.value = e.target.value.slice(0, 4);
+              }}
+            ></input>
             <button
-              key={runway.ID}
               className="w-full cursor-pointer rounded border border-gray-300 bg-gray-300 px-2 py-1 font-semibold focus:outline-2 focus-visible:outline-2"
-              onClick={() => setSelectedRunway(runway)}
-            >
-              Runway {runway.Ident}
-            </button>
-          ))}
-        </div>
-      )}
-      {selectedAirport && selectedRunway && !selectedTerminal && (
-        <div className="flex w-full flex-col gap-2">
-          <h1 className="text-center text-3xl">Select Procedure</h1>
-          {terminals.map((terminal) => (
-            <button
-              key={terminal.ID}
-              className="cursor-pointer rounded border border-gray-300 bg-gray-300 px-2 py-1 font-semibold focus:outline-2 focus-visible:outline-2"
               onClick={() => {
-                parser.loadTerminal(terminal.ID).then(() => {
-                  setSelectedTerminal(terminal);
-                  const transitions = new Set(parser.procedures.map((proc) => proc.Transition));
-                  handleSelection(Array.from(transitions));
-                });
+                const airport = parser.airports.find(({ ICAO }) => ICAO === inputRef.current?.value.toUpperCase());
+                if (!airport) {
+                  setError('Airport not found');
+                  return;
+                }
+                setSelectedAirport(airport);
+                setError(undefined);
               }}
             >
-              {terminal.FullName}
+              Select Airport
             </button>
-          ))}
-        </div>
-      )}
+            {error && <span className="text-center text-red-700">{error}</span>}
+          </div>
+        )}
+
+        {selectedAirport && !selectedRunway && (
+          <div className="flex w-full flex-col gap-2">
+            <h1 className="text-center text-3xl">Select Runway</h1>
+            {runways.map((runway) => (
+              <button
+                key={runway.ID}
+                className="w-full cursor-pointer rounded border border-gray-300 bg-gray-300 px-2 py-1 font-semibold focus:outline-2 focus-visible:outline-2"
+                onClick={() => setSelectedRunway(runway)}
+              >
+                Runway {runway.Ident}
+              </button>
+            ))}
+          </div>
+        )}
+
+        {selectedAirport && selectedRunway && !selectedTerminal && (
+          <div className="flex w-full flex-col gap-2">
+            <h1 className="text-center text-3xl">Select Procedure</h1>
+
+            <div className="flex flex-col gap-2">
+              <div className="sticky top-0 -mx-2 bg-gray-500 px-2 text-lg font-semibold text-white">Arrivals</div>
+              {terminals.star.map((terminal) => (
+                <button
+                  key={terminal.ID}
+                  className="cursor-pointer rounded border border-gray-300 bg-gray-300 px-2 py-1 font-semibold focus:outline-2 focus-visible:outline-2 disabled:bg-gray-100"
+                  onClick={() => {
+                    setInFlight(terminal.ID);
+                    parser.loadTerminal(terminal.ID).then(() => {
+                      setSelectedTerminal(terminal);
+                      const transitions = new Set(parser.procedures.map((proc) => proc.Transition));
+                      handleSelection(Array.from(transitions));
+                      setInFlight(undefined);
+                    });
+                  }}
+                  disabled={!!inFlight}
+                >
+                  <div className="flex justify-between">
+                    {terminal.FullName}
+                    {inFlight === terminal.ID && <Loader size={0.5} />}
+                  </div>
+                </button>
+              ))}
+            </div>
+            <div className="flex flex-col gap-2">
+              <div className="sticky top-0 -mx-2 bg-gray-500 px-2 text-lg font-semibold text-white">Departures</div>
+              {terminals.sid.map((terminal) => (
+                <button
+                  key={terminal.ID}
+                  className="cursor-pointer rounded border border-gray-300 bg-gray-300 px-2 py-1 font-semibold focus:outline-2 focus-visible:outline-2 disabled:bg-gray-100"
+                  onClick={() => {
+                    parser.loadTerminal(terminal.ID).then(() => {
+                      setSelectedTerminal(terminal);
+                      const transitions = new Set(parser.procedures.map((proc) => proc.Transition));
+                      handleSelection(Array.from(transitions));
+                    });
+                  }}
+                  disabled={!!inFlight}
+                >
+                  <div className="flex justify-between">
+                    {terminal.FullName}
+                    {inFlight === terminal.ID && <Loader size={0.5} />}
+                  </div>
+                </button>
+              ))}
+            </div>
+            <div className="flex flex-col gap-2">
+              <div className="sticky top-0 -mx-2 bg-gray-500 px-2 text-lg font-semibold text-white">Approaches</div>
+              {terminals.iap.map((terminal) => (
+                <button
+                  key={terminal.ID}
+                  className="cursor-pointer rounded border border-gray-300 bg-gray-300 px-2 py-1 font-semibold focus:outline-2 focus-visible:outline-2 disabled:bg-gray-100"
+                  onClick={() => {
+                    parser.loadTerminal(terminal.ID).then(() => {
+                      setSelectedTerminal(terminal);
+                      const transitions = new Set(parser.procedures.map((proc) => proc.Transition));
+                      handleSelection(Array.from(transitions));
+                    });
+                  }}
+                  disabled={!!inFlight}
+                >
+                  <div className="flex justify-between">
+                    {terminal.FullName}
+                    {inFlight === terminal.ID && <Loader size={0.5} />}
+                  </div>
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
     </div>
   );
 };

browser/src/components/Sidebar.tsx

@@ -1,11 +1,13 @@
 import BrowserImageManipulation from 'browser-image-manipulation';
 import L from 'leaflet';
 import type { Chart as NGChart } from 'navigraph/charts';
-import { useEffect, useState, type Dispatch, type FC, type SetStateAction } from 'react';
+import { useCallback, useEffect, useState, type Dispatch, type FC, type SetStateAction } from 'react';
 import { charts } from '../lib/navigraph';
+import { Loader } from './Loader';
 
 interface SidebarProps {
   airport: Airport;
+  runway: Runway;
   terminal: Terminal;
   transitions: Procedure[];
   transition: Procedure | undefined;
@@ -17,6 +19,7 @@ interface SidebarProps {
 
 export const Sidebar: FC<SidebarProps> = ({
   airport,
+  runway,
   terminal,
   transitions,
   transition,
@@ -25,14 +28,83 @@ export const Sidebar: FC<SidebarProps> = ({
   setChart,
   backAction,
 }) => {
-  const [chartIndex, setChartIndex] = useState<NGChart[]>([]);
+  const [inFlight, setInFlight] = useState(false);
+  const [chartIndex, setChartIndex] = useState<{
+    sid: NGChart[];
+    star: NGChart[];
+    iap: NGChart[];
+  }>({ star: [], sid: [], iap: [] });
 
   useEffect(() => {
+    setInFlight(true);
     (async () => {
-      setChartIndex((await charts.getChartsIndex({ icao: airport.ICAO, version: 'STD' })) ?? []);
+      const _chartIndex = await charts.getChartsIndex({ icao: airport.ICAO, version: 'STD' });
+
+      const newChartIndex = {
+        star:
+          _chartIndex?.filter(
+            (_chart) =>
+              _chart.category === 'ARR' && (_chart.runways.length === 0 || _chart.runways.includes(runway.Ident))
+          ) ?? [],
+        sid:
+          _chartIndex?.filter(
+            (_chart) =>
+              _chart.category === 'DEP' && (_chart.runways.length === 0 || _chart.runways.includes(runway.Ident))
+          ) ?? [],
+        iap:
+          _chartIndex?.filter(
+            (_chart) =>
+              _chart.category === 'APP' && (_chart.runways.length === 0 || _chart.runways.includes(runway.Ident))
+          ) ?? [],
+      };
+
+      _chartIndex?.filter((_chart) => ['ARR', 'DEP', 'APP'].includes(_chart.category));
+      setChartIndex(newChartIndex);
+      setInFlight(false);
     })();
   }, [airport.ICAO]);
 
+  useEffect(() => {
+    if (terminal) {
+      const star = chartIndex.star.find((_chart) => _chart.procedures.includes(terminal.FullName));
+      const sid = chartIndex.sid.find((_chart) => _chart.procedures.includes(terminal.FullName));
+      const iap = chartIndex.iap.find((_chart) => _chart.procedures.includes(terminal.FullName));
+      if (star) findChart(star);
+      if (sid) findChart(sid);
+      if (iap) findChart(iap);
+    }
+  }, [terminal, chartIndex]);
+
+  const findChart = useCallback(
+    async (_chart: NGChart) => {
+      if (chart?.index_number === _chart.index_number) return;
+      if (!_chart.bounding_boxes) return;
+
+      const planView = _chart.bounding_boxes.planview;
+
+      const chartImage = await charts.getChartImage({ chart: _chart, theme: 'light' });
+      if (!chartImage) return;
+      // Crop
+      const dataURL = await new BrowserImageManipulation()
+        .loadBlob(chartImage)
+        .crop(
+          planView.pixels.x2 - planView.pixels.x1,
+          planView.pixels.y1 - planView.pixels.y2,
+          planView.pixels.x1,
+          planView.pixels.y2
+        )
+        .saveAsImage();
+
+      const bounds = new L.LatLngBounds(
+        [planView.latlng.lat1, planView.latlng.lng1],
+        [planView.latlng.lat2, planView.latlng.lng2]
+      );
+
+      setChart({ data: dataURL, index_number: _chart.index_number, bounds });
+    },
+    [chart]
+  );
+
   return (
     <div className="flex h-full w-[300px] shrink-0 flex-col overflow-hidden">
       <button
@@ -57,51 +129,65 @@ export const Sidebar: FC<SidebarProps> = ({
                 setTransition(_procedure);
               }}
             >
-              {_procedure.name ? _procedure.name : 'ZZZZ'}
+              {_procedure.name ? _procedure.name : 'NONE'}
             </button>
           ))}
         </div>
 
         <div className="flex flex-col gap-2">
-          <div className="sticky top-0 -mx-2 bg-gray-500 px-2 text-lg font-semibold text-white">Charts</div>
-          {chartIndex
-            .filter((_chart) => _chart.is_georeferenced)
-            .map((_chart) => (
-              <button
-                key={_chart.index_number}
-                className={`cursor-pointer rounded border border-gray-300 bg-gray-300 px-2 py-1 text-left font-semibold focus:outline-2 focus:outline-black focus-visible:outline-2 focus-visible:outline-black ${chart?.index_number === _chart.index_number ? 'outline-2' : ''}`}
-                onClick={async () => {
-                  if (chart?.index_number === _chart.index_number) return;
-                  if (!_chart.bounding_boxes) return;
+          <div className="sticky top-0 z-10 -mx-2 bg-gray-500 px-2 text-lg font-semibold text-white">Charts</div>
+          {inFlight && <Loader size={3} />}
 
-                  const planView = _chart.bounding_boxes.planview;
+          <div className="flex flex-col gap-2">
+            <div className="sticky top-7 -mx-2 -mt-2 bg-gray-500 px-2 text-lg font-semibold text-white">Arrivals</div>
+            {chartIndex.star
+              .filter((_chart) => _chart.is_georeferenced)
+              .map((_chart) => (
+                <button
+                  key={_chart.index_number}
+                  className={`cursor-pointer rounded border border-gray-300 bg-gray-300 px-2 py-1 text-left font-semibold focus:outline-2 focus:outline-black focus-visible:outline-2 focus-visible:outline-black ${chart?.index_number === _chart.index_number ? 'outline-2' : ''}`}
+                  onClick={() => findChart(_chart)}
+                >
+                  <span className="font-bold">{_chart.index_number}</span>
+                  <br />
+                  {_chart.name}
+                </button>
+              ))}
+          </div>
 
-                  const chartImage = await charts.getChartImage({ chart: _chart, theme: 'light' });
-                  if (!chartImage) return;
-                  // Crop
-                  const dataURL = await new BrowserImageManipulation()
-                    .loadBlob(chartImage)
-                    .crop(
-                      planView.pixels.x2 - planView.pixels.x1,
-                      planView.pixels.y1 - planView.pixels.y2,
-                      planView.pixels.x1,
-                      planView.pixels.y2
-                    )
-                    .saveAsImage();
+          <div className="flex flex-col gap-2">
+            <div className="sticky top-7 -mx-2 bg-gray-500 px-2 text-lg font-semibold text-white">Departures</div>
+            {chartIndex.sid
+              .filter((_chart) => _chart.is_georeferenced)
+              .map((_chart) => (
+                <button
+                  key={_chart.index_number}
+                  className={`cursor-pointer rounded border border-gray-300 bg-gray-300 px-2 py-1 text-left font-semibold focus:outline-2 focus:outline-black focus-visible:outline-2 focus-visible:outline-black ${chart?.index_number === _chart.index_number ? 'outline-2' : ''}`}
+                  onClick={() => findChart(_chart)}
+                >
+                  <span className="font-bold">{_chart.index_number}</span>
+                  <br />
+                  {_chart.name}
+                </button>
+              ))}
+          </div>
 
-                  const bounds = new L.LatLngBounds(
-                    [planView.latlng.lat1, planView.latlng.lng1],
-                    [planView.latlng.lat2, planView.latlng.lng2]
-                  );
-
-                  setChart({ data: dataURL, index_number: _chart.index_number, bounds });
-                }}
-              >
-                <span className="font-bold">{_chart.index_number}</span>
-                <br />
-                {_chart.name}
-              </button>
-            ))}
+          <div className="flex flex-col gap-2">
+            <div className="sticky top-7 -mx-2 bg-gray-500 px-2 text-lg font-semibold text-white">Approaches</div>
+            {chartIndex.iap
+              .filter((_chart) => _chart.is_georeferenced)
+              .map((_chart) => (
+                <button
+                  key={_chart.index_number}
+                  className={`cursor-pointer rounded border border-gray-300 bg-gray-300 px-2 py-1 text-left font-semibold focus:outline-2 focus:outline-black focus-visible:outline-2 focus-visible:outline-black ${chart?.index_number === _chart.index_number ? 'outline-2' : ''}`}
+                  onClick={() => findChart(_chart)}
+                >
+                  <span className="font-bold">{_chart.index_number}</span>
+                  <br />
+                  {_chart.name}
+                </button>
+              ))}
+          </div>
         </div>
       </div>
     </div>

browser/src/parser/parser.ts

@@ -128,28 +128,32 @@ class Parser {
       name: runway.Ident,
     });
     let lastCourse = runway.TrueHeading;
-    const procedure = this._procedures.filter(({ Transition }) => !Transition || Transition === transition);
+    const legOptions = { isMAP: false };
+    const procedure = this._procedures.filter(
+      ({ Transition }) => !Transition || Transition === transition || Transition === 'ALL'
+    );
 
     // Main
     for (let index = 0; index < procedure.length; index++) {
       const leg = procedure[index];
       const previousFix = navFixes.at(-1)!;
-      const waypoint = this.waypoints.filter(({ ID }) => ID === leg.WptID)[0];
+      legOptions.isMAP ||= previousFix.IsMAP ?? false;
+      const waypoint = this.waypoints.find(({ ID }) => ID === leg.WptID);
 
       switch (leg.TrackCode) {
         case 'AF': {
           const [fixToAdd, lineToAdd] = TerminatorsAF(leg as AFTerminalEntry, previousFix, waypoint);
-          update(fixToAdd, lineToAdd);
+          update(fixToAdd, lineToAdd, legOptions);
           break;
         }
         case 'CA': {
           const [fixToAdd, lineToAdd] = TerminatorsCA(leg as CATerminalEntry, previousFix, lastCourse);
-          update(fixToAdd, lineToAdd);
+          update(fixToAdd, lineToAdd, legOptions);
           break;
         }
         case 'CD': {
           const [fixToAdd, lineToAdd] = TerminatorsCD(leg as CDTerminalEntry, previousFix, lastCourse);
-          update(fixToAdd, lineToAdd);
+          update(fixToAdd, lineToAdd, legOptions);
           break;
         }
         case 'CF': {
@@ -159,7 +163,7 @@ class Parser {
             lastCourse,
             waypoint
           );
-          update(fixToAdd, lineToAdd);
+          update(fixToAdd, lineToAdd, legOptions);
           break;
         }
         case 'CI': {
@@ -169,37 +173,39 @@ class Parser {
             { ...previousFix }, // COPY
             lastCourse
           );
-          update(fixToAdd, lineToAdd);
+          update(fixToAdd, lineToAdd, legOptions);
           break;
         }
         case 'CR': {
           const [fixToAdd, lineToAdd] = TerminatorsCR(leg as CRTerminalEntry, previousFix, lastCourse);
-          update(fixToAdd, lineToAdd);
+          update(fixToAdd, lineToAdd, legOptions);
           break;
         }
         case 'DF': {
           const [fixToAdd, lineToAdd] = TerminatorsDF(leg as DFTerminalEntry, previousFix, lastCourse, waypoint);
-          update(fixToAdd, lineToAdd);
+          update(fixToAdd, lineToAdd, legOptions);
           break;
         }
         case 'FA': {
           const [fixToAdd, lineToAdd] = TerminatorsFA(leg as FATerminalEntry, previousFix, lastCourse);
-          update(fixToAdd, lineToAdd);
+          update(fixToAdd, lineToAdd, legOptions);
           break;
         }
         case 'FC': {
           const [fixToAdd, lineToAdd] = TerminatorsFC(leg as FCTerminalEntry, previousFix, lastCourse);
-          update(fixToAdd, lineToAdd);
+          update(fixToAdd, lineToAdd, legOptions);
           break;
         }
         case 'FD': {
           const [fixToAdd, lineToAdd] = TerminatorsFD(leg as FDTerminalEntry, previousFix, lastCourse);
-          update(fixToAdd, lineToAdd);
+          update(fixToAdd, lineToAdd, legOptions);
           break;
         }
         case 'FM': {
           const [fixToAdd, lineToAdd] = TerminatorsFM(leg as FMTerminalEntry, previousFix, lastCourse);
-          update(fixToAdd, lineToAdd, { isManual: true });
+          update(fixToAdd, lineToAdd, { isManual: true, ...legOptions });
+          // Make overfly
+          navFixes.at(-1)!.isFlyOver = true;
           break;
         }
         case 'HA':
@@ -209,8 +215,11 @@ class Parser {
           break;
         case 'IF': {
           const fixToAdd = TerminatorsIF(leg as RFTerminalEntry, waypoint);
-          navFixes.length = 0;
-          navFixes.push(fixToAdd);
+          // Only Runway, replace
+          if (navFixes.length <= 1) {
+            navFixes.push(fixToAdd);
+            lastCourse = -1;
+          }
           break;
         }
         case 'PI':
@@ -223,23 +232,28 @@ class Parser {
             lastCourse = (leg as RFTerminalEntry).Course?.toTrue(fixToAdd);
           }
           if (lineToAdd) {
-            lineSegments.push({ line: lineToAdd });
+            lineSegments.push({ line: lineToAdd, ...legOptions });
           }
           break;
         }
         case 'TF': {
-          const [fixToAdd, lineToAdd] = TerminatorsTF(leg as TFTerminalEntry, previousFix, lastCourse, waypoint);
-          update(fixToAdd, lineToAdd);
+          const [fixToAdd, lineToAdd] = TerminatorsTF(
+            leg as TFTerminalEntry,
+            { ...previousFix }, // COPY
+            lastCourse,
+            waypoint
+          );
+          update(fixToAdd, lineToAdd, legOptions);
           break;
         }
         case 'VA': {
           const [fixToAdd, lineToAdd] = TerminatorsVA(leg as VATerminalEntry, previousFix, lastCourse);
-          update(fixToAdd, lineToAdd);
+          update(fixToAdd, lineToAdd, legOptions);
           break;
         }
         case 'VD': {
           const [fixToAdd, lineToAdd] = TerminatorsVD(leg as VDTerminalEntry, previousFix, lastCourse);
-          update(fixToAdd, lineToAdd);
+          update(fixToAdd, lineToAdd, legOptions);
           break;
         }
         case 'VI': {
@@ -249,17 +263,19 @@ class Parser {
             { ...previousFix }, // COPY
             lastCourse
           );
-          update(fixToAdd, lineToAdd);
+          update(fixToAdd, lineToAdd, legOptions);
           break;
         }
         case 'VM': {
           const [fixToAdd, lineToAdd] = TerminatorsVM(leg as VMTerminalEntry, previousFix, lastCourse);
-          update(fixToAdd, lineToAdd, { isManual: true });
+          update(fixToAdd, lineToAdd, { isManual: true, ...legOptions });
+          // Make overfly
+          navFixes.at(-1)!.isFlyOver = true;
           break;
         }
         case 'VR': {
           const [fixToAdd, lineToAdd] = TerminatorsVR(leg as VRTerminalEntry, previousFix, lastCourse);
-          update(fixToAdd, lineToAdd);
+          update(fixToAdd, lineToAdd, legOptions);
           break;
         }
         default:

browser/src/parser/pathGenerators/generateAFArc.ts

@@ -6,7 +6,7 @@ import computeDestinationPoint from 'geolib/es/computeDestinationPoint';
  * @param start Arc origin point
  * @param center Arc center point
  * @param radius Arc radius in nmi
- * @param turnDir
+ * @param turnDir Turn direction
  * @returns Line segments
  */
 export const generateAFArc = (
@@ -30,11 +30,11 @@ export const generateAFArc = (
     while (crsFromOrigin !== crsIntoEndpoint) {
       if (turnDir === 'R') {
         const delta = (crsIntoEndpoint - crsFromOrigin).normaliseDegrees();
-        crsFromOrigin += delta < 1 ? delta : 1;
+        crsFromOrigin += delta < 0.1 ? delta : 0.1;
         crsFromOrigin = crsFromOrigin.normaliseDegrees();
       } else {
         const delta = (crsFromOrigin - crsIntoEndpoint).normaliseDegrees();
-        crsFromOrigin -= delta < 1 ? delta : 1;
+        crsFromOrigin -= delta < 0.1 ? delta : 0.1;
         crsFromOrigin = crsFromOrigin.normaliseDegrees();
       }
       if (crsFromOrigin === crsIntoEndpoint) break;

browser/src/parser/pathGenerators/generatePerformanceArc.ts

@@ -38,12 +38,12 @@ export const generatePerformanceArc = (
       let time = 0;
       if (turnDir === 'R') {
         const delta = (crsIntoEndpoint - crsFromOrigin).normaliseDegrees();
-        const increment = delta < 1 ? delta : 1;
+        const increment = delta < 0.1 ? delta : 0.1;
         crsFromOrigin = (crsFromOrigin + increment).normaliseDegrees();
         time = increment / turnRate;
       } else {
         const delta = (crsFromOrigin - crsIntoEndpoint).normaliseDegrees();
-        const increment = delta < 1 ? delta : 1;
+        const increment = delta < 0.1 ? delta : 0.1;
         crsFromOrigin = (crsFromOrigin - increment).normaliseDegrees();
         time = increment / turnRate;
       }
@@ -70,12 +70,12 @@ export const generatePerformanceArc = (
         let time = 0;
         if (turnDir === 'R') {
           const delta = (crsIntoEndpoint - crsFromOrigin).normaliseDegrees();
-          const increment = delta < 1 ? delta : 1;
+          const increment = delta < 0.1 ? delta : 0.1;
           crsFromOrigin = (crsFromOrigin + increment).normaliseDegrees();
           time = increment / turnRate;
         } else {
           const delta = (crsFromOrigin - crsIntoEndpoint).normaliseDegrees();
-          const increment = delta < 1 ? delta : 1;
+          const increment = delta < 0.1 ? delta : 0.1;
           crsFromOrigin = (crsFromOrigin - increment).normaliseDegrees();
           time = increment / turnRate;
         }

browser/src/parser/pathGenerators/generateRFArc.ts

@@ -1,5 +1,5 @@
 import computeDestinationPoint from 'geolib/es/computeDestinationPoint';
-import getDistance from 'geolib/es/getDistance';
+import getPreciseDistance from 'geolib/es/getPreciseDistance';
 
 /**
  * @param crsIntoEndpoint Course into arc endpoint
@@ -36,7 +36,7 @@ export const generateRFArc = (
       crsOrthogonalOnEndpoint = (crsIntoEndpoint - 90).normaliseDegrees();
     }
 
-    const arcRad = getDistance(center, start);
+    const arcRad = getPreciseDistance(center, start);
 
     crsOrthogonalOnOrigin = crsOrthogonalOnOrigin.reciprocalCourse();
     crsOrthogonalOnEndpoint = crsOrthogonalOnEndpoint.reciprocalCourse();
@@ -50,11 +50,11 @@ export const generateRFArc = (
     while (!crsOrthogonalOnOrigin.equal(crsOrthogonalOnEndpoint)) {
       if (turnDir === 'R') {
         const delta = (crsOrthogonalOnEndpoint - crsOrthogonalOnOrigin).normaliseDegrees();
-        crsOrthogonalOnOrigin += delta < 1 ? delta : 1;
+        crsOrthogonalOnOrigin += delta < 0.1 ? delta : 0.1;
         crsOrthogonalOnOrigin = crsOrthogonalOnOrigin.normaliseDegrees();
       } else {
         const delta = (crsOrthogonalOnOrigin - crsOrthogonalOnEndpoint).normaliseDegrees();
-        crsOrthogonalOnOrigin -= delta < 1 ? delta : 1;
+        crsOrthogonalOnOrigin -= delta < 0.1 ? delta : 0.1;
         crsOrthogonalOnOrigin = crsOrthogonalOnOrigin.normaliseDegrees();
       }
 

browser/src/parser/pathGenerators/generateTangentArc.ts

@@ -1,5 +1,5 @@
 import computeDestinationPoint from 'geolib/es/computeDestinationPoint';
-import getDistance from 'geolib/es/getDistance';
+import getPreciseDistance from 'geolib/es/getPreciseDistance';
 import { computeIntersection } from '../utils/computeIntersection';
 
 /**
@@ -56,14 +56,19 @@ export const generateTangentArc = (
     }
 
     // Generate arc
-    const arcCenter = computeIntersection(
+    let arcRad = 0;
+    let arcCenter = computeIntersection(
       start,
       crsOrthogonalOnOrigin,
       intcArcOnCrsIntoEndpoint,
       crsOrthogonalOnEndpoint
     );
-    if (!arcCenter) return null;
-    const arcRad = getDistance(arcCenter, start);
+    if (Math.abs(crsOrthogonalOnEndpoint - crsOrthogonalOnOrigin) <= 0.1 && arcCenter)
+      arcRad = getPreciseDistance(arcCenter, start);
+    else {
+      arcRad = getPreciseDistance(start, end) / 2;
+      arcCenter = computeDestinationPoint(start, arcRad, crsOrthogonalOnOrigin);
+    }
 
     crsOrthogonalOnOrigin = crsOrthogonalOnOrigin.reciprocalCourse();
     crsOrthogonalOnEndpoint = crsOrthogonalOnEndpoint.reciprocalCourse();
@@ -74,19 +79,24 @@ export const generateTangentArc = (
       crsOrthogonalOnOrigin -= crsOrthogonalOnOrigin < 1 ? crsOrthogonalOnOrigin : 1;
     }
 
+    let lastDistance = getPreciseDistance(start, end);
     while (!crsOrthogonalOnOrigin.equal(crsOrthogonalOnEndpoint)) {
       if (turnDir === 'R') {
         const delta = (crsOrthogonalOnEndpoint - crsOrthogonalOnOrigin).normaliseDegrees();
-        crsOrthogonalOnOrigin += delta < 1 ? delta : 1;
+        crsOrthogonalOnOrigin += delta < 0.1 ? delta : 0.1;
         crsOrthogonalOnOrigin = crsOrthogonalOnOrigin.normaliseDegrees();
       } else {
         const delta = (crsOrthogonalOnOrigin - crsOrthogonalOnEndpoint).normaliseDegrees();
-        crsOrthogonalOnOrigin -= delta < 1 ? delta : 1;
+        crsOrthogonalOnOrigin -= delta < 0.1 ? delta : 0.1;
         crsOrthogonalOnOrigin = crsOrthogonalOnOrigin.normaliseDegrees();
       }
 
       const arcFix = computeDestinationPoint(arcCenter, arcRad, crsOrthogonalOnOrigin);
 
+      const newDistance = getPreciseDistance(arcFix, end);
+      if (lastDistance <= newDistance && lastDistance < 25) break;
+      lastDistance = newDistance;
+
       line.push([arcFix.longitude, arcFix.latitude]);
     }
   }

browser/src/parser/terminators/AF.ts

@@ -7,6 +7,11 @@ export const TerminatorsAF = (
   previousFix: NavFix,
   waypoint?: Waypoint
 ): [NavFix?, LineSegment[]?] => {
+  const navaid = {
+    latitude: leg.NavLat,
+    longitude: leg.NavLon,
+  };
+
   const targetFix: NavFix = {
     latitude: leg.WptLat,
     longitude: leg.WptLon,
@@ -16,27 +21,13 @@ export const TerminatorsAF = (
     speed: computeSpeed(leg, previousFix),
     speedConstraint: leg.SpeedLimit,
     altitudeConstraint: leg.Alt,
+    IsFAF: leg.IsFAF,
+    IsMAP: leg.IsMAP,
   };
 
-  const arcEndCrs = getGreatCircleBearing(
-    {
-      latitude: leg.NavLat,
-      longitude: leg.NavLon,
-    },
-    {
-      latitude: leg.WptLat,
-      longitude: leg.WptLon,
-    }
-  );
+  const arcEndCrs = getGreatCircleBearing(navaid, targetFix);
 
-  const line = generateAFArc(
-    arcEndCrs,
-    leg.Course.toTrue({ latitude: leg.NavLat, longitude: leg.NavLon }),
-    previousFix,
-    { latitude: leg.NavLat, longitude: leg.NavLon },
-    leg.NavDist,
-    leg.TurnDir
-  );
+  const line = generateAFArc(arcEndCrs, leg.Course.toTrue(navaid), previousFix, navaid, leg.NavDist, leg.TurnDir);
 
   return [targetFix, line];
 };

browser/src/parser/terminators/CA.ts

@@ -31,6 +31,8 @@ export const TerminatorsCA = (
     speed: speed,
     speedConstraint: leg.SpeedLimit,
     altitudeConstraint: leg.Alt,
+    IsFAF: leg.IsFAF,
+    IsMAP: leg.IsMAP,
   };
   line.push([targetFix.longitude, targetFix.latitude]);
 

browser/src/parser/terminators/CD.ts

@@ -1,6 +1,6 @@
 import computeDestinationPoint from 'geolib/es/computeDestinationPoint';
-import getDistance from 'geolib/es/getDistance';
 import getGreatCircleBearing from 'geolib/es/getGreatCircleBearing';
+import getPreciseDistance from 'geolib/es/getPreciseDistance';
 import { generateOverflyArc } from '../pathGenerators/generateOverflyArc';
 import { computeSpeed } from '../utils/computeSpeed';
 
@@ -23,7 +23,7 @@ export const TerminatorsCD = (
 
   // Compute distance to fly from arc end
   const crsToNavaid = getGreatCircleBearing(arcEnd, navaid);
-  const distToNavaid = getDistance(arcEnd, navaid);
+  const distToNavaid = getPreciseDistance(arcEnd, navaid);
   let remainingDistance = leg.Distance.toMetre();
   // Navaid behind us
   if (Math.abs(crsToNavaid - lastCourse) > 90) {
@@ -44,6 +44,8 @@ export const TerminatorsCD = (
     speed: speed,
     speedConstraint: leg.SpeedLimit,
     altitudeConstraint: leg.Alt,
+    IsFAF: leg.IsFAF,
+    IsMAP: leg.IsMAP,
   };
   line.push([targetFix.longitude, targetFix.latitude]);
 

browser/src/parser/terminators/CF.ts

@@ -1,7 +1,8 @@
 import computeDestinationPoint from 'geolib/es/computeDestinationPoint';
 import getGreatCircleBearing from 'geolib/es/getGreatCircleBearing';
+import getPreciseDistance from 'geolib/es/getPreciseDistance';
 import Parser from '../parser';
-import { computeIntersection } from '../utils/computeIntersection';
+import { generateTangentArc } from '../pathGenerators/generateTangentArc';
 import { computeSpeed } from '../utils/computeSpeed';
 import { computeTurnRate } from '../utils/computeTurnRate';
 
@@ -13,7 +14,7 @@ export const TerminatorsCF = (
 ): [NavFix?, LineSegment[]?] => {
   const speed = computeSpeed(leg, previousFix);
   const crsIntoEndpoint = leg.Course.toTrue(previousFix);
-  const line: LineSegment[] = [[previousFix.longitude, previousFix.latitude]];
+  const line: LineSegment[] = [];
 
   const targetFix: NavFix = {
     latitude: leg.WptLat,
@@ -24,11 +25,41 @@ export const TerminatorsCF = (
     speed: speed,
     speedConstraint: leg.SpeedLimit,
     altitudeConstraint: leg.Alt,
+    IsFAF: leg.IsFAF,
+    IsMAP: leg.IsMAP,
   };
   const crsToIntercept = leg.Course.toTrue(targetFix);
 
   // Compute overfly arc
-  if (previousFix.isFlyOver && !lastCourse.equal(crsIntoEndpoint)) {
+  let arc1: LineSegment[] | null = null;
+  let arc2: LineSegment[] = [[previousFix.longitude, previousFix.latitude]];
+  if (previousFix.isFlyOver) {
+    arc1 = generateTangentArc(crsIntoEndpoint, lastCourse, previousFix, targetFix, leg.TurnDir);
+  } else {
+    arc1 = [[previousFix.longitude, previousFix.latitude]];
+  }
+
+  let arc;
+  if (arc1 && arc1.length > 1) {
+    const endCrs = getGreatCircleBearing(
+      {
+        latitude: arc1.at(-1)![1],
+        longitude: arc1.at(-1)![0],
+      },
+      targetFix
+    );
+    const endDist = getPreciseDistance(
+      {
+        latitude: arc1.at(-1)![1],
+        longitude: arc1.at(-1)![0],
+      },
+      targetFix
+    );
+
+    if (endDist <= 25 || (endCrs <= crsIntoEndpoint + 1 && endCrs >= crsIntoEndpoint - 1)) arc = arc1;
+  }
+
+  if (previousFix.isFlyOver && (!lastCourse.equal(crsIntoEndpoint) || !lastCourse.equal(crsToIntercept))) {
     const turnRate = computeTurnRate(speed, Parser.AC_BANK);
     let updatedCrsToIntercept = getGreatCircleBearing(previousFix, targetFix);
 
@@ -40,53 +71,48 @@ export const TerminatorsCF = (
     }
 
     // Generate arc
+    let lastDistance = getPreciseDistance(previousFix, targetFix);
     while (!updatedCrsToIntercept.equal(crsToIntercept)) {
+      let interceptAngle = 0;
+      if (leg.TurnDir === 'R') interceptAngle = Math.abs(lastCourse - crsToIntercept);
+      else interceptAngle = Math.abs(crsToIntercept - lastCourse);
+
       let time = 0;
-      if (leg.TurnDir === 'R') {
-        //const delta = (crsIntoEndpoint - lastCourse).normaliseDegrees();
-        const increment = 1; //delta < 1 ? delta : 1;
-        lastCourse = (lastCourse + increment).normaliseDegrees();
-        time = increment / turnRate;
-      } else {
-        //const delta = (lastCourse - crsIntoEndpoint).normaliseDegrees();
-        const increment = 1; //delta < 1 ? delta : 1;
-        lastCourse = (lastCourse - increment).normaliseDegrees();
-        time = increment / turnRate;
-      }
+      const increment = 0.1;
+      if (interceptAngle < 44.9 || interceptAngle >= 45.1) {
+        if (leg.TurnDir === 'R') {
+          lastCourse = (lastCourse + increment).normaliseDegrees();
+          time = increment / turnRate;
+        } else {
+          lastCourse = (lastCourse - increment).normaliseDegrees();
+          time = increment / turnRate;
+        }
+      } else time = increment / turnRate;
 
       const arcFix = computeDestinationPoint(
         {
-          latitude: line.at(-1)![1],
-          longitude: line.at(-1)![0],
+          latitude: arc2.at(-1)![1],
+          longitude: arc2.at(-1)![0],
         },
         ((speed / 3600) * time).toMetre(),
         lastCourse
       );
 
-      line.push([arcFix.longitude, arcFix.latitude]);
+      arc2.push([arcFix.longitude, arcFix.latitude]);
 
       // Update previousFix
       previousFix.latitude = arcFix.latitude;
       previousFix.longitude = arcFix.longitude;
       updatedCrsToIntercept = getGreatCircleBearing(previousFix, targetFix);
 
-      let interceptAngle = 0;
-      if (leg.TurnDir === 'R') Math.abs((interceptAngle = lastCourse - crsToIntercept));
-      else interceptAngle = Math.abs(crsToIntercept - lastCourse);
-
-      if (interceptAngle >= 45) break;
+      const newDistance = getPreciseDistance(previousFix, targetFix);
+      if (lastDistance <= newDistance && lastDistance < 25) break;
+      lastDistance = newDistance;
     }
   }
 
-  const interceptFix: NavFix = {
-    ...computeIntersection(previousFix, leg.Course.toTrue(previousFix), targetFix, crsToIntercept.reciprocalCourse())!,
-    isFlyOver: leg.IsFlyOver,
-    altitude: leg.Alt ? leg.Alt.parseAltitude() : previousFix.altitude,
-    speed: speed,
-    speedConstraint: leg.SpeedLimit,
-    altitudeConstraint: leg.Alt,
-  };
-  if (interceptFix.latitude) line.push([interceptFix.longitude, interceptFix.latitude]);
+  if (!arc) arc = arc2;
+  line.push(...arc);
 
   line.push([targetFix.longitude, targetFix.latitude]);
 

browser/src/parser/terminators/CI.ts

@@ -34,12 +34,12 @@ export const TerminatorsCI = (
       let time = 0;
       if (leg.TurnDir === 'R') {
         const delta = (crsIntoEndpoint - lastCourse).normaliseDegrees();
-        const increment = delta < 1 ? delta : 1;
+        const increment = delta < 0.1 ? delta : 0.1;
         lastCourse = (lastCourse + increment).normaliseDegrees();
         time = increment / turnRate;
       } else {
         const delta = (lastCourse - crsIntoEndpoint).normaliseDegrees();
-        const increment = delta < 1 ? delta : 1;
+        const increment = delta < 0.1 ? delta : 0.1;
         lastCourse = (lastCourse - increment).normaliseDegrees();
         time = increment / turnRate;
       }
@@ -68,6 +68,8 @@ export const TerminatorsCI = (
     speed: speed,
     speedConstraint: leg.SpeedLimit,
     altitudeConstraint: leg.Alt,
+    IsFAF: leg.IsFAF,
+    IsMAP: leg.IsMAP,
   };
 
   line.push([interceptFix.longitude, interceptFix.latitude]);

browser/src/parser/terminators/CR.ts

@@ -27,6 +27,8 @@ export const TerminatorsCR = (
     speed: speed,
     speedConstraint: leg.SpeedLimit,
     altitudeConstraint: leg.Alt,
+    IsFAF: leg.IsFAF,
+    IsMAP: leg.IsMAP,
   };
 
   line.push([interceptFix.longitude, interceptFix.latitude]);

browser/src/parser/terminators/DF.ts

@@ -1,6 +1,9 @@
+import computeDestinationPoint from 'geolib/es/computeDestinationPoint';
 import getGreatCircleBearing from 'geolib/es/getGreatCircleBearing';
-import { generateOverflyArc } from '../pathGenerators/generateOverflyArc';
+import getPreciseDistance from 'geolib/es/getPreciseDistance';
+import Parser from '../parser';
 import { computeSpeed } from '../utils/computeSpeed';
+import { computeTurnRate } from '../utils/computeTurnRate';
 
 export const TerminatorsDF = (
   leg: DFTerminalEntry,
@@ -9,6 +12,9 @@ export const TerminatorsDF = (
   waypoint?: Waypoint
 ): [NavFix?, LineSegment[]?] => {
   const speed = computeSpeed(leg, previousFix);
+  const turnRate = computeTurnRate(speed, Parser.AC_BANK);
+  const originalCrsFromOrigin = lastCourse;
+  const line: LineSegment[] = [[previousFix.longitude, previousFix.latitude]];
 
   const targetFix: NavFix = {
     latitude: leg.WptLat,
@@ -19,20 +25,95 @@ export const TerminatorsDF = (
     speed: speed,
     speedConstraint: leg.SpeedLimit,
     altitudeConstraint: leg.Alt,
+    IsFAF: leg.IsFAF,
+    IsMAP: leg.IsMAP,
   };
 
-  const crsIntoEndpoint = getGreatCircleBearing(previousFix, targetFix);
+  let crsIntoEndpoint = getGreatCircleBearing(previousFix, targetFix);
+  let force360 = getPreciseDistance(previousFix, targetFix) < 25;
 
-  // Compute overfly
-  const [line, _, _lastCourse] = generateOverflyArc(
-    crsIntoEndpoint,
-    lastCourse,
-    previousFix,
-    speed,
-    leg.TurnDir,
-    previousFix.latitude.equal(targetFix.latitude) && previousFix.longitude.equal(targetFix.longitude)
-  );
-  lastCourse = _lastCourse;
+  // Check if there even is an arc
+  if (force360 || !lastCourse.equal(crsIntoEndpoint)) {
+    // Turn Dir
+    if (!leg.TurnDir || leg.TurnDir === 'E') {
+      let prov = lastCourse - crsIntoEndpoint;
+      prov = prov > 180 ? prov - 360 : prov <= -180 ? prov + 360 : prov;
+      leg.TurnDir = prov > 0 ? 'L' : 'R';
+    }
+
+    // Generate arc
+    while (!lastCourse.equal(crsIntoEndpoint)) {
+      let time = 0;
+      if (leg.TurnDir === 'R') {
+        const delta = (crsIntoEndpoint - lastCourse).normaliseDegrees();
+        const increment = delta < 0.1 ? delta : 0.1;
+        lastCourse = (lastCourse + increment).normaliseDegrees();
+        time = increment / turnRate;
+      } else {
+        const delta = (lastCourse - crsIntoEndpoint).normaliseDegrees();
+        const increment = delta < 0.1 ? delta : 0.1;
+        lastCourse = (lastCourse - increment).normaliseDegrees();
+        time = increment / turnRate;
+      }
+
+      const arcFix = computeDestinationPoint(
+        {
+          latitude: line.at(-1)![1],
+          longitude: line.at(-1)![0],
+        },
+        ((speed / 3600) * time).toMetre(),
+        lastCourse
+      );
+
+      crsIntoEndpoint = getGreatCircleBearing(arcFix, targetFix);
+
+      line.push([arcFix.longitude, arcFix.latitude]);
+
+      // made a loop
+      if (line.length >= 3600) {
+        if (!force360) {
+          line.splice(1);
+        }
+        force360 = false;
+        break;
+      }
+    }
+
+    // Second half
+    if (force360) {
+      const temp = crsIntoEndpoint;
+      crsIntoEndpoint = originalCrsFromOrigin;
+      lastCourse = temp;
+
+      while (!lastCourse.equal(crsIntoEndpoint)) {
+        let time = 0;
+        if (leg.TurnDir === 'R') {
+          const delta = (crsIntoEndpoint - lastCourse).normaliseDegrees();
+          const increment = delta < 0.1 ? delta : 0.1;
+          lastCourse = (lastCourse + increment).normaliseDegrees();
+          time = increment / turnRate;
+        } else {
+          const delta = (lastCourse - crsIntoEndpoint).normaliseDegrees();
+          const increment = delta < 0.1 ? delta : 0.1;
+          lastCourse = (lastCourse - increment).normaliseDegrees();
+          time = increment / turnRate;
+        }
+
+        const arcFix = computeDestinationPoint(
+          {
+            latitude: line.at(-1)![1],
+            longitude: line.at(-1)![0],
+          },
+          ((speed / 3600) * time).toMetre(),
+          lastCourse
+        );
+
+        crsIntoEndpoint = getGreatCircleBearing(arcFix, targetFix);
+
+        line.push([arcFix.longitude, arcFix.latitude]);
+      }
+    }
+  }
 
   line.push([targetFix.longitude, targetFix.latitude]);
 

browser/src/parser/terminators/FA.ts

@@ -35,6 +35,8 @@ export const TerminatorsFA = (
     speed: speed,
     speedConstraint: leg.SpeedLimit,
     altitudeConstraint: leg.Alt,
+    IsFAF: leg.IsFAF,
+    IsMAP: leg.IsMAP,
   };
   line.push([targetFix.longitude, targetFix.latitude]);
 

browser/src/parser/terminators/FC.ts

@@ -1,8 +1,8 @@
 import computeDestinationPoint from 'geolib/es/computeDestinationPoint';
+import getGreatCircleBearing from 'geolib/es/getGreatCircleBearing';
 import Parser from '../parser';
 import { computeSpeed } from '../utils/computeSpeed';
 import { computeTurnRate } from '../utils/computeTurnRate';
-import getGreatCircleBearing from 'geolib/es/getGreatCircleBearing';
 
 // NOTE: Distance not adjusted for altitude in this demo
 export const TerminatorsFC = (
@@ -38,12 +38,12 @@ export const TerminatorsFC = (
         let time = 0;
         if (leg.TurnDir === 'R') {
           const delta = (crsIntoEndpoint - lastCourse).normaliseDegrees();
-          const increment = delta < 1 ? delta : 1;
+          const increment = delta < 0.1 ? delta : 0.1;
           lastCourse = (lastCourse + increment).normaliseDegrees();
           time = increment / turnRate;
         } else {
           const delta = (lastCourse - crsIntoEndpoint).normaliseDegrees();
-          const increment = delta < 1 ? delta : 1;
+          const increment = delta < 0.1 ? delta : 0.1;
           lastCourse = (lastCourse - increment).normaliseDegrees();
           time = increment / turnRate;
         }
@@ -87,6 +87,8 @@ export const TerminatorsFC = (
     speed: speed,
     speedConstraint: leg.SpeedLimit,
     altitudeConstraint: leg.Alt,
+    IsFAF: leg.IsFAF,
+    IsMAP: leg.IsMAP,
   };
 
   line.push([targetFix.longitude, targetFix.latitude]);

browser/src/parser/terminators/FD.ts

@@ -1,6 +1,6 @@
 import computeDestinationPoint from 'geolib/es/computeDestinationPoint';
-import getDistance from 'geolib/es/getDistance';
 import getGreatCircleBearing from 'geolib/es/getGreatCircleBearing';
+import getPreciseDistance from 'geolib/es/getPreciseDistance';
 import { generateOverflyArc } from '../pathGenerators/generateOverflyArc';
 import { computeSpeed } from '../utils/computeSpeed';
 
@@ -27,7 +27,7 @@ export const TerminatorsFD = (
 
   // Compute distance to fly from arc end
   const crsToNavaid = getGreatCircleBearing(arcEnd, navaid);
-  const distToNavaid = getDistance(arcEnd, navaid);
+  const distToNavaid = getPreciseDistance(arcEnd, navaid);
   let remainingDistance = leg.Distance.toMetre();
   // Navaid behind us
   if (Math.abs(crsToNavaid - lastCourse) > 90) {
@@ -48,6 +48,8 @@ export const TerminatorsFD = (
     speed: speed,
     speedConstraint: leg.SpeedLimit,
     altitudeConstraint: leg.Alt,
+    IsFAF: leg.IsFAF,
+    IsMAP: leg.IsMAP,
   };
   line.push([targetFix.longitude, targetFix.latitude]);
 

browser/src/parser/terminators/IF.ts

@@ -10,6 +10,8 @@ export const TerminatorsIF = (leg: IFTerminalEntry, waypoint?: Waypoint): NavFix
     speed: leg.SpeedLimit ? leg.SpeedLimit : Parser.AC_SPEED,
     speedConstraint: leg.SpeedLimit,
     altitudeConstraint: leg.Alt,
+    IsFAF: leg.IsFAF,
+    IsMAP: leg.IsMAP,
   };
 
   return targetFix;

browser/src/parser/terminators/RF.ts

@@ -1,6 +1,7 @@
 import { generateRFArc } from '../pathGenerators/generateRFArc';
 import { computeSpeed } from '../utils/computeSpeed';
 
+// NOTE: Direct entry into an RF does not calculate a usable line, given inbound course is unknown.
 export const TerminatorsRF = (
   leg: RFTerminalEntry,
   previousFix: NavFix,
@@ -16,6 +17,8 @@ export const TerminatorsRF = (
     speed: computeSpeed(leg, previousFix),
     speedConstraint: leg.SpeedLimit,
     altitudeConstraint: leg.Alt,
+    IsFAF: leg.IsFAF,
+    IsMAP: leg.IsMAP,
   };
 
   const line = generateRFArc(

browser/src/parser/terminators/TF.ts

@@ -1,7 +1,10 @@
-import getGreatCircleBearing from 'geolib/es/getGreatCircleBearing';
-import Parser from '../parser';
-import { computeSpeed } from '../utils/computeSpeed';
 import computeDestinationPoint from 'geolib/es/computeDestinationPoint';
+import getGreatCircleBearing from 'geolib/es/getGreatCircleBearing';
+import getPreciseDistance from 'geolib/es/getPreciseDistance';
+import Parser from '../parser';
+import { generateTangentArc } from '../pathGenerators/generateTangentArc';
+import { computeSpeed } from '../utils/computeSpeed';
+import { computeTurnRate } from '../utils/computeTurnRate';
 
 export const TerminatorsTF = (
   leg: TFTerminalEntry,
@@ -9,68 +12,107 @@ export const TerminatorsTF = (
   lastCourse: number,
   waypoint?: Waypoint
 ): [NavFix?, LineSegment[]?] => {
+  const speed = computeSpeed(leg, previousFix);
+  const line: LineSegment[] = [];
+
   const targetFix: NavFix = {
     latitude: leg.WptLat,
     longitude: leg.WptLon,
     name: waypoint?.Ident ?? undefined,
     isFlyOver: leg.IsFlyOver,
     altitude: leg.Alt ? leg.Alt.parseAltitude() : previousFix.altitude,
-    speed: computeSpeed(leg, previousFix),
+    speed: speed,
     speedConstraint: leg.SpeedLimit,
     altitudeConstraint: leg.Alt,
+    IsFAF: leg.IsFAF,
+    IsMAP: leg.IsMAP,
   };
+  const crsIntoEndpoint = getGreatCircleBearing(previousFix, targetFix);
 
-  const line: LineSegment[] = [[previousFix.longitude, previousFix.latitude]];
-
-  const trackIntoEndpoint = getGreatCircleBearing(previousFix, targetFix);
-
+  // Compute overfly arc
+  let arc1: LineSegment[] | null = null;
+  let arc2: LineSegment[] = [[previousFix.longitude, previousFix.latitude]];
   if (previousFix.isFlyOver) {
-    let crsIntoEndpoint = trackIntoEndpoint;
+    arc1 = generateTangentArc(crsIntoEndpoint, lastCourse, previousFix, targetFix, leg.TurnDir);
+  } else {
+    arc1 = [[previousFix.longitude, previousFix.latitude]];
+  }
 
-    // Check if there even is an arc
-    if (crsIntoEndpoint !== lastCourse) {
-      // Turn Dir
-      if (!leg.TurnDir || leg.TurnDir === 'E') {
-        let prov = lastCourse - crsIntoEndpoint;
-        prov = prov > 180 ? prov - 360 : prov <= -180 ? prov + 360 : prov;
-        leg.TurnDir = prov > 0 ? 'L' : 'R';
-      }
+  let arc;
+  if (arc1 && arc1.length > 1) {
+    const endCrs = getGreatCircleBearing(
+      {
+        latitude: arc1.at(-1)![1],
+        longitude: arc1.at(-1)![0],
+      },
+      targetFix
+    );
+    const endDist = getPreciseDistance(
+      {
+        latitude: arc1.at(-1)![1],
+        longitude: arc1.at(-1)![0],
+      },
+      targetFix
+    );
 
-      // Generate arc
-      let condition = false;
-      do {
+    if (endDist <= 25 || (endCrs <= crsIntoEndpoint + 1 && endCrs >= crsIntoEndpoint - 1)) arc = arc1;
+  }
+
+  if (previousFix.isFlyOver && (!lastCourse.equal(crsIntoEndpoint) || !lastCourse.equal(crsIntoEndpoint))) {
+    const turnRate = computeTurnRate(speed, Parser.AC_BANK);
+    let updatedCrsToIntercept = getGreatCircleBearing(previousFix, targetFix);
+
+    // Turn Dir
+    if (!leg.TurnDir || leg.TurnDir === 'E') {
+      let prov = lastCourse - crsIntoEndpoint;
+      prov = prov > 180 ? prov - 360 : prov <= -180 ? prov + 360 : prov;
+      leg.TurnDir = prov > 0 ? 'L' : 'R';
+    }
+
+    // Generate arc
+    let lastDistance = getPreciseDistance(previousFix, targetFix);
+    while (!updatedCrsToIntercept.equal(crsIntoEndpoint)) {
+      let interceptAngle = 0;
+      if (leg.TurnDir === 'R') interceptAngle = Math.abs(lastCourse - crsIntoEndpoint);
+      else interceptAngle = Math.abs(crsIntoEndpoint - lastCourse);
+
+      let time = 0;
+      const increment = 0.1;
+      if (interceptAngle < 44.9 || interceptAngle >= 45.1) {
         if (leg.TurnDir === 'R') {
-          const delta = (crsIntoEndpoint - lastCourse).normaliseDegrees();
-          lastCourse += delta < 1 ? delta : 1;
-          lastCourse = lastCourse.normaliseDegrees();
+          lastCourse = (lastCourse + increment).normaliseDegrees();
+          time = increment / turnRate;
         } else {
-          const delta = (lastCourse - crsIntoEndpoint).normaliseDegrees();
-          lastCourse -= delta < 1 ? delta : 1;
-          lastCourse = lastCourse.normaliseDegrees();
+          lastCourse = (lastCourse - increment).normaliseDegrees();
+          time = increment / turnRate;
         }
+      } else time = increment / turnRate;
 
-        const arcFix = computeDestinationPoint(
-          {
-            latitude: line.at(-1)![1],
-            longitude: line.at(-1)![0],
-          },
-          ((previousFix.speed ? previousFix.speed : Parser.AC_SPEED) / 3600).toMetre(),
-          lastCourse
-        );
+      const arcFix = computeDestinationPoint(
+        {
+          latitude: arc2.at(-1)![1],
+          longitude: arc2.at(-1)![0],
+        },
+        ((speed / 3600) * time).toMetre(),
+        lastCourse
+      );
 
-        line.push([arcFix.longitude, arcFix.latitude]);
+      arc2.push([arcFix.longitude, arcFix.latitude]);
 
-        crsIntoEndpoint = getGreatCircleBearing(arcFix, targetFix);
+      // Update previousFix
+      previousFix.latitude = arcFix.latitude;
+      previousFix.longitude = arcFix.longitude;
+      updatedCrsToIntercept = getGreatCircleBearing(previousFix, targetFix);
 
-        if (leg.TurnDir === 'R') {
-          condition = crsIntoEndpoint > trackIntoEndpoint;
-        } else {
-          condition = crsIntoEndpoint < trackIntoEndpoint;
-        }
-      } while (condition);
+      const newDistance = getPreciseDistance(previousFix, targetFix);
+      if (lastDistance <= newDistance && lastDistance < 25) break;
+      lastDistance = newDistance;
     }
   }
 
+  if (!arc) arc = arc2;
+  line.push(...arc);
+
   line.push([targetFix.longitude, targetFix.latitude]);
 
   return [targetFix, line];

browser/src/parser/terminators/VA.ts

@@ -32,6 +32,8 @@ export const TerminatorsVA = (
     speed: speed,
     speedConstraint: leg.SpeedLimit,
     altitudeConstraint: leg.Alt,
+    IsFAF: leg.IsFAF,
+    IsMAP: leg.IsMAP,
   };
   line.push([targetFix.longitude, targetFix.latitude]);
 

browser/src/parser/terminators/VD.ts

@@ -1,6 +1,6 @@
 import computeDestinationPoint from 'geolib/es/computeDestinationPoint';
-import getDistance from 'geolib/es/getDistance';
 import getGreatCircleBearing from 'geolib/es/getGreatCircleBearing';
+import getPreciseDistance from 'geolib/es/getPreciseDistance';
 import { generateOverflyArc } from '../pathGenerators/generateOverflyArc';
 import { computeSpeed } from '../utils/computeSpeed';
 
@@ -24,7 +24,7 @@ export const TerminatorsVD = (
 
   // Compute distance to fly from arc end
   const crsToNavaid = getGreatCircleBearing(arcEnd, navaid);
-  const distToNavaid = getDistance(arcEnd, navaid);
+  const distToNavaid = getPreciseDistance(arcEnd, navaid);
   let remainingDistance = leg.Distance.toMetre();
   // Navaid behind us
   if (Math.abs(crsToNavaid - lastCourse) > 90) {
@@ -45,6 +45,8 @@ export const TerminatorsVD = (
     speed: speed,
     speedConstraint: leg.SpeedLimit,
     altitudeConstraint: leg.Alt,
+    IsFAF: leg.IsFAF,
+    IsMAP: leg.IsMAP,
   };
   line.push([targetFix.longitude, targetFix.latitude]);
 

browser/src/parser/terminators/VI.ts

@@ -1,10 +1,10 @@
+import computeDestinationPoint from 'geolib/es/computeDestinationPoint';
 import getGreatCircleBearing from 'geolib/es/getGreatCircleBearing';
 import Parser from '../parser';
 import { computeIntersection } from '../utils/computeIntersection';
 import { computeSpeed } from '../utils/computeSpeed';
 import { computeTurnRate } from '../utils/computeTurnRate';
 import { getCourseAndFixForIntercepts } from '../utils/getCourseAndFixForIntercepts';
-import computeDestinationPoint from 'geolib/es/computeDestinationPoint';
 
 // NOTE: No wind adjustments to be made, no clue how *that* would draw
 export const TerminatorsVI = (
@@ -35,12 +35,12 @@ export const TerminatorsVI = (
       let time = 0;
       if (leg.TurnDir === 'R') {
         const delta = (crsIntoEndpoint - lastCourse).normaliseDegrees();
-        const increment = delta < 1 ? delta : 1;
+        const increment = delta < 0.1 ? delta : 0.1;
         lastCourse = (lastCourse + increment).normaliseDegrees();
         time = increment / turnRate;
       } else {
         const delta = (lastCourse - crsIntoEndpoint).normaliseDegrees();
-        const increment = delta < 1 ? delta : 1;
+        const increment = delta < 0.1 ? delta : 0.1;
         lastCourse = (lastCourse - increment).normaliseDegrees();
         time = increment / turnRate;
       }
@@ -69,6 +69,8 @@ export const TerminatorsVI = (
     speed: speed,
     speedConstraint: leg.SpeedLimit,
     altitudeConstraint: leg.Alt,
+    IsFAF: leg.IsFAF,
+    IsMAP: leg.IsMAP,
   };
 
   line.push([interceptFix.longitude, interceptFix.latitude]);

browser/src/parser/terminators/VR.ts

@@ -28,6 +28,8 @@ export const TerminatorsVR = (
     speed: speed,
     speedConstraint: leg.SpeedLimit,
     altitudeConstraint: leg.Alt,
+    IsFAF: leg.IsFAF,
+    IsMAP: leg.IsMAP,
   };
 
   line.push([interceptFix.longitude, interceptFix.latitude]);

browser/src/parser/utils/computeIntersection.ts

@@ -5,7 +5,12 @@
  * @param brng2 bearing from Point 2
  * @returns Intersection point
  */
-export const computeIntersection = (p1: NavFix, brng1: number, p2: NavFix, brng2: number): NavFix | undefined => {
+export const computeIntersection = (
+  p1: NavFix,
+  brng1: number,
+  p2: NavFix,
+  brng2: number
+): NavFix | undefined | null => {
   if (isNaN(brng1)) throw new TypeError(`invalid brng1 ${brng1}`);
   if (isNaN(brng2)) throw new TypeError(`invalid brng2 ${brng2}`);
 
@@ -43,7 +48,7 @@ export const computeIntersection = (p1: NavFix, brng1: number, p2: NavFix, brng2
   const α2 = θ21 - θ23; // angle 1-2-3
 
   if (Math.sin(α1) == 0 && Math.sin(α2) == 0) return undefined; // infinite intersections
-  if (Math.sin(α1) * Math.sin(α2) < 0) return undefined; // ambiguous intersection (antipodal/360°)
+  if (Math.sin(α1) * Math.sin(α2) < 0) return p2; // ambiguous intersection (antipodal/360°)
 
   const cosα3 = -Math.cos(α1) * Math.cos(α2) + Math.sin(α1) * Math.sin(α2) * Math.cos(δ12);
 

browser/src/style.css

@@ -1 +1,15 @@
 @import 'tailwindcss';
+
+@theme {
+  --animate-fade-in-scale: fade-in-scale 0.3s ease-out;
+  @keyframes fade-in-scale {
+    0% {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+    100% {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+}

browser/src/types/navdata.d.ts

@@ -75,6 +75,7 @@ export declare global {
     ICAO: string;
     FullName: string;
     RwyID?: number;
+    Proc: 1 | 2 | 3;
   };
 
   type NavFix = {
@@ -84,9 +85,10 @@ export declare global {
     speed?: number;
     name?: string;
     isFlyOver?: boolean;
-    'marker-color'?: string;
     altitudeConstraint?: string;
     speedConstraint?: number;
+    IsFAF?: boolean;
+    IsMAP?: boolean;
     // For map
     isIntersection?: boolean;
   };