app updates

app/package.json

@@ -4,12 +4,18 @@
   "version": "0.0.0",
   "scripts": {
     "dev": "vite",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "tsc": "tsc --watch"
   },
   "dependencies": {
     "@mapbox/vector-tile": "^1.3.1",
+    "@radix-ui/react-dialog": "^0.1.7",
+    "@radix-ui/react-icons": "^1.1.0",
     "@radix-ui/react-label": "^0.1.5",
+    "@radix-ui/react-toolbar": "^0.1.5",
     "@stitches/react": "^1.2.8",
+    "d3-path": "^3.0.1",
+    "d3-scale-chromatic": "^3.0.0",
     "leaflet": "^1.8.0",
     "maplibre-gl": "^2.1.9",
     "pako": "^2.0.4",
@@ -20,8 +26,11 @@
     "react-dropzone": "^14.1.1"
   },
   "devDependencies": {
+    "@types/d3-path": "^3.0.0",
+    "@types/d3-scale-chromatic": "^3.0.0",
     "@types/leaflet": "^1.7.9",
     "@types/mapbox__vector-tile": "^1.3.0",
+    "@types/pako": "^1.0.3",
     "@types/pbf": "^3.0.2",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",

app/src/App.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect } from "react";
 import { styled, globalStyles } from "./stitches.config";
+import { PMTiles } from "../../js";
 
 import Start from "./Start";
 import Loader from "./Loader";
@@ -8,26 +9,37 @@ const Header = styled("div", {
   height: "$4",
 });
 
-const GIT_SHA = (import.meta.env.VITE_GIT_SHA || "").substr(0,8)
+const GIT_SHA = (import.meta.env.VITE_GIT_SHA || "").substr(0, 8);
 
 function App() {
   globalStyles();
 
-  const existingValue = new URLSearchParams(location.search).get("file") || "";
+  let initialValue;
+  const loadUrl = new URLSearchParams(location.search).get("url");
+  if (loadUrl) {
+    initialValue = new PMTiles(loadUrl);
+  }
 
-  let [file, setFile] = useState<string>(existingValue);
+  let [file, setFile] = useState<PMTiles | undefined>(initialValue);
 
   useEffect(() => {
     if (file) {
       const url = new URL(window.location.href);
-      url.searchParams.set("file", file);
+      url.searchParams.set("url", file.source.getKey());
       history.pushState(null, "", url.toString());
     }
   }, [file]);
 
+  let clear = () => {
+    setFile(undefined);
+  };
+
   return (
     <div>
-      <Header>pmtiles viewer | github | toggle | {GIT_SHA}</Header>
+      <Header>
+        <span onClick={clear}>pmtiles viewer</span> | github | toggle |{" "}
+        {GIT_SHA}
+      </Header>
       {file ? <Loader file={file} /> : <Start setFile={setFile} />}
     </div>
   );

app/src/Inspector.tsx

@@ -1,12 +1,291 @@
-import { useState } from "react";
+import { useState, useEffect, Dispatch, SetStateAction } from "react";
-import { PMTiles } from "../../js";
+import { createPortal } from "react-dom";
+import { PMTiles, Entry } from "../../js";
 import { styled } from "./stitches.config";
+import { inflate } from "pako";
+import Protobuf from "pbf";
+import { VectorTile, VectorTileFeature } from "@mapbox/vector-tile";
+import { path } from "d3-path";
+import { schemeSet3 } from "d3-scale-chromatic";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
 
-function Inspector(props:{file:string}) {
+const TableContainer = styled("div", {
+  height: "calc(100vh - $4)",
+  overflowY: "scroll",
+  width: "50%",
+});
+
+const Pane = styled("div", {
+  width: "50%",
+  backgroundColor: "black",
+});
+
+const TableRow = styled(
+  "tr",
+  {
+    cursor: "pointer",
+  },
+  { "&:hover": { color: "red" } }
+);
+
+const Split = styled("div", {
+  display: "flex",
+});
+
+const TileRow = (props: {
+  entry: Entry;
+  setSelectedEntry: Dispatch<SetStateAction<Entry | null>>;
+}) => {
   return (
-    <>
+    <TableRow
-    foo
+      onClick={() => {
-    </>
+        props.setSelectedEntry(props.entry);
+      }}
+    >
+      <td>{props.entry.z}</td>
+      <td>{props.entry.x}</td>
+      <td>{props.entry.y}</td>
+      <td>{props.entry.offset}</td>
+      <td>{props.entry.length}</td>
+      <td>{props.entry.is_dir}</td>
+    </TableRow>
+  );
+};
+
+interface Layer {
+  name: string;
+  features: Feature[];
+}
+
+interface Feature {
+  path: string;
+  type: number;
+  id: number;
+  properties: any;
+}
+
+let smartCompare = (a: Layer, b: Layer): number => {
+  if (a.name === "earth") return -4;
+  if (a.name === "water") return -3;
+  if (a.name === "natural") return -2;
+  if (a.name === "landuse") return -1;
+  if (a.name === "places") return 1;
+  return 0;
+};
+
+const FeatureSvg = (props: {
+  feature: Feature;
+  setSelectedFeature: Dispatch<SetStateAction<Feature | null>>;
+}) => {
+  let [highlighted, setHighlighted] = useState(false);
+  let fill = "none";
+  let stroke = "";
+
+  if (props.feature.type === 3) {
+    fill = highlighted ? "white" : "currentColor";
+  } else {
+    stroke = highlighted ? "white" : "currentColor";
+  }
+
+  let mouseOver = () => {
+    setHighlighted(true);
+  };
+
+  let mouseOut = () => {
+    setHighlighted(false);
+  };
+
+  let mouseDown = () => {
+    props.setSelectedFeature(props.feature);
+  };
+
+  return (
+    <path
+      d={props.feature.path}
+      stroke={stroke}
+      strokeWidth={10}
+      fill={fill}
+      fillOpacity={0.5}
+      onMouseOver={mouseOver}
+      onMouseOut={mouseOut}
+      onMouseDown={mouseDown}
+    ></path>
+  );
+};
+
+const LayerSvg = (props: {
+  layer: Layer;
+  color: string;
+  setSelectedFeature: Dispatch<SetStateAction<Feature | null>>;
+}) => {
+  let elems = props.layer.features.map((f, i) => (
+    <FeatureSvg
+      key={i}
+      feature={f}
+      setSelectedFeature={props.setSelectedFeature}
+    ></FeatureSvg>
+  ));
+  return <g color={props.color}>{elems}</g>;
+};
+
+const StyledFeatureProperties = styled("div", {
+  position: "absolute",
+  right: 0,
+  bottom: 0,
+  backgroundColor: "red",
+});
+
+const FeatureProperties = (props: { feature: Feature }) => {
+  let tmp: [string, string][] = [];
+  for (var key in props.feature.properties) {
+    tmp.push([key, props.feature.properties[key]]);
+  }
+
+  const rows = tmp.map((d, i) => (
+    <tr key={i}>
+      <td>{d[0]}</td>
+      <td>{d[1]}</td>
+    </tr>
+  ));
+
+  return <StyledFeatureProperties>{rows}</StyledFeatureProperties>;
+};
+
+const VectorPreview = (props: { file: PMTiles; entry: Entry }) => {
+  let [layers, setLayers] = useState<Layer[]>([]);
+  let [selectedFeature, setSelectedFeature] = useState<Feature | null>(null);
+
+  useEffect(() => {
+    let fn = async (entry: Entry) => {
+      let view = await props.file.source.getBytes(entry.offset, entry.length);
+      let tile = new VectorTile(
+        new Protobuf(
+          new Uint8Array(view.buffer, view.byteOffset, view.byteLength)
+        )
+      );
+      let newLayers = [];
+      for (let [name, layer] of Object.entries(tile.layers)) {
+        let features: Feature[] = [];
+        for (var i = 0; i < layer.length; i++) {
+          let feature = layer.feature(i);
+          let p = path();
+          let geom = feature.loadGeometry();
+
+          if (feature.type === 1) {
+            for (let ring of geom) {
+              for (let pt of ring) {
+                p.arc(pt.x, pt.y, 20, 0, 2 * Math.PI);
+              }
+            }
+          } else {
+            for (let ring of geom) {
+              p.moveTo(ring[0].x, ring[0].y);
+              for (var j = 1; j < ring.length; j++) {
+                p.lineTo(ring[j].x, ring[j].y);
+              }
+              if (feature.type === 3) {
+                p.closePath();
+              }
+            }
+          }
+          features.push({
+            path: p.toString(),
+            type: feature.type,
+            id: feature.id,
+            properties: feature.properties,
+          });
+        }
+        newLayers.push({ features: features, name: name });
+      }
+      newLayers.sort(smartCompare);
+      setLayers(newLayers);
+    };
+
+    if (props.entry) {
+      fn(props.entry);
+    }
+  }, [props.entry]);
+
+  let elems = layers.map((l, i) => (
+    <LayerSvg
+      key={i}
+      layer={l}
+      color={schemeSet3[i % 12]}
+      setSelectedFeature={setSelectedFeature}
+    ></LayerSvg>
+  ));
+
+  return (
+    <div>
+      <svg viewBox="0 0 4096 4096" width={800} height={800}>
+        {elems}
+      </svg>
+      {selectedFeature ? <FeatureProperties feature={selectedFeature} /> : null}
+    </div>
+  );
+};
+
+const RasterPreview = (props: { file: PMTiles; entry: Entry }) => {
+  let [imgSrc, setImageSrc] = useState<string>("");
+
+  useEffect(() => {
+    let fn = async (entry: Entry) => {
+      // TODO 0,0,0 is broken
+      let view = await props.file.source.getBytes(entry.offset, entry.length);
+      let blob = new Blob([view]);
+      var imageUrl = window.URL.createObjectURL(blob);
+      setImageSrc(imageUrl);
+    };
+
+    if (props.entry) {
+      fn(props.entry);
+    }
+  }, [props.entry]);
+
+  return <img src={imgSrc}></img>;
+};
+
+function Inspector(props: { file: PMTiles }) {
+  let [entryRows, setEntryRows] = useState<Entry[]>([]);
+  let [selectedEntry, setSelectedEntry] = useState<Entry | null>(null);
+
+  useEffect(() => {
+    let fn = async () => {
+      let entries = await props.file.root_entries();
+      setEntryRows(entries);
+    };
+
+    fn();
+  }, [props.file]);
+
+  let rows = entryRows.map((e, i) => (
+    <TileRow key={i} entry={e} setSelectedEntry={setSelectedEntry}></TileRow>
+  ));
+
+  let tilePreview = <div></div>;
+  if (selectedEntry) {
+    tilePreview = <VectorPreview file={props.file} entry={selectedEntry} />;
+  } else {
+  }
+
+  return (
+    <Split>
+      <TableContainer>
+        <table>
+          <thead>
+            <tr>
+              <th>z</th>
+              <th>x</th>
+              <th>y</th>
+              <th>offset</th>
+              <th>length</th>
+            </tr>
+          </thead>
+          <tbody>{rows}</tbody>
+        </table>
+      </TableContainer>
+      <Pane>{tilePreview}</Pane>
+    </Split>
   );
 }
 

app/src/LeafletMap.tsx

@@ -8,14 +8,10 @@ const MapContainer = styled("div", {
   height: "calc(100vh - $4)",
 });
 
-function LeafletMap(props:{file:string, tileType: string | null}) {
+function LeafletMap(props: { file: PMTiles; tileType: string | null }) {
-  const p = new PMTiles(
-    "https://protomaps-static.sfo3.digitaloceanspaces.com/osm_carto.pmtiles"
-  );
-
   useEffect(() => {
     const map = L.map("map").setView([0, 0], 0);
-    leafletLayer(p, {
+    leafletLayer(props.file, {
       attribution:
         '© <a href="https://openstreetmap.org">OpenStreetMap</a> contributors',
     }).addTo(map);

app/src/Loader.tsx

@@ -6,28 +6,140 @@ import Inspector from "./Inspector";
 import LeafletMap from "./LeafletMap";
 import MaplibreMap from "./MaplibreMap";
 
-function Loader(props: { file: string }) {
+import { MagnifyingGlassIcon, ImageIcon } from "@radix-ui/react-icons";
-  let [tab, setTab] = useState("maplibre");
+import * as ToolbarPrimitive from "@radix-ui/react-toolbar";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+
+const StyledToolbar = styled(ToolbarPrimitive.Root, {
+  display: "flex",
+  padding: 10,
+  width: "100%",
+  boxSizing: "border-box",
+  minWidth: "max-content",
+  borderRadius: 6,
+  backgroundColor: "white",
+  boxShadow: `0 2px 10px "black"`,
+});
+
+const itemStyles = {
+  all: "unset",
+  flex: "0 0 auto",
+  color: "black",
+  height: 25,
+  padding: "0 5px",
+  borderRadius: 4,
+  display: "inline-flex",
+  fontSize: 13,
+  lineHeight: 1,
+  alignItems: "center",
+  justifyContent: "center",
+  "&:hover": { backgroundColor: "$hover", color: "blue" },
+  "&:focus": { position: "relative", boxShadow: `0 0 0 2px blue` },
+};
+
+const StyledButton = styled(
+  ToolbarPrimitive.Button,
+  {
+    ...itemStyles,
+    paddingLeft: 10,
+    paddingRight: 10,
+    color: "white",
+    backgroundColor: "blue",
+  },
+  { "&:hover": { color: "white", backgroundColor: "red" } }
+);
+
+const StyledLink = styled(
+  ToolbarPrimitive.Link,
+  {
+    ...itemStyles,
+    backgroundColor: "transparent",
+    color: "black",
+    display: "inline-flex",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  { "&:hover": { backgroundColor: "transparent", cursor: "pointer" } }
+);
+
+const StyledSeparator = styled(ToolbarPrimitive.Separator, {
+  width: 1,
+  backgroundColor: "black",
+  margin: "0 10px",
+});
+
+const StyledToggleGroup = styled(ToolbarPrimitive.ToggleGroup, {
+  display: "inline-flex",
+  borderRadius: 4,
+});
+
+const StyledToggleItem = styled(ToolbarPrimitive.ToggleItem, {
+  ...itemStyles,
+  boxShadow: 0,
+  backgroundColor: "white",
+  marginLeft: 2,
+  "&:first-child": { marginLeft: 0 },
+  "&[data-state=on]": { backgroundColor: "red", color: "blue" },
+});
+
+const StyledOverlay = styled(DialogPrimitive.Overlay, {
+  backgroundColor: "black",
+  position: "fixed",
+  inset: 0,
+  opacity: "40%",
+  zIndex: 3,
+});
+
+const StyledContent = styled(DialogPrimitive.Content, {
+  backgroundColor: "white",
+  borderRadius: 6,
+  boxShadow:
+    "hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px",
+  position: "fixed",
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, -50%)",
+  width: "90vw",
+  maxWidth: "450px",
+  maxHeight: "85vh",
+  padding: 25,
+  zIndex: 4,
+  "&:focus": { outline: "none" },
+});
+
+const Toolbar = StyledToolbar;
+const ToolbarButton = StyledButton;
+const ToolbarSeparator = StyledSeparator;
+const ToolbarLink = StyledLink;
+const ToolbarToggleGroup = StyledToggleGroup;
+const ToolbarToggleItem = StyledToggleItem;
+
+function Loader(props: { file: PMTiles }) {
+  let [tab, setTab] = useState("inspector");
   let [tileType, setTileType] = useState<string | null>(null);
+  let [metadata, setMetadata] = useState<[string, string][]>([]);
+  let [modalOpen, setModalOpen] = useState<boolean>(false);
 
   let view;
   if (tab === "leaflet") {
-    view = <LeafletMap file={props.file} tileType={tileType}/>;
+    view = <LeafletMap file={props.file} tileType={tileType} />;
   } else if (tab === "maplibre") {
-    view = <MaplibreMap file={props.file} tileType={tileType}/>;
+    view = <MaplibreMap file={props.file} tileType={tileType} />;
   } else {
     view = <Inspector file={props.file} />;
   }
 
   useEffect(() => {
-    let pmtiles = new PMTiles(props.file);
+    let pmtiles = props.file;
     const fetchData = async () => {
-      let metadata = await pmtiles.metadata();
+      let m = await pmtiles.metadata();
+      let tmp: [string, string][] = [];
+      for (var key in m) {
+        tmp.push([key, m[key]]);
+      }
+      setMetadata(tmp);
 
-      let resp = await fetch(props.file, {
+      let magic = await props.file.source.getBytes(512000, 4);
-        headers: { Range: "bytes=512000-512003" },
-      });
-      let magic = new DataView(await resp.arrayBuffer());
       let b0 = magic.getUint8(0);
       let b1 = magic.getUint8(1);
       let b2 = magic.getUint8(2);
@@ -36,7 +148,7 @@ function Loader(props: { file: string }) {
       if (b0 == 0x89 && b1 == 0x50 && b2 == 0x4e && b3 == 0x47) {
         setTileType("png");
       } else if (b0 == 0xff && b1 == 0xd8 && b2 == 0xff && b3 == 0xe0) {
-        setTileType("jpg")
+        setTileType("jpg");
       } else if (b0 == 0x1f && b1 == 0x8b) {
         setTileType("mvt.gz");
       } else {
@@ -46,10 +158,75 @@ function Loader(props: { file: string }) {
     fetchData();
   }, [props.file]);
 
-  return <>
+  const metadataRows = metadata.map((d, i) => (
-    <div>{props.file} | {tileType}</div>
+    <tr key={i}>
-    {view}
+      <td>{d[0]}</td>
-  </>;
+      <td>{d[1]}</td>
+    </tr>
+  ));
+
+  const closeModal = () => {
+    setModalOpen(false);
+  };
+
+  return (
+    <>
+      <Toolbar aria-label="Formatting options">
+        <ToolbarToggleGroup
+          type="single"
+          defaultValue="center"
+          aria-label="Text alignment"
+          value={tab}
+          onValueChange={setTab}
+        >
+          <ToolbarToggleItem value="inspector" aria-label="Left aligned">
+            <MagnifyingGlassIcon /> Tile Inspector
+          </ToolbarToggleItem>
+          <ToolbarToggleItem value="leaflet" aria-label="Center aligned">
+            Leaflet
+          </ToolbarToggleItem>
+          <ToolbarToggleItem value="maplibre" aria-label="Right aligned">
+            MapLibre
+          </ToolbarToggleItem>
+        </ToolbarToggleGroup>
+        <ToolbarSeparator />
+        <ToolbarLink href="#" target="_blank" css={{ marginRight: 10 }}>
+          {props.file.source.getKey()}
+        </ToolbarLink>
+        <ToolbarButton
+          css={{ marginLeft: "auto" }}
+          onClick={() => setModalOpen(true)}
+        >
+          Metadata
+        </ToolbarButton>
+      </Toolbar>
+
+      <DialogPrimitive.Root open={modalOpen}>
+        <DialogPrimitive.Trigger />
+        <DialogPrimitive.Portal>
+          <StyledOverlay />
+          <StyledContent
+            onEscapeKeyDown={closeModal}
+            onPointerDownOutside={closeModal}
+          >
+            <DialogPrimitive.Title />
+            <DialogPrimitive.Description />
+            <table>
+              <thead>
+                <tr>
+                  <th>key</th>
+                  <th>value</th>
+                </tr>
+              </thead>
+              <tbody>{metadataRows}</tbody>
+            </table>
+            <DialogPrimitive.Close />
+          </StyledContent>
+        </DialogPrimitive.Portal>
+      </DialogPrimitive.Root>
+      {view}
+    </>
+  );
 }
 
 export default Loader;

app/src/MaplibreMap.tsx

@@ -8,33 +8,33 @@ const MapContainer = styled("div", {
   height: "calc(100vh - $4)",
 });
 
-const rasterStyle = (file:string) => {
+const rasterStyle = (file: PMTiles) => {
   return {
     version: 8,
     sources: {
       source: {
         type: "raster",
-        tiles: ["pmtiles://" + file + "/{z}/{x}/{y}"],
+        tiles: ["pmtiles://" + file.source.getKey() + "/{z}/{x}/{y}"],
-        maxzoom:4
+        maxzoom: 4,
       },
     },
     layers: [
       {
         id: "raster",
         type: "raster",
-        source: "source"
+        source: "source",
       },
     ],
   };
 };
 
-const vectorStyle = (file:string) => {
+const vectorStyle = (file: PMTiles) => {
   return {
     version: 8,
     sources: {
       source: {
         type: "vector",
-        tiles: ["pmtiles://" + file + "/{z}/{x}/{y}"],
+        tiles: ["pmtiles://" + file.source.getKey() + "/{z}/{x}/{y}"],
         maxzoom: 7,
       },
     },
@@ -62,11 +62,12 @@ const vectorStyle = (file:string) => {
   };
 };
 
-function MaplibreMap(props: { file: string, tileType: string | null }) {
+function MaplibreMap(props: { file: PMTiles; tileType: string | null }) {
   let mapRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
     let cache = new ProtocolCache();
     maplibregl.addProtocol("pmtiles", cache.protocol);
+    cache.add(props.file);
 
     const map = new maplibregl.Map({
       container: "map",
@@ -74,6 +75,7 @@ function MaplibreMap(props: { file: string, tileType: string | null }) {
       center: [0, 0],
       style: rasterStyle(props.file) as any,
     }); // TODO maplibre types (not any)
+    map.addControl(new maplibregl.NavigationControl({}));
     map.on("load", map.resize);
 
     return () => {

app/src/Start.tsx

@@ -1,7 +1,7 @@
-import { useState, Dispatch, SetStateAction } from "react";
+import { useState, Dispatch, SetStateAction, useCallback } from "react";
 import maplibregl from "maplibre-gl";
 import L from "leaflet";
-import { PMTiles } from "../../js";
+import { PMTiles, FileSource } from "../../js";
 import { styled } from "./stitches.config";
 import { useDropzone } from "react-dropzone";
 
@@ -84,10 +84,10 @@ const Example = styled("div", {
   variants: {
     selected: {
       true: {
-        backgroundColor:"red"
+        backgroundColor: "red",
-      }
+      },
-    }
+    },
-  }
+  },
 });
 
 const ExampleList = styled("div", {
@@ -97,29 +97,40 @@ const ExampleList = styled("div", {
 });
 
 const EXAMPLE_FILES = [
-  "https://protomaps-static.sfo3.digitaloceanspaces.com/osm_carto.pmtiles"
+  "https://protomaps-static.sfo3.digitaloceanspaces.com/osm_carto.pmtiles",
-]
+  "https://protomaps-static.sfo3.digitaloceanspaces.com/mantle-trial.pmtiles",
+  "https://protomaps-static.sfo3.digitaloceanspaces.com/cb_2018_us_zcta510_500k_nolimit.pmtiles",
+];
 
-function Start(props:{setFile:Dispatch<SetStateAction<string>>}) {
+function Start(props: {
+  setFile: Dispatch<SetStateAction<PMTiles | undefined>>;
+}) {
+  const onDrop = useCallback((acceptedFiles: File[]) => {
+    props.setFile(new PMTiles(new FileSource(acceptedFiles[0])));
+  }, []);
 
-  const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
+  const { acceptedFiles, getRootProps, getInputProps } = useDropzone({
+    onDrop,
+  });
 
   let [remoteUrl, setRemoteUrl] = useState<string>("");
   let [selectedExample, setSelectedExample] = useState<number | null>(1);
 
-  const onRemoteUrlChangeHandler = (event:React.ChangeEvent<HTMLInputElement>) => {
+  const onRemoteUrlChangeHandler = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
     setRemoteUrl(event.target.value);
-  }
+  };
 
-  const loadExample = (i:number) => {
+  const loadExample = (i: number) => {
     return () => {
-      props.setFile(EXAMPLE_FILES[i]);
+      props.setFile(new PMTiles(EXAMPLE_FILES[i]));
-    }
+    };
-  }
+  };
 
   const onSubmit = () => {
-    props.setFile("abcd");
+    // props.setFile(new PMTiles("abcd"));
-  }
+  };
 
   return (
     <Container>
@@ -130,7 +141,9 @@ function Start(props:{setFile:Dispatch<SetStateAction<string>>}) {
         placeholder="https://example.com/my_archive.pmtiles"
         onChange={onRemoteUrlChangeHandler}
       ></Input>
-      <Button color="gray" onClick={onSubmit}>Load</Button>
+      <Button color="gray" onClick={onSubmit}>
+        Load
+      </Button>
       <Label htmlFor="localFile">Select a local file</Label>
       <Dropzone {...getRootProps()}>
         <input {...getInputProps()} />
@@ -138,7 +151,11 @@ function Start(props:{setFile:Dispatch<SetStateAction<string>>}) {
       </Dropzone>
       <Label>Load an example</Label>
       <ExampleList>
-        {EXAMPLE_FILES.map((e,i) => <Example key={i} onClick={loadExample(i)}>{e}</Example>)}
+        {EXAMPLE_FILES.map((e, i) => (
+          <Example key={i} onClick={loadExample(i)}>
+            {e}
+          </Example>
+        ))}
       </ExampleList>
     </Container>
   );

app/src/main.tsx

@@ -1,9 +1,9 @@
-import React from 'react'
+import React from "react";
-import ReactDOM from 'react-dom/client'
+import ReactDOM from "react-dom/client";
-import App from './App'
+import App from "./App";
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
+ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>
-)
+);

app/src/stitches.config.ts

@@ -5,6 +5,8 @@ export const { styled } = createStitches({
 		colors: {
 			black: "rgba(0, 0, 0)",
 			white: "rgba(236, 237, 238)",
+			hover: "#666",
+			selected: "#444",
 		},
 		fonts: {
 			sans: "Inter, sans-serif",
@@ -48,7 +50,13 @@ export const { styled } = createStitches({
 });
 
 export const globalStyles = globalCss({
-	"*": { margin: 0, padding: 0, border: 0, fontFamily: "Inter, sans-serif", xborder: "1px solid gold" },
+	"*": {
+		margin: 0,
+		padding: 0,
+		border: 0,
+		fontFamily: "Inter, sans-serif",
+		xborder: "1px solid gold",
+	},
 	body: { backgroundColor: "$black", color: "$white" },
 	"@import": ["url('https://rsms.me/inter/inter.css')"],
 });