Merge pull request #1016 from ZeLonewolf/zlw-poi-ts

Convert POI handling code to Typescript and add error check and null pointer yak shave

shieldlib/src/shield.js

@@ -165,6 +165,11 @@ function refForDefs(routeDef, shieldDef) {
 }
 
 function getShieldDef(shields, routeDef) {
+  if (!shields) {
+    //This occurs if the ShieldJSON is loaded from the network and hasn't loaded yet.
+    return null;
+  }
+
   var shieldDef = shields[routeDef.network];
 
   if (routeDef == null) {

shieldlib/src/shield_renderer.ts

@@ -70,7 +70,7 @@ class MaplibreGLSpriteRepository implements SpriteRepository {
     options: StyleImageMetadata,
     update: boolean
   ): void {
-    if (update) {
+    if (update && this.map.listImages().includes(spriteID)) {
       this.map.removeImage(spriteID);
       this.map.addImage(spriteID, image);
     } else {
@@ -106,6 +106,7 @@ export class AbstractShieldRenderer {
     this._renderContext.options = shieldSpec.options;
     this._renderContext.shieldDef = shieldSpec.networks;
     this._fontSpec = "1em " + shieldSpec.options.shieldFont;
+    console.log("ShieldJSON loaded");
     if (this._map) {
       this.reloadShieldsOnFontLoad();
     }
@@ -245,7 +246,7 @@ export class AbstractShieldRenderer {
   }
 
   /** Get a blank route shield graphics context in a specified size */
-  public createGraphics(bounds: Bounds) {
+  public createGraphics(bounds: Bounds): CanvasRenderingContext2D {
     return this._renderContext.gfxFactory.createGraphics(bounds);
   }
 

src/js/poi.ts

@@ -0,0 +1,66 @@
+import {
+  transposeImageData,
+  AbstractShieldRenderer,
+} from "@americana/maplibre-shield-generator";
+import { Map, MapStyleImageMissingEvent, StyleImage } from "maplibre-gl";
+
+export function missingIconHandler(
+  shieldRenderer: AbstractShieldRenderer,
+  map: Map,
+  e: MapStyleImageMissingEvent
+) {
+  try {
+    missingIconLoader(shieldRenderer, map, e);
+  } catch (err) {
+    console.error(`Exception while loading image ‘${e?.id}’:\n`, err);
+  }
+}
+
+export function missingIconLoader(
+  shieldRenderer: AbstractShieldRenderer,
+  map: Map,
+  e: MapStyleImageMissingEvent
+) {
+  const sprite: string = e.id.split("\n")[1].split("=")[1];
+  const color: string = e.id.split("\n")[2].split("=")[1];
+
+  const sourceSprite: StyleImage = map.style.getImage(sprite);
+
+  if (!sourceSprite) {
+    console.error(`No such sprite ${sprite}`);
+    return;
+  }
+
+  const width: number = sourceSprite.data.width;
+  const height: number = sourceSprite.data.height;
+
+  let ctx: CanvasRenderingContext2D = shieldRenderer.createGraphics({
+    width,
+    height,
+  });
+  transposeImageData(ctx, sourceSprite, 0, false, color);
+
+  if (ctx == null) {
+    // Want to return null here, but that gives a corrupted display. See #243
+    console.warn("Didn't produce an icon for", JSON.stringify(e.id));
+    ctx = shieldRenderer.createGraphics({ width: 1, height: 1 });
+  }
+
+  const imgData: ImageData = ctx.getImageData(
+    0,
+    0,
+    ctx.canvas.width,
+    ctx.canvas.height
+  );
+  map.addImage(
+    e.id,
+    {
+      width: ctx.canvas.width,
+      height: ctx.canvas.height,
+      data: imgData.data,
+    },
+    {
+      pixelRatio: shieldRenderer.pixelRatio(),
+    }
+  );
+}