diff --git a/app/src/MapViewComponent.tsx b/app/src/MapViewComponent.tsx
index ad0a5aa0..e2e90c1d 100644
--- a/app/src/MapViewComponent.tsx
+++ b/app/src/MapViewComponent.tsx
@@ -66,6 +66,14 @@ const FeaturesProperties = (props: { features: MapGeoJSONFeature[] }) => {
   );
 };
 
+export const isValidTiles = (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"))
+    return true;
+  return false;
+};
+
 function getMaplibreStyle(
   theme: string,
   tiles?: string,
@@ -75,10 +83,7 @@ function getMaplibreStyle(
   maxZoom?: number,
 ): StyleSpecification {
   let tilesWithProtocol = tiles;
-  if (
-    tilesWithProtocol &&
-    new URL(tilesWithProtocol).pathname.endsWith(".pmtiles")
-  ) {
+  if (isValidTiles(tiles)) {
     tilesWithProtocol = `pmtiles://${tiles}`;
   }
   const style = {
diff --git a/app/test/MapViewComponent.test.ts b/app/test/MapViewComponent.test.ts
new file mode 100644
index 00000000..d3d3e46a
--- /dev/null
+++ b/app/test/MapViewComponent.test.ts
@@ -0,0 +1,10 @@
+import { isValidTiles } 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);
+});