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

add Vite-based app for example TypeScript application

Browse Source
This commit is contained in:
Brandon Liu
2022-05-02 16:37:41 +08:00
parent a006dc2600
commit a1753af6df
24 changed files with 3689 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
.github/workflows/actions.yml vendored Normal file
View File

@@ -0,0 +1,40 @@
name: CI
on:
push:
branches: [ master ]
pull_request:
branches: [ master ]
# Allows you to run this workflow manually from the Actions tab
workflow_dispatch:
jobs:
build_app:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
- uses: actions/setup-node@v3
with:
node-version: 16.x
- run: cd js && npm install && npm run build
- run: cd app && npm install && npm run build
- name: build_app
uses: peaceiris/actions-gh-pages@v3
# if: ${{ github.ref == 'refs/heads/master' }}
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./app/dist
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
- uses: actions/setup-node@v3
with:
node-version: 16.x
- run: cd js && npm install && npm test
- run : cd python && python -m unittest test/test_*

24
app/.gitignore vendored Normal file
View File

@@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

13
app/index.html Normal file
View File

@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

3186
app/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

33
app/package.json Normal file
View File

@@ -0,0 +1,33 @@
{
"name": "docs",
"private": true,
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
},
"dependencies": {
"@mapbox/vector-tile": "^1.3.1",
"@radix-ui/react-label": "^0.1.5",
"@stitches/react": "^1.2.8",
"leaflet": "^1.8.0",
"maplibre-gl": "^2.1.9",
"pako": "^2.0.4",
"pbf": "^3.2.1",
"protomaps": "^1.19.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-dropzone": "^14.1.1"
},
"devDependencies": {
"@types/leaflet": "^1.7.9",
"@types/mapbox__vector-tile": "^1.3.0",
"@types/pbf": "^3.0.2",
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0",
"@vitejs/plugin-react": "^1.3.0",
"typescript": "^4.6.3",
"vite": "^2.9.5"
}
}

8
app/public/examples/google_cloud_cors.json Normal file
View File

@@ -0,0 +1,8 @@
[
{
"origin": ["*"],
"method": ["GET","HEAD"],
"responseHeader": ["range","etag"],
"maxAgeSeconds": 300
}
]

0
examples/inspector.html → app/public/examples/inspector.html
View File

0
examples/leaflet.html → app/public/examples/leaflet.html
View File

0
examples/maplibre.html → app/public/examples/maplibre.html
View File

0
examples/maplibre_zipcodes.html → app/public/examples/maplibre_zipcodes.html
View File

0
examples/osm_carto.pmtiles → app/public/examples/osm_carto.pmtiles
View File

0
examples/serve_localhost.go → app/public/examples/serve_localhost.go
View File

0
examples/tpe_sample.pmtiles → app/public/examples/tpe_sample.pmtiles
View File

36
app/src/App.tsx Normal file
View 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;

13
app/src/Inspector.tsx Normal file
View File

@@ -0,0 +1,13 @@
import { useState } from "react";
import { PMTiles } from "../../js";
import { styled } from "./stitches.config";
function Inspector() {
return (
<>
foo
</>
);
}
export default Inspector;

31
app/src/LeafletMap.tsx Normal file
View File

@@ -0,0 +1,31 @@
import { useState, useEffect } from "react";
import { PMTiles, leafletLayer } from "../../js";
import { styled } from "./stitches.config";
import L from "leaflet";
import "leaflet/dist/leaflet.css";
const MapContainer = styled("div", {
height: "calc(100vh - $4)",
});
function LeafletMap(props:{file:string}) {
const p = new PMTiles(
"https://protomaps-static.sfo3.digitaloceanspaces.com/osm_carto.pmtiles"
);
useEffect(() => {
const map = L.map("map").setView([0, 0], 0);
leafletLayer(p, {
attribution:
'© <a href="https://openstreetmap.org">OpenStreetMap</a> contributors',
}).addTo(map);
return () => {
map.remove();
};
}, []);
return <MapContainer id="map"></MapContainer>;
}
export default LeafletMap;

58
app/src/MaplibreMap.tsx Normal file
View File

@@ -0,0 +1,58 @@
import { useState, useEffect } from "react";
import { PMTiles, ProtocolCache } from "../../js";
import { styled } from "./stitches.config";
import maplibregl from "maplibre-gl";
import "maplibre-gl/dist/maplibre-gl.css"
const MapContainer = styled("div", {
height: "calc(100vh - $4)",
});
function MaplibreMap(props:{file:string}) {
let cache = new ProtocolCache();
maplibregl.addProtocol("pmtiles",cache.protocol);
var style = {
"version": 8,
"sources": {
"zcta": {
"type": "vector",
"tiles": ["pmtiles://" + props.file + "/{z}/{x}/{y}"],
"maxzoom":7
}
},
"layers": [
{
"id": "zcta_fill",
"type": "fill",
"source":"zcta",
"source-layer":"zcta",
"paint": {
"fill-color":"white"
}
},
{
"id": "zcta_stroke",
"type": "line",
"source":"zcta",
"source-layer":"zcta",
"paint": {
"line-color":"steelblue",
"line-width":0.5
}
}
]
}
useEffect(() => {
const map = new maplibregl.Map({container:"map",zoom:3,center:[-101.43,44.34],style:style as any}); // TODO maplibre types
return () => {
map.remove();
};
}, []);
return <MapContainer id="map"></MapContainer>;
}
export default MaplibreMap;

147
app/src/Start.tsx Normal file
View File

@@ -0,0 +1,147 @@
import { useState, Dispatch, SetStateAction } from "react";
import maplibregl from "maplibre-gl";
import L from "leaflet";
import { PMTiles } from "../../js";
import { styled } from "./stitches.config";
import { useDropzone } from "react-dropzone";
import * as LabelPrimitive from "@radix-ui/react-label";
const Input = styled("input", {
all: "unset",
display: "inline-flex",
alignItems: "center",
justifyContent: "center",
fontSize: "$3",
fontFamily: "$sans",
"&:focus": { boxShadow: `0 0 0 1px black` },
width: "100%",
border: "1px solid $white",
padding: "$1",
boxSizing: "border-box",
margin: "0 0 $2 0",
borderRadius: "$2",
});
const Label = styled(LabelPrimitive.Root, {
display: "block",
fontSize: "$3",
fontWeight: 300,
userSelect: "none",
padding: "0 0 $1 0",
});
const Header = styled("h1", {
paddingBottom: "$1",
fontWeight: 500,
});
const Container = styled("div", {
maxWidth: 780,
marginLeft: "auto",
marginRight: "auto",
padding: "$3",
});
const Button = styled("button", {
padding: "$1 $2",
borderRadius: "$2",
cursor: "pointer",
variants: {
color: {
violet: {
backgroundColor: "blueviolet",
color: "white",
"&:hover": {
backgroundColor: "darkviolet",
},
},
gray: {
backgroundColor: "gainsboro",
"&:hover": {
backgroundColor: "lightgray",
},
},
},
},
});
const Dropzone = styled("div", {
padding: "$2",
border: "1px dashed $white",
textAlign: "center",
margin: "0 0 $2 0",
});
const Example = styled("div", {
padding: "$1",
"&:not(:last-child)": {
borderBottom: "1px solid $white",
},
"&:hover": {
backgroundColor: "$white",
},
variants: {
selected: {
true: {
backgroundColor:"red"
}
}
}
});
const ExampleList = styled("div", {
borderRadius: "$1",
border: "1px solid $white",
margin: "0 0 $2 0",
});
const EXAMPLE_FILES = [
"https://protomaps-static.sfo3.digitaloceanspaces.com/osm_carto.pmtiles"
]
function Start(props:{setFile:Dispatch<SetStateAction<string>>}) {
const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
let [remoteUrl, setRemoteUrl] = useState<string>("");
let [selectedExample, setSelectedExample] = useState<number | null>(1);
const onRemoteUrlChangeHandler = (event:React.ChangeEvent<HTMLInputElement>) => {
setRemoteUrl(event.target.value);
}
const loadExample = (i:number) => {
return () => {
props.setFile(EXAMPLE_FILES[i]);
}
}
const onSubmit = () => {
props.setFile("abcd");
}
return (
<Container>
<Header>PMTiles Viewer</Header>
<Label htmlFor="remoteUrl">Specify a remote URL</Label>
<Input
id="remoteUrl"
placeholder="https://example.com/my_archive.pmtiles"
onChange={onRemoteUrlChangeHandler}
></Input>
<Button color="gray" onClick={onSubmit}>Load</Button>
<Label htmlFor="localFile">Select a local file</Label>
<Dropzone {...getRootProps()}>
<input {...getInputProps()} />
<p>Drag + drop a file here, or click to select</p>
</Dropzone>
<Label>Load an example</Label>
<ExampleList>
{EXAMPLE_FILES.map((e,i) => <Example key={i} onClick={loadExample(i)}>{e}</Example>)}
</ExampleList>
</Container>
);
}
export default Start;

9
app/src/main.tsx Normal file
View File

@@ -0,0 +1,9 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<App />
</React.StrictMode>
)

54
app/src/stitches.config.ts Normal file
View File

@@ -0,0 +1,54 @@
import { createStitches, globalCss } from "@stitches/react";
export const { styled } = createStitches({
theme: {
colors: {
black: "rgba(0, 0, 0)",
white: "rgba(236, 237, 238)",
},
fonts: {
sans: "Inter, sans-serif",
},
fontSizes: {
1: "12px",
2: "14px",
3: "16px",
4: "20px",
5: "24px",
6: "32px",
},
space: {
1: "10px",
2: "20px",
3: "40px",
},
sizes: {
1: "4px",
2: "8px",
3: "16px",
4: "32px",
5: "64px",
6: "128px",
},
radii: {
1: "2px",
2: "4px",
3: "8px",
round: "9999px",
},
fontWeights: {},
lineHeights: {},
letterSpacings: {},
borderWidths: {},
borderStyles: {},
shadows: {},
zIndices: {},
transitions: {},
},
});
export const globalStyles = globalCss({
"*": { margin: 0, padding: 0, border: 0, fontFamily: "Inter, sans-serif", xborder: "1px solid gold" },
body: { backgroundColor: "$black", color: "$white" },
"@import": ["url('https://rsms.me/inter/inter.css')"],
});

1
app/src/vite-env.d.ts vendored Normal file
View File

@@ -0,0 +1 @@
/// <reference types="vite/client" />

21
app/tsconfig.json Normal file
View File

@@ -0,0 +1,21 @@
{
"compilerOptions": {
"target": "ESNext",
"useDefineForClassFields": true,
"lib": ["DOM", "DOM.Iterable", "ESNext"],
"allowJs": false,
"skipLibCheck": true,
"esModuleInterop": false,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "ESNext",
"moduleResolution": "Node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}

8
app/tsconfig.node.json Normal file
View File

@@ -0,0 +1,8 @@
{
"compilerOptions": {
"composite": true,
"module": "esnext",
"moduleResolution": "node"
},
"include": ["vite.config.ts"]
}

7
app/vite.config.ts Normal file
View File

@@ -0,0 +1,7 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
base:'/PMTiles/',
plugins: [react()]
})