add Vite-based app for example TypeScript application

app/src/App.tsx

@@ -0,0 +1,36 @@
+import { useState, useEffect } from "react";
+import { styled, globalStyles } from "./stitches.config";
+
+import Start from "./Start";
+import Inspector from "./Inspector";
+import LeafletMap from "./LeafletMap";
+import MaplibreMap from "./MaplibreMap";
+
+const Header = styled("div", {
+  height: "$4",
+});
+
+function App() {
+  globalStyles();
+
+  const existingValue = new URLSearchParams(location.search).get("file") || "";
+
+  let [file, setFile] = useState<string>(existingValue);
+
+  useEffect(() => {
+    if (file) {
+      const url = new URL(window.location.href);
+      url.searchParams.set("file", file);
+      history.pushState(null, "", url.toString());
+    }
+  }, [file]);
+
+  return (
+    <div>
+      <Header>pmtiles viewer | github | toggle</Header>
+      {file ? <MaplibreMap file={file} /> : <Start setFile={setFile} />}
+    </div>
+  );
+}
+
+export default App;

app/src/Inspector.tsx

@@ -0,0 +1,13 @@
+import { useState } from "react";
+import { PMTiles } from "../../js";
+import { styled } from "./stitches.config";
+
+function Inspector() {
+  return (
+    <>
+    foo
+    </>
+  );
+}
+
+export default Inspector;

app/src/LeafletMap.tsx

@@ -0,0 +1,31 @@
+import { useState, useEffect } from "react";
+import { PMTiles, leafletLayer } from "../../js";
+import { styled } from "./stitches.config";
+import L from "leaflet";
+import "leaflet/dist/leaflet.css";
+
+const MapContainer = styled("div", {
+  height: "calc(100vh - $4)",
+});
+
+function LeafletMap(props:{file:string}) {
+  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, {
+      attribution:
+        '© <a href="https://openstreetmap.org">OpenStreetMap</a> contributors',
+    }).addTo(map);
+
+    return () => {
+      map.remove();
+    };
+  }, []);
+
+  return <MapContainer id="map"></MapContainer>;
+}
+
+export default LeafletMap;

app/src/MaplibreMap.tsx

@@ -0,0 +1,58 @@
+import { useState, useEffect } from "react";
+import { PMTiles, ProtocolCache } from "../../js";
+import { styled } from "./stitches.config";
+import maplibregl from "maplibre-gl";
+import "maplibre-gl/dist/maplibre-gl.css"
+
+const MapContainer = styled("div", {
+  height: "calc(100vh - $4)",
+});
+
+function MaplibreMap(props:{file:string}) {
+  let cache = new ProtocolCache();
+  maplibregl.addProtocol("pmtiles",cache.protocol);
+
+  var style = {
+      "version": 8,
+      "sources": {
+          "zcta": {
+              "type": "vector",
+              "tiles": ["pmtiles://" + props.file + "/{z}/{x}/{y}"],
+              "maxzoom":7
+          }
+      },
+      "layers": [
+          {
+              "id": "zcta_fill",
+              "type": "fill",
+              "source":"zcta",
+              "source-layer":"zcta",
+              "paint": {
+                  "fill-color":"white"
+              }
+          },
+          {
+              "id": "zcta_stroke",
+              "type": "line",
+              "source":"zcta",
+              "source-layer":"zcta",
+              "paint": {
+                  "line-color":"steelblue",
+                  "line-width":0.5
+              }
+          }
+      ]
+  }
+
+  useEffect(() => {
+    const map = new maplibregl.Map({container:"map",zoom:3,center:[-101.43,44.34],style:style as any}); // TODO maplibre types
+
+    return () => {
+      map.remove();
+    };
+  }, []);
+
+  return <MapContainer id="map"></MapContainer>;
+}
+
+export default MaplibreMap;

app/src/Start.tsx

@@ -0,0 +1,147 @@
+import { useState, Dispatch, SetStateAction } from "react";
+import maplibregl from "maplibre-gl";
+import L from "leaflet";
+import { PMTiles } from "../../js";
+import { styled } from "./stitches.config";
+import { useDropzone } from "react-dropzone";
+
+import * as LabelPrimitive from "@radix-ui/react-label";
+
+const Input = styled("input", {
+  all: "unset",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  fontSize: "$3",
+  fontFamily: "$sans",
+  "&:focus": { boxShadow: `0 0 0 1px black` },
+  width: "100%",
+  border: "1px solid $white",
+  padding: "$1",
+  boxSizing: "border-box",
+  margin: "0 0 $2 0",
+  borderRadius: "$2",
+});
+
+const Label = styled(LabelPrimitive.Root, {
+  display: "block",
+  fontSize: "$3",
+  fontWeight: 300,
+  userSelect: "none",
+  padding: "0 0 $1 0",
+});
+
+const Header = styled("h1", {
+  paddingBottom: "$1",
+  fontWeight: 500,
+});
+
+const Container = styled("div", {
+  maxWidth: 780,
+  marginLeft: "auto",
+  marginRight: "auto",
+  padding: "$3",
+});
+
+const Button = styled("button", {
+  padding: "$1 $2",
+  borderRadius: "$2",
+  cursor: "pointer",
+  variants: {
+    color: {
+      violet: {
+        backgroundColor: "blueviolet",
+        color: "white",
+        "&:hover": {
+          backgroundColor: "darkviolet",
+        },
+      },
+      gray: {
+        backgroundColor: "gainsboro",
+        "&:hover": {
+          backgroundColor: "lightgray",
+        },
+      },
+    },
+  },
+});
+
+const Dropzone = styled("div", {
+  padding: "$2",
+  border: "1px dashed $white",
+  textAlign: "center",
+  margin: "0 0 $2 0",
+});
+
+const Example = styled("div", {
+  padding: "$1",
+  "&:not(:last-child)": {
+    borderBottom: "1px solid $white",
+  },
+  "&:hover": {
+    backgroundColor: "$white",
+  },
+  variants: {
+    selected: {
+      true: {
+        backgroundColor:"red"
+      }
+    }
+  }
+});
+
+const ExampleList = styled("div", {
+  borderRadius: "$1",
+  border: "1px solid $white",
+  margin: "0 0 $2 0",
+});
+
+const EXAMPLE_FILES = [
+  "https://protomaps-static.sfo3.digitaloceanspaces.com/osm_carto.pmtiles"
+]
+
+function Start(props:{setFile:Dispatch<SetStateAction<string>>}) {
+
+  const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
+
+  let [remoteUrl, setRemoteUrl] = useState<string>("");
+  let [selectedExample, setSelectedExample] = useState<number | null>(1);
+
+  const onRemoteUrlChangeHandler = (event:React.ChangeEvent<HTMLInputElement>) => {
+    setRemoteUrl(event.target.value);
+  }
+
+  const loadExample = (i:number) => {
+    return () => {
+      props.setFile(EXAMPLE_FILES[i]);
+    }
+  }
+
+  const onSubmit = () => {
+    props.setFile("abcd");
+  }
+
+  return (
+    <Container>
+      <Header>PMTiles Viewer</Header>
+      <Label htmlFor="remoteUrl">Specify a remote URL</Label>
+      <Input
+        id="remoteUrl"
+        placeholder="https://example.com/my_archive.pmtiles"
+        onChange={onRemoteUrlChangeHandler}
+      ></Input>
+      <Button color="gray" onClick={onSubmit}>Load</Button>
+      <Label htmlFor="localFile">Select a local file</Label>
+      <Dropzone {...getRootProps()}>
+        <input {...getInputProps()} />
+        <p>Drag + drop a file here, or click to select</p>
+      </Dropzone>
+      <Label>Load an example</Label>
+      <ExampleList>
+        {EXAMPLE_FILES.map((e,i) => <Example key={i} onClick={loadExample(i)}>{e}</Example>)}
+      </ExampleList>
+    </Container>
+  );
+}
+
+export default Start;

app/src/main.tsx

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

app/src/stitches.config.ts

@@ -0,0 +1,54 @@
+import { createStitches, globalCss } from "@stitches/react";
+
+export const { styled } = createStitches({
+	theme: {
+		colors: {
+			black: "rgba(0, 0, 0)",
+			white: "rgba(236, 237, 238)",
+		},
+		fonts: {
+			sans: "Inter, sans-serif",
+		},
+		fontSizes: {
+			1: "12px",
+			2: "14px",
+			3: "16px",
+			4: "20px",
+			5: "24px",
+			6: "32px",
+		},
+		space: {
+			1: "10px",
+			2: "20px",
+			3: "40px",
+		},
+		sizes: {
+			1: "4px",
+			2: "8px",
+			3: "16px",
+			4: "32px",
+			5: "64px",
+			6: "128px",
+		},
+		radii: {
+			1: "2px",
+			2: "4px",
+			3: "8px",
+			round: "9999px",
+		},
+		fontWeights: {},
+		lineHeights: {},
+		letterSpacings: {},
+		borderWidths: {},
+		borderStyles: {},
+		shadows: {},
+		zIndices: {},
+		transitions: {},
+	},
+});
+
+export const globalStyles = globalCss({
+	"*": { 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')"],
+});

app/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />