From 0053c86652dc4728ae210e5eb71a2c097ec07126 Mon Sep 17 00:00:00 2001
From: Brandon Liu <bdon@bdon.org>
Date: Mon, 8 May 2023 14:00:27 +0800
Subject: [PATCH] viewer app: raster overlays show vector basemap

---
 app/src/MaplibreMap.tsx | 30 +++++++++++++++++++++++-------
 1 file changed, 23 insertions(+), 7 deletions(-)

diff --git a/app/src/MaplibreMap.tsx b/app/src/MaplibreMap.tsx
index 45a7aba..33eda26 100644
--- a/app/src/MaplibreMap.tsx
+++ b/app/src/MaplibreMap.tsx
@@ -160,6 +160,20 @@ const LayersVisibilityController = (props: {
 
 const rasterStyle = async (file: PMTiles): Promise<any> => {
   let header = await file.getHeader();
+  let metadata = await file.getMetadata();
+  let layers: any[] = [];
+
+  if (metadata.type !== "baselayer") {
+    layers = base_theme("basemap", "black");
+    layers[0].paint["background-color"] = "black";
+  }
+
+  layers.push({
+    id: "raster",
+    type: "raster",
+    source: "source",
+  });
+
   return {
     version: 8,
     sources: {
@@ -169,14 +183,16 @@ const rasterStyle = async (file: PMTiles): Promise<any> => {
         minzoom: header.minZoom,
         maxzoom: header.maxZoom,
       },
-    },
-    layers: [
-      {
-        id: "raster",
-        type: "raster",
-        source: "source",
+      basemap: {
+        type: "vector",
+        tiles: [
+          "https://api.protomaps.com/tiles/v2/{z}/{x}/{y}.pbf?key=1003762824b9687f",
+        ],
+        maxzoom: 14,
       },
-    ],
+    },
+    glyphs: "https://cdn.protomaps.com/fonts/pbf/{fontstack}/{range}.pbf",
+    layers: layers,
   };
 };