fix loading of TileJSON in viewer

Author: bdon

app/src/MapViewComponent.tsx

@@ -66,7 +66,7 @@ const FeaturesProperties = (props: { features: MapGeoJSONFeature[] }) => {
   );
 };
 
-export const isValidTiles = (tiles?: string): boolean => {
+export const isValidPMTiles = (tiles?: string): boolean => {
   if (!tiles) return false;
   if (!tiles.startsWith("http") && tiles.endsWith(".pmtiles")) return true;
   if (tiles.startsWith("http") && new URL(tiles).pathname.endsWith(".pmtiles"))
@@ -82,16 +82,18 @@ function getMaplibreStyle(
   minZoom?: number,
   maxZoom?: number,
 ): StyleSpecification {
-  let tilesWithProtocol = tiles;
-  if (isValidTiles(tiles)) {
-    tilesWithProtocol = `pmtiles://${tiles}`;
-  }
   const style = {
     version: 8 as unknown,
     sources: {},
     layers: [],
   } as StyleSpecification;
-  if (!tilesWithProtocol) return style;
+  if (!tiles) return style;
+  let tilesWithProtocol: string;
+  if (isValidPMTiles(tiles)) {
+    tilesWithProtocol = `pmtiles://${tiles}`;
+  } else {
+    tilesWithProtocol = tiles;
+  }
   style.layers = [];
   style.glyphs =
     "https://protomaps.github.io/basemaps-assets/fonts/{fontstack}/{range}.pbf";

app/test/MapViewComponent.test.ts

@@ -1,10 +1,10 @@
-import { isValidTiles } from "src/MapViewComponent";
+import { isValidPMTiles } from "src/MapViewComponent";
 import { expect, test } from "vitest";
 
 test("checks valid tiles value", () => {
-  expect(isValidTiles("local.pmtiles")).toBe(true);
-  expect(isValidTiles("http://example.com/remote.pmtiles")).toBe(true);
-  expect(isValidTiles("http://example.com/remote.pmtiles?abc=def")).toBe(true);
-  expect(isValidTiles("invalid")).toBe(false);
-  expect(isValidTiles("invalid.pmtiles?abc=def")).toBe(false);
+  expect(isValidPMTiles("local.pmtiles")).toBe(true);
+  expect(isValidPMTiles("http://example.com/remote.pmtiles")).toBe(true);
+  expect(isValidPMTiles("http://example.com/remote.pmtiles?abc=def")).toBe(true);
+  expect(isValidPMTiles("invalid")).toBe(false);
+  expect(isValidPMTiles("invalid.pmtiles?abc=def")).toBe(false);
 });