app visual cleanup

app/src/Inspector.tsx

@@ -25,7 +25,7 @@ const Pane = styled("div", {
   justifyContent: "center",
   backgroundSize: "20px 20px",
   backgroundImage:
-    "linear-gradient(to right, #222 1px, transparent 1px),linear-gradient(to bottom, #222 1px, transparent 1px);",
+    "linear-gradient(to right, #111 1px, transparent 1px),linear-gradient(to bottom, #111 1px, transparent 1px);",
 });
 
 const TableRow = styled(
@@ -141,7 +141,8 @@ const StyledFeatureProperties = styled("div", {
   position: "absolute",
   right: 0,
   bottom: 0,
-  backgroundColor: "red",
+  backgroundColor: "$black",
+  padding: "$1"
 });
 
 const FeatureProperties = (props: { feature: Feature }) => {
@@ -302,6 +303,7 @@ function Inspector(props: { file: PMTiles }) {
               <th>y</th>
               <th>offset</th>
               <th>length</th>
+              <th>is directory</th>
             </tr>
           </thead>
           <tbody>{rows}</tbody>

app/src/Loader.tsx

@@ -50,7 +50,7 @@ const StyledLink = styled(
     justifyContent: "center",
     alignItems: "center",
   },
-  { "&:hover": { backgroundColor: "transparent", cursor: "pointer" } }
+  { "&:hover": { backgroundColor: "$hover", color:"$white", cursor: "pointer" } }
 );
 
 const StyledToggleGroup = styled(ToolbarPrimitive.ToggleGroup, {
@@ -63,10 +63,18 @@ const StyledToggleItem = styled(ToolbarPrimitive.ToggleItem, {
   boxShadow: 0,
   backgroundColor: "white",
   marginLeft: 2,
+  cursor: "pointer",
   "&:first-child": { marginLeft: 0 },
-  "&[data-state=on]": { backgroundColor: "$primary", color: "white" },
+  "&[data-state=on]": { backgroundColor: "$primary", color: "$primaryText" },
 });
 
+const MetadataButton = styled(DialogPrimitive.Trigger, {
+  backgroundColor:"$primary",
+  color:"$primaryText",
+  padding:"$1",
+  cursor: "pointer"
+})
+
 const StyledOverlay = styled(DialogPrimitive.Overlay, {
   backgroundColor: "black",
   position: "fixed",
@@ -76,18 +84,36 @@ const StyledOverlay = styled(DialogPrimitive.Overlay, {
 });
 
 const StyledContent = styled(DialogPrimitive.Content, {
-  backgroundColor: "$black",
+  backgroundColor: "#222",
+  padding:"$1",
   borderRadius: 6,
   position: "fixed",
   top: "50%",
   left: "50%",
   transform: "translate(-50%, -50%)",
   width: "90vw",
-  maxWidth: "80vh",
   zIndex: 4,
   "&:focus": { outline: "none" },
 });
 
+const MetadataTable = styled("table", {
+  tableLayout:"fixed",
+  width:"100%"
+});
+
+const MetadataKey = styled("td", {
+  padding: "0 $1"
+});
+
+const MetadataValue = styled("td", {
+  fontFamily:"monospace",
+});
+
+const JsonValue = styled(MetadataValue, {
+  overflowX:"scroll"
+})
+
+
 export const introspectTileType = async (file: PMTiles): Promise<TileType> => {
   let magic = await file.source.getBytes(512000, 4);
   let b0 = magic.getUint8(0);
@@ -139,12 +165,13 @@ function Loader(props: { file: PMTiles }) {
     fetchData();
   }, [props.file]);
 
-  const metadataRows = metadata.map((d, i) => (
-    <tr key={i}>
-      <td>{d[0]}</td>
-      <td>{d[1]}</td>
+  const metadataRows = metadata.map((d, i) => {
+    let Cls = (d[0] === 'json') ? JsonValue : MetadataValue
+    return <tr key={i}>
+      <MetadataKey>{d[0]}</MetadataKey>
+      <Cls>{d[1]}</Cls>
     </tr>
-  ));
+  });
 
   const closeModal = () => {
     setModalOpen(false);
@@ -174,9 +201,9 @@ function Loader(props: { file: PMTiles }) {
           {props.file.source.getKey()}
         </ToolbarLink>
         <DialogPrimitive.Root open={modalOpen}>
-          <DialogPrimitive.Trigger onClick={() => setModalOpen(true)}>
+          <MetadataButton onClick={() => setModalOpen(true)}>
             Metadata
-          </DialogPrimitive.Trigger>
+          </MetadataButton>
           <DialogPrimitive.Portal>
             <StyledOverlay />
             <StyledContent
@@ -185,7 +212,7 @@ function Loader(props: { file: PMTiles }) {
             >
               <DialogPrimitive.Title />
               <DialogPrimitive.Description />
-              <table>
+              <MetadataTable>
                 <thead>
                   <tr>
                     <th>key</th>
@@ -193,7 +220,7 @@ function Loader(props: { file: PMTiles }) {
                   </tr>
                 </thead>
                 <tbody>{metadataRows}</tbody>
-              </table>
+              </MetadataTable>
               <DialogPrimitive.Close />
             </StyledContent>
           </DialogPrimitive.Portal>

app/src/MaplibreMap.tsx

@@ -115,6 +115,12 @@ function MaplibreMap(props: { file: PMTiles }) {
   useEffect(() => {
     let initStyle = async () => {
       if (map) {
+        let metadata = await props.file.metadata();
+        let bounds = metadata.bounds.split(',');
+        map.fitBounds([
+          [+bounds[0], +bounds[1]],
+          [+bounds[2], +bounds[3]],
+        ]);
         let tileType = await introspectTileType(props.file);
         let style: any; // TODO maplibre types (not any)
         if (tileType === TileType.PNG || tileType == TileType.JPG) {

app/src/Start.tsx

@@ -45,6 +45,7 @@ const Container = styled("div", {
 
 const Button = styled("button", {
   padding: "$1 $2",
+  marginBottom:"$1",
   borderRadius: "$2",
   cursor: "pointer",
   variants: {
@@ -79,7 +80,7 @@ const Example = styled("div", {
     borderBottom: "1px solid $white",
   },
   "&:hover": {
-    backgroundColor: "$white",
+    backgroundColor: "$hover",
   },
   variants: {
     selected: {
@@ -142,7 +143,7 @@ function Start(props: {
         onChange={onRemoteUrlChangeHandler}
       ></Input>
       <Button color="gray" onClick={onSubmit}>
-        Load
+        Load URL
       </Button>
       <Label htmlFor="localFile">Select a local file</Label>
       <Dropzone {...getRootProps()}>

app/src/stitches.config.ts

@@ -7,6 +7,7 @@ export const { styled } = createStitches({
 			white: "rgba(236, 237, 238)",
 			hover: "#7180B9",
 			primary: "#3423A6",
+			primaryText: "white"
 		},
 		fonts: {
 			sans: "Inter, sans-serif",