mirrors/PMTiles
1
0
Fork 0
mirror of https://github.com/protomaps/PMTiles.git synced 2026-02-04 10:51:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Inspector app handles v2 archives better and assumes they are vector tiles

Browse Source
This commit is contained in:
Brandon Liu
2022-10-05 17:21:40 +08:00
parent a6a1ff1f89
commit 64d7815149
2 changed files with 12 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
app/src/Inspector.tsx
View File

@@ -1,6 +1,6 @@
import { useState, useEffect, Dispatch, SetStateAction } from "react"; import { useState, useEffect, Dispatch, SetStateAction } from "react";
import { createPortal } from "react-dom"; import { createPortal } from "react-dom";
import { PMTiles, Entry, tileIdToZxy, TileType } from "../../js"; import { PMTiles, Entry, tileIdToZxy, TileType, Header } from "../../js";
import { styled } from "./stitches.config"; import { styled } from "./stitches.config";
import { decompressSync } from "fflate"; import { decompressSync } from "fflate";
import Protobuf from "pbf"; import Protobuf from "pbf";
@@ -274,14 +274,14 @@ const RasterPreview = (props: { file: PMTiles; entry: Entry }) => {
function Inspector(props: { file: PMTiles }) { function Inspector(props: { file: PMTiles }) {
let [entryRows, setEntryRows] = useState<Entry[]>([]); let [entryRows, setEntryRows] = useState<Entry[]>([]);
let [selectedEntry, setSelectedEntry] = useState<Entry | null>(null); let [selectedEntry, setSelectedEntry] = useState<Entry | null>(null);
let [tileType, setTileType] = useState<TileType>(TileType.Unknown); let [header, setHeader] = useState<Header | null>(null);
useEffect(() => { useEffect(() => {
let fn = async () => { let fn = async () => {
let header = await props.file.getHeader(); let header = await props.file.getHeader();
let entries = await props.file.root_entries(); let entries = await props.file.root_entries();
setEntryRows(entries); setEntryRows(entries);
setTileType(header.tileType); setHeader(header);
}; };
fn(); fn();
@@ -292,13 +292,13 @@ function Inspector(props: { file: PMTiles }) {
)); ));
let tilePreview = <div></div>; let tilePreview = <div></div>;
if (selectedEntry && tileType) { if (selectedEntry && header?.tileType) {
if (tileType === TileType.Mvt) { if (header.tileType === TileType.Mvt) {
tilePreview = ( tilePreview = (
<VectorPreview <VectorPreview
file={props.file} file={props.file}
entry={selectedEntry} entry={selectedEntry}
tileType={tileType} tileType={header.tileType}
/> />
); );
} else { } else {
@@ -306,9 +306,15 @@ function Inspector(props: { file: PMTiles }) {
} }
} }
let warning = "";
if (header && header.specVersion < 3) {
warning = "Directory listing supported only for PMTiles v3 archives."
}
return ( return (
<Split> <Split>
<TableContainer> <TableContainer>
{warning}
<table> <table>
<thead> <thead>
<tr> <tr>

1
app/src/Start.tsx
View File

@@ -98,7 +98,6 @@ const ExampleList = styled("div", {
}); });
const EXAMPLE_FILES = [ const EXAMPLE_FILES = [
"https://protomaps-static.sfo3.digitaloceanspaces.com/osm_carto.pmtiles",
"https://protomaps-static.sfo3.digitaloceanspaces.com/mantle-trial.pmtiles", "https://protomaps-static.sfo3.digitaloceanspaces.com/mantle-trial.pmtiles",
"https://protomaps-static.sfo3.digitaloceanspaces.com/cb_2018_us_zcta510_500k_nolimit.pmtiles", "https://protomaps-static.sfo3.digitaloceanspaces.com/cb_2018_us_zcta510_500k_nolimit.pmtiles",
"https://protomaps-static.sfo3.digitaloceanspaces.com/cb_2018_us_zcta510_500k_gzip.pmtiles", "https://protomaps-static.sfo3.digitaloceanspaces.com/cb_2018_us_zcta510_500k_gzip.pmtiles",