inspector: display basemap for overlay vector datasets

app/src/MaplibreMap.tsx

@@ -7,6 +7,13 @@ import maplibregl from "maplibre-gl";
 import { MapGeoJSONFeature } from "maplibre-gl";
 import "maplibre-gl/dist/maplibre-gl.css";
 import { schemeSet3 } from "d3-scale-chromatic";
+import base_theme from "protomaps-themes-base";
+
+maplibregl.setRTLTextPlugin(
+  "https://unpkg.com/@mapbox/mapbox-gl-rtl-text@0.2.3/mapbox-gl-rtl-text.min.js",
+  () => {},
+  true
+);
 
 const MapContainer = styled("div", {
   height: "calc(100vh - $4 - $4)",
@@ -94,6 +101,11 @@ const vectorStyle = async (file: PMTiles): Promise<any> => {
   let metadata = await file.getMetadata();
   let layers: any[] = [];
 
+  if (metadata.type !== "baselayer") {
+    layers = base_theme("basemap", "dark");
+    layers[0].paint["background-color"] = "black";
+  }
+
   var tilestats: any;
   var vector_layers: any;
   if (metadata.json) {
@@ -143,12 +155,14 @@ const vectorStyle = async (file: PMTiles): Promise<any> => {
   }
 
   for (let layer of layers) {
-    if (layer["source-layer"] === "mask" && layer['type'] === 'fill') {
+    if (layer["source-layer"] === "mask" && layer["type"] === "fill") {
       layer.paint["fill-color"] = "black";
       layer.paint["fill-opacity"] = 0.8;
     }
   }
 
+  const bounds = [header.minLon, header.minLat, header.maxLon, header.maxLat];
+
   return {
     version: 8,
     sources: {
@@ -157,8 +171,18 @@ const vectorStyle = async (file: PMTiles): Promise<any> => {
         tiles: ["pmtiles://" + file.source.getKey() + "/{z}/{x}/{y}"],
         minzoom: header.minZoom,
         maxzoom: header.maxZoom,
+        bounds: bounds,
+      },
+      basemap: {
+        type: "vector",
+        tiles: [
+          "https://api.protomaps.com/tiles/v2/{z}/{x}/{y}.pbf?key=1003762824b9687f",
+        ],
+        maxzoom: 14,
+        bounds: bounds,
       },
     },
+    glyphs: "https://cdn.protomaps.com/fonts/pbf/{fontstack}/{range}.pbf",
     layers: layers,
   };
 };
@@ -221,7 +245,12 @@ function MaplibreMap(props: { file: PMTiles }) {
         return;
       }
       var bbox = e.point;
+
       var features = map.queryRenderedFeatures(bbox);
+
+      // ignore the basemap
+      features = features.filter((feature) => feature.source === "source");
+
       map.getCanvas().style.cursor = features.length ? "pointer" : "";
 
       let content = renderToString(<FeaturesProperties features={features} />);