diff --git a/app/index.html b/app/index.html index b0fddd7..2cb05b7 100644 --- a/app/index.html +++ b/app/index.html @@ -8,6 +8,6 @@
- + diff --git a/app/src/Loader.tsx b/app/src/Loader.tsx index 9cb3b9f..85591dc 100644 --- a/app/src/Loader.tsx +++ b/app/src/Loader.tsx @@ -2,7 +2,6 @@ import { useState } from "react"; import { PMTiles } from "../../js/index"; import { styled } from "./stitches.config"; -import Inspector from "./Inspector"; import MaplibreMap from "./MaplibreMap"; import Metadata from "./Metadata"; @@ -78,8 +77,6 @@ function Loader(props: { file: PMTiles; mapHashPassed: boolean }) { view = ( ); - } else if (tab === "inspector") { - view = ; } else { view = ; } @@ -97,13 +94,13 @@ function Loader(props: { file: PMTiles; mapHashPassed: boolean }) { Map View - - Tile Inspector - Metadata + + 🔎 Tile Inspector + {props.file.source.getKey()} diff --git a/app/src/main.tsx b/app/src/MapView.tsx similarity index 73% rename from app/src/main.tsx rename to app/src/MapView.tsx index 920fd77..1695416 100644 --- a/app/src/main.tsx +++ b/app/src/MapView.tsx @@ -1,12 +1,12 @@ import React from "react"; import reactDom from "react-dom/client"; -import App from "./App"; +import MapViewComponent from "./MapViewComponent"; const root = document.getElementById("root"); if (root) { reactDom.createRoot(root).render( - + ); } diff --git a/app/src/App.tsx b/app/src/MapViewComponent.tsx similarity index 98% rename from app/src/App.tsx rename to app/src/MapViewComponent.tsx index 099476e..15f16c9 100644 --- a/app/src/App.tsx +++ b/app/src/MapViewComponent.tsx @@ -54,7 +54,7 @@ const StyledContent = styled(DialogPrimitive.Content, { const GIT_SHA = (import.meta.env.VITE_GIT_SHA || "").substr(0, 8); -function App() { +function MapViewComponent() { globalStyles(); const [errorDisplay, setErrorDisplay] = useState(); @@ -136,4 +136,4 @@ function App() { ); } -export default App; +export default MapViewComponent; diff --git a/app/src/TileInspect.tsx b/app/src/TileInspect.tsx new file mode 100644 index 0000000..a7def39 --- /dev/null +++ b/app/src/TileInspect.tsx @@ -0,0 +1,12 @@ +import React from "react"; +import reactDom from "react-dom/client"; +import TileInspectComponent from "./TileInspectComponent"; + +const root = document.getElementById("root"); +if (root) { + reactDom.createRoot(root).render( + + + + ); +} diff --git a/app/src/TileInspectComponent.tsx b/app/src/TileInspectComponent.tsx new file mode 100644 index 0000000..20e2317 --- /dev/null +++ b/app/src/TileInspectComponent.tsx @@ -0,0 +1,38 @@ +import React, { useState, useEffect } from "react"; +import { PMTiles } from "../../js/index"; +import { globalStyles, styled } from "./stitches.config"; +import Inspector from "./Inspector"; +import Start from "./Start"; + +function TileInspectComponent() { + globalStyles(); + + const [file, setFile] = useState(); + + // initial load + useEffect(() => { + const loadUrl = new URLSearchParams(location.search).get("url"); + if (loadUrl) { + const initialValue = new PMTiles(loadUrl); + setFile(initialValue); + } + }, []); + + // maintaining URL state + useEffect(() => { + const url = new URL(window.location.href); + if (file?.source.getKey().startsWith("http")) { + url.searchParams.set("url", file.source.getKey()); + history.pushState(null, "", url.toString()); + } else { + url.searchParams.delete("url"); + history.pushState(null, "", url.toString()); + } + }, [file]); + + return ( +
{file ? : }
+ ); +} + +export default TileInspectComponent; diff --git a/app/tileinspect/index.html b/app/tileinspect/index.html new file mode 100644 index 0000000..cf97fa8 --- /dev/null +++ b/app/tileinspect/index.html @@ -0,0 +1,12 @@ + + + + + + Tile Inspect + + +
+ + +