diff --git a/app/src/Inspector.tsx b/app/src/Inspector.tsx index 093ac4f..a439a76 100644 --- a/app/src/Inspector.tsx +++ b/app/src/Inspector.tsx @@ -142,7 +142,7 @@ const StyledFeatureProperties = styled("div", { right: 0, bottom: 0, backgroundColor: "$black", - padding: "$1" + padding: "$1", }); const FeatureProperties = (props: { feature: Feature }) => { @@ -168,13 +168,21 @@ const FeatureProperties = (props: { feature: Feature }) => { ); }; -const VectorPreview = (props: { file: PMTiles; entry: Entry }) => { +const VectorPreview = (props: { + file: PMTiles; + entry: Entry; + tileType: TileType; +}) => { let [layers, setLayers] = useState([]); let [selectedFeature, setSelectedFeature] = useState(null); useEffect(() => { let fn = async (entry: Entry) => { let view = await props.file.source.getBytes(entry.offset, entry.length); + if (props.tileType == TileType.MVT_GZ) { + view = new DataView(inflate(new Uint8Array(view.buffer)).buffer); + } + let tile = new VectorTile( new Protobuf( new Uint8Array(view.buffer, view.byteOffset, view.byteLength) @@ -285,8 +293,14 @@ function Inspector(props: { file: PMTiles }) { let tilePreview =
; if (selectedEntry && tileType) { - if (tileType === TileType.MVT) { - tilePreview = ; + if (tileType === TileType.MVT || tileType === TileType.MVT_GZ) { + tilePreview = ( + + ); } else { tilePreview = ; } diff --git a/app/src/MaplibreMap.tsx b/app/src/MaplibreMap.tsx index 8f8fd2e..2f5ec02 100644 --- a/app/src/MaplibreMap.tsx +++ b/app/src/MaplibreMap.tsx @@ -116,7 +116,7 @@ function MaplibreMap(props: { file: PMTiles }) { let initStyle = async () => { if (map) { let metadata = await props.file.metadata(); - let bounds = metadata.bounds.split(','); + let bounds = metadata.bounds.split(","); map.fitBounds([ [+bounds[0], +bounds[1]], [+bounds[2], +bounds[3]],