Merge pull request #69 from Navigraph/feat/navigraph-leaflet-layer

Author: SkySails

.changeset/strong-meals-grin.md

@@ -0,0 +1,10 @@
+---
+"@navigraph/charts": minor
+---
+
+Added `NavigraphTileLayer`, a Leaflet `TileLayer` that implements Navigraph enroute tiles.
+The aim with this extension is to help developers by making the following features available:
+
+- Switching of source between VFR, IFR and world map
+- Changing of the theme between day and night
+- Automatic handling of credential expiry, with useful hints in the log when something does not look quite right.

packages/auth/src/index.ts

@@ -1,4 +1,4 @@
 export { CancelToken, navigraphRequest, isAxiosError } from "./lib/navigraphRequest";
-export { default as getAuth } from "./lib/getAuth";
+export { default as getAuth, type NavigraphAuth } from "./lib/getAuth";
 export type * from "./flows/device-flow";
 export type { User, UserCallback, Unsubscribe } from "./internals/user";

packages/auth/src/lib/getAuth.ts

@@ -56,6 +56,7 @@ export default function getAuth({ keys, storage }: AuthParameters = {}) {
   const initPromise = loadPersistedCredentials();
 
   return {
+    /** Adds a callback that is called whenever the signe-in user changes. */
     onAuthStateChanged: (callback: UserCallback, initialNotify = true): Unsubscribe => {
       const promise = INITIALIZED ? Promise.resolve() : initPromise;
 
@@ -73,3 +74,5 @@ export default function getAuth({ keys, storage }: AuthParameters = {}) {
     isInitialized: () => INITIALIZED,
   };
 }
+
+export type NavigraphAuth = ReturnType<typeof getAuth>;

packages/charts/package.json

@@ -37,5 +37,11 @@
   "dependencies": {
     "@navigraph/auth": "2.4.0",
     "@navigraph/app": "1.3.3"
+  },
+  "peerDependencies": {
+    "leaflet": "^1.9.4"
+  },
+  "devDependencies": {
+    "@types/leaflet": "^1.9.3"
   }
 }

packages/charts/src/index.ts

@@ -1,5 +1,6 @@
 export * from "./api/types";
 export * from "./api/chartTypeCodes";
 export * from "./util";
+export * from "./lib/NavigraphTileLayer";
 
 export { getChartsAPI } from "./lib/getChartsAPI";

packages/charts/src/lib/NavigraphTileLayer.ts

@@ -0,0 +1,107 @@
+import { Logger, getDefaultAppDomain } from "@navigraph/app";
+import { NavigraphAuth } from "@navigraph/auth";
+import { TileLayer, Coords, DoneCallback } from "leaflet";
+
+export enum NavigraphRasterSource {
+  "IFR HIGH" = "ifr.hi",
+  "IFR LOW" = "ifr.lo",
+  "VFR" = "vfr",
+  "WORLD" = "world",
+}
+
+export type RasterTheme = "DAY" | "NIGHT";
+
+function getNavigraphTileURL(
+  source: keyof typeof NavigraphRasterSource = "VFR",
+  theme: RasterTheme = "DAY",
+  retina = false
+) {
+  return `https://enroute-bitmap.charts.api-v2.${getDefaultAppDomain()}/styles/${NavigraphRasterSource[source]}.${theme.toLowerCase()}/{z}/{x}/{y}${retina ? "@2x" : "{r}"}.png` // prettier-ignore
+}
+
+export interface PresetConfig {
+  source: keyof typeof NavigraphRasterSource;
+  theme: RasterTheme;
+  forceRetina?: boolean;
+}
+
+/**
+ * A Leaflet tile layer that renders Navigraph enroute charts.
+ * @example
+ * ```ts
+ * const navigraphLayer = new NavigraphTileLayer(auth, { source: "IFR HIGH", theme: "NIGHT" });
+ * navigraphLayer.addTo(map);
+ *
+ * navigraphLayer.setPreset({ source: "IFR LOW", theme: "DAY" });
+ * ```
+ */
+export class NavigraphTileLayer extends TileLayer {
+  /** A list of tiles that has failed to load since the last successful tile load. */
+  protected FAILED_TILES = new Set<string>();
+
+  /** Indicates whether map tiles failed to load due to authentication being invalid or missing. */
+  private isMissingAuth = false;
+
+  constructor(public auth: NavigraphAuth, public preset: PresetConfig = { source: "VFR", theme: "DAY" }) {
+    super(getNavigraphTileURL(preset.source, preset.theme, preset.forceRetina));
+
+    auth.onAuthStateChanged((user) => {
+      if (this.isMissingAuth && user) {
+        this.redraw();
+        this.isMissingAuth = false;
+      }
+    });
+
+    if (!this.auth.isInitialized()) {
+      Logger.warning(
+        "NavigraphLayer was created before Navigraph Auth was initialized. Tiles may fail to load until a user is signed in."
+      );
+    }
+  }
+
+  /**
+   * Changes the preset that the map is rendering. Automatically rerenders the map.
+   * @param preset The base style of the map tiles.
+   * @param theme The color theme of the map tiles.
+   * @example
+   * ```ts
+   * navigraphLayer.setPreset({ source: "IFR HIGH", theme: "NIGHT" });
+   * ```
+   */
+  public setPreset(preset: PresetConfig) {
+    this.preset = preset;
+    const newUrl = getNavigraphTileURL(preset.source, preset.theme, preset.forceRetina);
+    this.setUrl(newUrl);
+  }
+
+  protected createTile(coords: Coords, done: DoneCallback): HTMLElement {
+    const url = this.getTileUrl(coords);
+    const img = document.createElement("img");
+
+    img.onerror = () => {
+      Logger.debug("Failed to load tile!");
+
+      this.isMissingAuth = this.auth.getUser() === null;
+      const tileHasFailedBefore = this.FAILED_TILES.has(url);
+
+      if (tileHasFailedBefore || this.isMissingAuth) return;
+
+      Logger.debug("Refreshing auth and tile...");
+      this.FAILED_TILES.add(url);
+      this.auth
+        .getUser(true)
+        .then(() => (img.src = url))
+        .catch(() => (this.isMissingAuth = true));
+    };
+
+    img.onload = () => {
+      done(undefined, img);
+      this.FAILED_TILES.clear();
+      Logger.debug("Loaded tile successfully!");
+    };
+
+    img.src = url;
+
+    return img;
+  }
+}

yarn.lock

@@ -2538,6 +2538,11 @@
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
   integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==
 
+"@types/geojson@*":
+  version "7946.0.10"
+  resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.10.tgz#6dfbf5ea17142f7f9a043809f1cd4c448cb68249"
+  integrity sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA==
+
 "@types/glob@^7.1.1":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.2.0.tgz#bc1b5bf3aa92f25bd5dd39f35c57361bdce5b2eb"
@@ -2616,6 +2621,13 @@
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
 
+"@types/leaflet@^1.9.3":
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/@types/leaflet/-/leaflet-1.9.3.tgz#7aac302189eb3aa283f444316167995df42a5467"
+  integrity sha512-Caa1lYOgKVqDkDZVWkto2Z5JtVo09spEaUt2S69LiugbBpoqQu92HYFMGUbYezZbnBkyOxMNPXHSgRrRY5UyIA==
+  dependencies:
+    "@types/geojson" "*"
+
 "@types/minimatch@*":
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-5.1.2.tgz#07508b45797cb81ec3f273011b054cd0755eddca"