mirror of
https://github.com/protomaps/PMTiles.git
synced 2026-02-04 10:51:07 +00:00
add Vite-based app for example TypeScript application
This commit is contained in:
36
app/src/App.tsx
Normal file
36
app/src/App.tsx
Normal file
@@ -0,0 +1,36 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { styled, globalStyles } from "./stitches.config";
|
||||
|
||||
import Start from "./Start";
|
||||
import Inspector from "./Inspector";
|
||||
import LeafletMap from "./LeafletMap";
|
||||
import MaplibreMap from "./MaplibreMap";
|
||||
|
||||
const Header = styled("div", {
|
||||
height: "$4",
|
||||
});
|
||||
|
||||
function App() {
|
||||
globalStyles();
|
||||
|
||||
const existingValue = new URLSearchParams(location.search).get("file") || "";
|
||||
|
||||
let [file, setFile] = useState<string>(existingValue);
|
||||
|
||||
useEffect(() => {
|
||||
if (file) {
|
||||
const url = new URL(window.location.href);
|
||||
url.searchParams.set("file", file);
|
||||
history.pushState(null, "", url.toString());
|
||||
}
|
||||
}, [file]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Header>pmtiles viewer | github | toggle</Header>
|
||||
{file ? <MaplibreMap file={file} /> : <Start setFile={setFile} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
Reference in New Issue
Block a user