+
+ );
+};
+
+function LinkTab(props: {
+ page: string;
+ tileset: Accessor
+
+ Load an example:
+
+
+
+
+
+
+
+ Drag and drop a local file here
+
+
+
+
+ );
+}
diff --git a/app/src/Inspector.tsx b/app/src/Inspector.tsx
deleted file mode 100644
index 5c89eda..0000000
--- a/app/src/Inspector.tsx
+++ /dev/null
@@ -1,415 +0,0 @@
-import { VectorTile } from "@mapbox/vector-tile";
-import { path } from "d3-path";
-import { schemeSet3 } from "d3-scale-chromatic";
-import Protobuf from "pbf";
-import { Dispatch, SetStateAction, useEffect, useRef, useState } from "react";
-import { UncontrolledReactSVGPanZoom } from "react-svg-pan-zoom";
-import { useMeasure } from "react-use";
-import {
- Entry,
- Header,
- PMTiles,
- TileType,
- tileIdToZxy,
-} from "../../js/src/index";
-import { styled } from "./stitches.config";
-
-const TableContainer = styled("div", {
- height: "calc(100vh - $4 - $4)",
- overflowY: "scroll",
- width: "calc(100%/3)",
-});
-
-const SvgContainer = styled("div", {
- width: "100%",
- height: "calc(100vh - $4 - $4)",
-});
-
-const Table = styled("table", {
- padding: "$2",
-});
-
-const Pane = styled("div", {
- width: "calc(100%/3*2)",
-});
-
-const TableRow = styled(
- "tr",
- {
- cursor: "pointer",
- fontFamily: "monospace",
- },
- { "&:hover": { color: "red" } }
-);
-
-const Split = styled("div", {
- display: "flex",
-});
-
-const TileRow = (props: {
- entry: Entry;
- setSelectedEntry: (val: Entry | null) => void;
-}) => {
- const [z, x, y] = tileIdToZxy(props.entry.tileId);
- return (
-
+
+
+
+ {pageTitle}
+ +
+
+
+ {errorMessage()}
+
+
+
+
+
+ {props.children}
+
+ | tileid | -z | -x | -y | -offset | -length | -type | -
|---|
+
+
+
+
+ );
+}
diff --git a/app/src/Loader.tsx b/app/src/Loader.tsx
deleted file mode 100644
index 4c10c9c..0000000
--- a/app/src/Loader.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import { useState } from "react";
-import { PMTiles } from "../../js/src/index";
-import { styled } from "./stitches.config";
-
-import MaplibreMap from "./MaplibreMap";
-import Metadata from "./Metadata";
-
-import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
-import * as ToolbarPrimitive from "@radix-ui/react-toolbar";
-
-const StyledToolbar = styled(ToolbarPrimitive.Root, {
- display: "flex",
- height: "$4",
- width: "100%",
- boxSizing: "border-box",
- minWidth: "max-content",
- backgroundColor: "white",
- boxShadow: `0 2px 10px "black"`,
-});
-
-const itemStyles = {
- all: "unset",
- flex: "0 0 auto",
- color: "$black",
- display: "inline-flex",
- padding: "0 $1 0 $1",
- fontSize: "$2",
- alignItems: "center",
- "&:hover": { backgroundColor: "$hover", color: "$white" },
- "&:focus": { position: "relative", boxShadow: "0 0 0 2px blue" },
-};
-
-const StyledLink = styled(
- ToolbarPrimitive.Link,
- {
- ...itemStyles,
- backgroundColor: "transparent",
- color: "black",
- display: "inline-flex",
- justifyContent: "center",
- alignItems: "center",
- },
- {
- "&:hover": {
- backgroundColor: "$hover",
- color: "$white",
- cursor: "pointer",
- },
- }
-);
-
-const StyledToggleGroup = styled(ToolbarPrimitive.ToggleGroup, {
- display: "inline-flex",
- borderRadius: 4,
-});
-
-const StyledToggleItem = styled(ToolbarPrimitive.ToggleItem, {
- ...itemStyles,
- boxShadow: 0,
- backgroundColor: "white",
- marginLeft: 2,
- cursor: "pointer",
- "&:first-child": { marginLeft: 0 },
- "&[data-state=on]": { backgroundColor: "$primary", color: "$primaryText" },
-});
-
-const Toolbar = StyledToolbar;
-const ToolbarLink = StyledLink;
-const ToolbarToggleGroup = StyledToggleGroup;
-const ToolbarToggleItem = StyledToggleItem;
-
-function Loader(props: { file: PMTiles; mapHashPassed: boolean }) {
- const [tab, setTab] = useState("maplibre");
-
- let view: any;
- if (tab === "maplibre") {
- view = (
-
+
+
+
+ {(l, i) => (
+
+
+
+ props.setBasemap?.(!props.basemap?.())}
+ />
+
+
+
+
+
+
+
+ onChange(l.id)}
+ />
+
+
+ )}
+
-
-
- PMTiles Viewer
-
-
-
-
-
-
- {file ? (
-
-
-
-
-
-
-
- );
-}
-
-export default MapViewComponent;
diff --git a/app/src/MaplibreMap.tsx b/app/src/MaplibreMap.tsx
deleted file mode 100644
index 7a9370d..0000000
--- a/app/src/MaplibreMap.tsx
+++ /dev/null
@@ -1,544 +0,0 @@
-import {
- LayerSpecification,
- StyleSpecification,
-} from "@maplibre/maplibre-gl-style-spec";
-import { schemeSet3 } from "d3-scale-chromatic";
-import maplibregl from "maplibre-gl";
-import { MapGeoJSONFeature } from "maplibre-gl";
-import "maplibre-gl/dist/maplibre-gl.css";
-import baseTheme from "protomaps-themes-base";
-import React, { useState, useEffect, useRef } from "react";
-import { renderToString } from "react-dom/server";
-import { Protocol } from "../../js/src/adapters";
-import { PMTiles, TileType } from "../../js/src/index";
-import { styled } from "./stitches.config";
-
-const BASEMAP_THEME = "black";
-
-const INITIAL_ZOOM = 0;
-const INITIAL_LNG = 0;
-const INITIAL_LAT = 0;
-const BASEMAP_URL =
- "https://api.protomaps.com/tiles/v4/{z}/{x}/{y}.mvt?key=1003762824b9687f";
-const BASEMAP_ATTRIBUTION =
- 'Basemap Protomaps © OpenStreetMap';
-
-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)",
-});
-
-const PopupContainer = styled("div", {
- color: "black",
- maxHeight: "400px",
- overflowY: "scroll",
-});
-
-const FeatureRow = styled("div", {
- marginBottom: "0.5em",
- "&:not(:last-of-type)": {
- borderBottom: "1px solid black",
- },
-});
-
-const Hamburger = styled("div", {
- position: "absolute",
- top: "10px",
- right: "10px",
- width: 40,
- height: 40,
- backgroundColor: "#444",
- cursor: "pointer",
- zIndex: 9999,
-});
-
-const Options = styled("div", {
- position: "absolute",
- backgroundColor: "#444",
- top: "50px",
- right: "10px",
- padding: "$1",
- zIndex: 9999,
-});
-
-const CheckboxLabel = styled("label", {
- display: "flex",
- gap: 6,
- cursor: "pointer",
-});
-
-const LayersVisibilityList = styled("ul", {
- listStyleType: "none",
-});
-
-const FeaturesProperties = (props: { features: MapGeoJSONFeature[] }) => {
- return (
- {file ? file.source.getKey() : null}
- {errorDisplay}
- | {key} | -- {typeof value === "boolean" ? JSON.stringify(value) : value} - | -
Layers
- No vector layers found - - ); - } - - const toggleAllLayers = () => { - const visible = visibleLayersCount !== layers.length; - const newLayersVisibility = layers.map((l) => ({ ...l, visible })); - onChange(newLayersVisibility); - }; - - const toggleLayer = (event: React.ChangeEventLayers
-Filter
-Popup
-Tiles
-
- root directory: offset={header.rootDirectoryOffset} len=
- {header.rootDirectoryLength}
-
-
- metadata: offset={header.jsonMetadataOffset} len=
- {header.jsonMetadataLength}
-
-
- leaf directories: offset={header.leafDirectoryOffset} len=
- {header.leafDirectoryLength}
-
-
- tile data: offset={header.tileDataOffset} len=
- {header.tileDataLength}
-
- num addressed tiles: {header.numAddressedTiles}
- num tile entries: {header.numTileEntries}
- num tile contents: {header.numTileContents}
- clustered: {header.clustered ? "true" : "false"}
- internal compression: {header.internalCompression}
- tile compression: {header.tileCompression}
- tile type: {header.tileType}
- min zoom: {header.minZoom}
- max zoom: {header.maxZoom}
-
- min lon, min lat, max lon, max lat: {header.minLon}, {header.minLat}
- , {header.maxLon}, {header.maxLat}
-
- center zoom: {header.centerZoom}
-
- center lon, center lat: {header.centerLon}, {header.centerLat}
-
-
+
+
+ );
+}
+
+function DirectoryTable(props: {
+ entries: Entry[];
+ stateUrl: string | undefined;
+ tileContents?: number;
+ addressedTiles?: number;
+ totalEntries?: number;
+ setHoveredTile: Setter
+
+ );
+}
+
+function ArchiveView(props: { genericTileset: Tileset }) {
+ const tileset = () => {
+ if (props.genericTileset instanceof PMTilesTileset) {
+ return props.genericTileset as PMTilesTileset;
+ }
+ alert("This isn't a PMTiles archive!");
+ throw "This isn't a PMTiles tileset";
+ };
+
+ const [header] = createResource(tileset(), async (t) => {
+ return await t.archive.getHeader();
+ });
+
+ const [rootEntries] = createResource(header, async (h) => {
+ return await tileset().archive.cache.getDirectory(
+ tileset().archive.source,
+ h.rootDirectoryOffset,
+ h.rootDirectoryLength,
+ h,
+ );
+ });
+
+ const [openedLeaf, setOpenedLeaf] = createSignal
+
+ entries {idx()}-{idx() + 999} of {props.entries.length}
+
+
+
+
+
+
+
+
+
+ | tileID | +z | +x | +y | +offset | +length | +runlength | +
|---|---|---|---|---|---|---|
| {e.tileId} | +{tileIdToZxy(e.tileId)[0]} | +{tileIdToZxy(e.tileId)[1]} | +{tileIdToZxy(e.tileId)[2]} | +
+ |
+ {e.length} | +
+ |
+
+
+ {(l) => (
+
+
+ );
+}
+
+function PageArchive() {
+ const hash = parseHash(location.hash);
+ const [tileset, setTileset] = createSignal
+
+ {(h) => (
+
+
+
+
+
+
+
+
+ )}
+ | Layout (bytes) | +offset | +length | +
|---|---|---|
| Root Dir | +{h().rootDirectoryOffset} | +{formatBytes(h().rootDirectoryLength)} | +
| Metadata | +{h().jsonMetadataOffset} | +{formatBytes(h().jsonMetadataLength)} | +
| Leaf Dirs | +{h().leafDirectoryOffset} | +{formatBytes(h().leafDirectoryLength || 0)} | +
| Tile Data | +{h().tileDataOffset} | +{formatBytes(h().tileDataLength || 0)} | +
+
+ )}
+
+
+
+
+ {(h) => (
+
+
+
+
+ )}
+ clustered: {h().clustered ? "true" : "false"}
+ total addressed tiles: {h().numAddressedTiles}
+ total tile entries: {h().numTileEntries}
+ total contents: {h().numTileContents}
+
+ internal compression:{" "}
+ {compressionToString(h().internalCompression)}
+
+
+ tile compression: {compressionToString(h().tileCompression)}
+
+ tile type: {tileTypeExt(h().tileType)}
+ min zoom: {h().minZoom}
+ max zoom: {h().maxZoom}
+ center zoom: {h().centerZoom}
+
+ bounds: {h().minLon} {h().minLat} {h().maxLon} {h().maxLat}
+
+
+ center: {h().centerLon} {h().centerLat}
+
+
+
+
+
+ );
+}
+
+const JsonView = (props: { tileset: Tileset }) => {
+ const [data] = createResource(async () => {
+ return await props.tileset.getMetadata();
+ });
+
+ return
+
+
+
+
+ {
+ props.setInspectFeatures(!props.inspectFeatures());
+ }}
+ />
+
+
+
+ {
+ props.setShowTileBoundaries(!props.showTileBoundaries());
+ }}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {(f) => (
+
+
+
+ );
+}
+
+function TileView(props: {
+ tileset: Tileset;
+ zxy: Accessor<[number, number, number] | undefined>;
+ setZxy: Setter<[number, number, number] | undefined>;
+}) {
+ const [neighborsOpen, setNeighborsOpen] = createSignal
+
+
+
+ )}
+
+
+