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

viewer: break tile inspect into separate entrypoint [#49] (#379)

Browse Source 
* viewer: break tile inspect into separate entrypoint [#49]

* fix tsc
This commit is contained in:
Brandon Liu
2024-03-15 12:44:43 +08:00
committed by GitHub
parent 1527d57d23
commit 08b2c5e3b1
7 changed files with 70 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/index.html
View File

@@ -8,6 +8,6 @@
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
<script type="module" src="/src/main.tsx"></script> <script type="module" src="/src/MapView.tsx"></script>
</body> </body>
</html> </html>

9
app/src/Loader.tsx
View File

@@ -2,7 +2,6 @@ import { useState } from "react";
import { PMTiles } from "../../js/index"; import { PMTiles } from "../../js/index";
import { styled } from "./stitches.config"; import { styled } from "./stitches.config";
import Inspector from "./Inspector";
import MaplibreMap from "./MaplibreMap"; import MaplibreMap from "./MaplibreMap";
import Metadata from "./Metadata"; import Metadata from "./Metadata";
@@ -78,8 +77,6 @@ function Loader(props: { file: PMTiles; mapHashPassed: boolean }) {
view = ( view = (
<MaplibreMap file={props.file} mapHashPassed={props.mapHashPassed} /> <MaplibreMap file={props.file} mapHashPassed={props.mapHashPassed} />
); );
} else if (tab === "inspector") {
view = <Inspector file={props.file} />;
} else { } else {
view = <Metadata file={props.file} />; view = <Metadata file={props.file} />;
} }
@@ -97,13 +94,13 @@ function Loader(props: { file: PMTiles; mapHashPassed: boolean }) {
<ToolbarToggleItem value="maplibre" aria-label="Right aligned"> <ToolbarToggleItem value="maplibre" aria-label="Right aligned">
Map View Map View
</ToolbarToggleItem> </ToolbarToggleItem>
<ToolbarToggleItem value="inspector" aria-label="Left aligned">
<MagnifyingGlassIcon /> Tile Inspector
</ToolbarToggleItem>
<ToolbarToggleItem value="metadata" aria-label="Left aligned"> <ToolbarToggleItem value="metadata" aria-label="Left aligned">
Metadata Metadata
</ToolbarToggleItem> </ToolbarToggleItem>
</ToolbarToggleGroup> </ToolbarToggleGroup>
<ToolbarLink href={`tileinspect/?url=${props.file.source.getKey()}`}>
🔎 Tile Inspector
</ToolbarLink>
<ToolbarLink css={{ marginRight: 10 }}> <ToolbarLink css={{ marginRight: 10 }}>
{props.file.source.getKey()} {props.file.source.getKey()}
</ToolbarLink> </ToolbarLink>

4
app/src/main.tsx → app/src/MapView.tsx
View File

@@ -1,12 +1,12 @@
import React from "react"; import React from "react";
import reactDom from "react-dom/client"; import reactDom from "react-dom/client";
import App from "./App"; import MapViewComponent from "./MapViewComponent";
const root = document.getElementById("root"); const root = document.getElementById("root");
if (root) { if (root) {
reactDom.createRoot(root).render( reactDom.createRoot(root).render(
<React.StrictMode> <React.StrictMode>
<App /> <MapViewComponent />
</React.StrictMode> </React.StrictMode>
); );
} }

4
app/src/App.tsx → app/src/MapViewComponent.tsx
View File

@@ -54,7 +54,7 @@ const StyledContent = styled(DialogPrimitive.Content, {
const GIT_SHA = (import.meta.env.VITE_GIT_SHA || "").substr(0, 8); const GIT_SHA = (import.meta.env.VITE_GIT_SHA || "").substr(0, 8);
function App() { function MapViewComponent() {
globalStyles(); globalStyles();
const [errorDisplay, setErrorDisplay] = useState<string | undefined>(); const [errorDisplay, setErrorDisplay] = useState<string | undefined>();
@@ -136,4 +136,4 @@ function App() {
); );
} }
export default App; export default MapViewComponent;

12
app/src/TileInspect.tsx Normal file
View File

@@ -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(
<React.StrictMode>
<TileInspectComponent />
</React.StrictMode>
);
}

38
app/src/TileInspectComponent.tsx Normal file
View File

@@ -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<PMTiles | undefined>();
// 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 (
<div>{file ? <Inspector file={file} /> : <Start setFile={setFile} />}</div>
);
}
export default TileInspectComponent;

12
app/tileinspect/index.html Normal file
View File

@@ -0,0 +1,12 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tile Inspect</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="../src/TileInspect.tsx"></script>
</body>
</html>