From 00f1faa67e3df04821362d682b8121c2fb603c38 Mon Sep 17 00:00:00 2001
From: Brandon Liu <bdon@users.noreply.github.com>
Date: Mon, 5 Feb 2024 17:10:40 +0800
Subject: [PATCH] fix loading of TileJSON in viewer (#217)

* fix loading of TileJSON in viewer
---
 app/src/MapViewComponent.tsx      | 14 ++++++++------
 app/test/MapViewComponent.test.ts | 14 ++++++++------
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/app/src/MapViewComponent.tsx b/app/src/MapViewComponent.tsx
index e2e90c1d..7894a944 100644
--- a/app/src/MapViewComponent.tsx
+++ b/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";
diff --git a/app/test/MapViewComponent.test.ts b/app/test/MapViewComponent.test.ts
index d3d3e46a..ade43184 100644
--- a/app/test/MapViewComponent.test.ts
+++ b/app/test/MapViewComponent.test.ts
@@ -1,10 +1,12 @@
-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);
 });