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:
Brandon Liu
24
app/.gitignore
vendored
Normal file
24
app/.gitignore
vendored
Normal 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
13
app/index.html
Normal 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
3186
app/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
33
app/package.json
Normal file
33
app/package.json
Normal 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
8
app/public/examples/google_cloud_cors.json
Normal file
@@ -0,0 +1,8 @@
|
||||
[
|
||||
{
|
||||
"origin": ["*"],
|
||||
"method": ["GET","HEAD"],
|
||||
"responseHeader": ["range","etag"],
|
||||
"maxAgeSeconds": 300
|
||||
}
|
||||
]
|
||||
192
app/public/examples/inspector.html
Normal file
192
app/public/examples/inspector.html
Normal file
@@ -0,0 +1,192 @@
|
||||
<html>
|
||||
<head>
|
||||
</head>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="https://d3js.org/d3.v7.min.js"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css"/>
|
||||
<script src="https://unpkg.com/pmtiles@1.0.0/dist/index.js"></script>
|
||||
<!-- <script src="../js/dist/index.js"></script> -->
|
||||
<title>PMTiles inspector</title>
|
||||
</head>
|
||||
<body class="sans-serif v-scroll bg-dark-gray flex">
|
||||
<div class="w-50 vh-100 bg-light-gray pa4 flex flex-column">
|
||||
<div class="f4 w-100 dn" id="inputPanel" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);">
|
||||
<div class=" f4 fw5 dark-gray b--dark-gray ba4 b--dotted bw1 pa3">Drag and drop a local PMTiles file here...</div>
|
||||
<!-- <div class="pv3">
|
||||
<div class="flex">
|
||||
<input placeholder="PMTiles file url (not yet implemented)" class="flex-grow-1 f6"/>
|
||||
<button class="ml3 link bg-white dim ba pointer">Inspect</button>
|
||||
</div>
|
||||
</div>
|
||||
--> </div>
|
||||
<div class="fw5 f6 mt2">spec version: <span id="spec_version">?</span></div>
|
||||
<div class="fw5 f6 mt2">metadata length: <span id="metadata_length">?</span></div>
|
||||
<div id="metadata" class="f6"></div>
|
||||
<div class="overflow-y-scroll flex-grow-1 f6 mt2">
|
||||
<table class="w-100">
|
||||
<thead class="tl">
|
||||
<tr>
|
||||
<th>z</th>
|
||||
<th>x</th>
|
||||
<th>y</th>
|
||||
<th>offset</th>
|
||||
<th>length</th>
|
||||
<th>dir</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="root_entries">
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="f6 mt2"><span id="root_entries_count">?</span> root entries</div>
|
||||
</div>
|
||||
<div class="w-50 flex items-center justify-center">
|
||||
<div>
|
||||
<div id="preview_label" class="white mb2"></div>
|
||||
<div id="preview"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="tooltip" class="absolute pa1 bg-black white f6 dn">
|
||||
</div>
|
||||
</body>
|
||||
<script type="module">
|
||||
window.dragOverHandler = (ev) => {
|
||||
ev.preventDefault();
|
||||
}
|
||||
|
||||
let smartCompare = (a,b) => {
|
||||
if (a.name === "earth") return -4
|
||||
if (a.name === "water") return -3
|
||||
if (a.name === "natural") return -2
|
||||
if (a.name === "landuse") return -1
|
||||
if (a.name === "places") return 1
|
||||
return 0
|
||||
|
||||
}
|
||||
|
||||
import {VectorTile} from "https://cdn.skypack.dev/@mapbox/vector-tile";
|
||||
import Protobuf from "https://cdn.skypack.dev/pbf";
|
||||
import {schemeSet3} from "https://cdn.skypack.dev/d3-scale-chromatic@3";
|
||||
import pako from "https://cdn.skypack.dev/pako";
|
||||
d3.select("#inputPanel").classed("dn",false);
|
||||
|
||||
let loadEntry = async (file,format,compression,row) => {
|
||||
var blob = file.slice(row.offset,row.offset+row.length);
|
||||
var imageUrl = window.URL.createObjectURL(blob);
|
||||
d3.select("#preview_label").text(`${row.z} ${row.x} ${row.y}`);
|
||||
d3.select("#preview").selectAll("*").remove();
|
||||
if (format === "pbf") {
|
||||
var a = await blob.arrayBuffer();
|
||||
if (compression === "gzip") {
|
||||
a = pako.inflate(a);
|
||||
}
|
||||
let tile = new VectorTile(new Protobuf(a));
|
||||
let data = [];
|
||||
for (let [name,layer] of Object.entries(tile.layers)) {
|
||||
let features = [];
|
||||
for (var i = 0; i < layer.length; i++) {
|
||||
let feature = layer.feature(i);
|
||||
let path = d3.path();
|
||||
let geom = feature.loadGeometry();
|
||||
|
||||
if (feature.type === 1) {
|
||||
for (let ring of geom) {
|
||||
for (let pt of ring) {
|
||||
path.arc(pt.x,pt.y,20,0, 2*Math.PI);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
for (let ring of geom) {
|
||||
path.moveTo(ring[0].x,ring[0].y);
|
||||
for (var j = 1; j < ring.length; j++) {
|
||||
path.lineTo(ring[j].x,ring[j].y);
|
||||
}
|
||||
path.closePath();
|
||||
}
|
||||
}
|
||||
features.push({path:path.toString(),type:feature.type,properties:feature.properties,id:feature.id})
|
||||
}
|
||||
data.push({name:name,features:features})
|
||||
}
|
||||
|
||||
data.sort(smartCompare);
|
||||
|
||||
let svg = d3.select("#preview").append("svg").attr("viewBox","0 0 4096 4096").attr("width",600).attr("height",600);
|
||||
let layers = svg.selectAll("g").data(data).enter().append("g").attr("color",(d,i) => { return schemeSet3[i % 12]});
|
||||
let features = layers.selectAll("path").data(d => d.features).enter().append("path")
|
||||
|
||||
features.attr("d",d => d.path)
|
||||
.attr("stroke",d => { return d.type === 2 ? "currentColor" : "" })
|
||||
.attr("stroke-width",d => { return d.type === 2 ? 10 : undefined })
|
||||
.attr("fill",d => { return d.type === 2 ? "none" : "currentColor" })
|
||||
.attr("fill-opacity",d => { d.type === 3 ? 1 : 0.5 })
|
||||
.attr("stroke-opacity",0.5);
|
||||
|
||||
features.on("mouseover", function(ev,d) {
|
||||
d3.select(this).attr("color","white");
|
||||
let tooltip = d3.select("#tooltip")
|
||||
let rows = Object.entries(d.properties).map(a => `${a[0]}: ${a[1]}`);
|
||||
rows.unshift(d3.select(this.parentNode).datum().name);
|
||||
tooltip.classed("dn",false).selectAll("div")
|
||||
.data(rows).enter().append("div")
|
||||
.text(d => d);
|
||||
})
|
||||
features.on("mousemove", function(ev) {
|
||||
let tooltip = d3.select("#tooltip")
|
||||
.style("top",(ev.pageY+5) +"px")
|
||||
.style("left",(ev.pageX+5) +"px")
|
||||
})
|
||||
|
||||
features.on("mouseout", function(ev,d,i) {
|
||||
d3.select(this).attr("color","currentColor");
|
||||
let tooltip = d3.select("#tooltip")
|
||||
tooltip.classed("dn",true)
|
||||
.selectAll("div").remove();
|
||||
})
|
||||
} else {
|
||||
d3.select("#preview").append("img").attr("src",imageUrl);
|
||||
}
|
||||
}
|
||||
|
||||
window.dropHandler = ev => {
|
||||
ev.preventDefault();
|
||||
var data = ev.dataTransfer.items;
|
||||
var file = data[0].getAsFile();
|
||||
var blob = file.slice(0,512000);
|
||||
|
||||
let truncated = (str) => {
|
||||
if (str.length < 80) return str;
|
||||
return str.slice(0,80) + "..."
|
||||
}
|
||||
|
||||
blob.arrayBuffer().then(a => {
|
||||
var header = pmtiles.parseHeader(new DataView(a,0,10));
|
||||
let dec = new TextDecoder("utf-8")
|
||||
let metadata = JSON.parse(dec.decode(new DataView(a,10,header.json_size)));
|
||||
d3.select("#spec_version").text(header.version);
|
||||
d3.select("#metadata_length").text(header.json_size);
|
||||
d3.select("#root_entries_count").text(header.root_entries);
|
||||
d3.select("#metadata").selectAll("div")
|
||||
.data(Object.entries(metadata).map(a => `${a[0]}: ${a[1]}`))
|
||||
.enter().append("div").text(d => truncated(d));
|
||||
var entries_view = new DataView(a,10+header.json_size,17*header.root_entries);
|
||||
let entries = [];
|
||||
for (var i = 0; i < entries_view.byteLength/17; i++) {
|
||||
entries.push(pmtiles.parseEntry(entries_view,i));
|
||||
}
|
||||
let row = d3.select("#root_entries").selectAll("tr").data(entries).enter().append("tr")
|
||||
.attr("class","f6 pv1 dim pointer").on("click", (ev,d) => { loadEntry(file, metadata.format, metadata.compression, d); });
|
||||
row.selectAll("td").data(d => [d.z,d.x,d.y,d.offset,d.length,d.is_dir]).enter().append("td").text(d => { return d } );
|
||||
})
|
||||
}
|
||||
|
||||
// const queryString = window.location.search;
|
||||
// const urlParams = new URLSearchParams(queryString);
|
||||
// const loadUrl = urlParams.get("url");
|
||||
// if (loadUrl) {
|
||||
// console.log("load url", loadUrl);
|
||||
// }
|
||||
</script>
|
||||
</html>
|
||||
26
app/public/examples/leaflet.html
Normal file
26
app/public/examples/leaflet.html
Normal file
@@ -0,0 +1,26 @@
|
||||
<html>
|
||||
<head>
|
||||
</head>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
|
||||
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
|
||||
<script src="https://unpkg.com/pmtiles@1.0.0/dist/index.js"></script>
|
||||
<!-- <script src="../js/dist/index.js"></script> -->
|
||||
<style>
|
||||
body, #map {
|
||||
height:100vh;
|
||||
margin:0px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<script>
|
||||
const map = L.map('map',{maxZoom:4}).setView([0,0],0)
|
||||
const p = new pmtiles.PMTiles('osm_carto.pmtiles')
|
||||
pmtiles.leafletLayer(p,{attribution:'© <a href="https://openstreetmap.org">OpenStreetMap</a> contributors'}).addTo(map)
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
70
app/public/examples/maplibre.html
Normal file
70
app/public/examples/maplibre.html
Normal file
@@ -0,0 +1,70 @@
|
||||
<html>
|
||||
<head>
|
||||
</head>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl@1.14.1-rc.2/dist/maplibre-gl.css" crossorigin="anonymous">
|
||||
<script src="https://unpkg.com/maplibre-gl@1.14.1-rc.2/dist/maplibre-gl.js" crossorigin="anonymous"></script>
|
||||
<script src="https://unpkg.com/pmtiles@1.0.0/dist/index.js"></script>
|
||||
<!-- <script src="../js/dist/index.js"></script> -->
|
||||
<style>
|
||||
body, #map {
|
||||
height:100vh;
|
||||
margin:0px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<script>
|
||||
let cache = new pmtiles.ProtocolCache();
|
||||
maplibregl.addProtocol("pmtiles",cache.protocol);
|
||||
var style = {
|
||||
"version": 8,
|
||||
"sources": {
|
||||
"tpe_sample": {
|
||||
"type": "vector",
|
||||
"tiles": ["pmtiles://tpe_sample.pmtiles/{z}/{x}/{y}"],
|
||||
"maxzoom":14
|
||||
}
|
||||
},
|
||||
"layers": [
|
||||
{
|
||||
"id": "buildings",
|
||||
"type": "fill",
|
||||
"source":"tpe_sample",
|
||||
"source-layer":"buildings",
|
||||
"paint": {
|
||||
"fill-color":"black"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "roads",
|
||||
"type": "line",
|
||||
"source":"tpe_sample",
|
||||
"source-layer":"roads",
|
||||
"paint": {
|
||||
"line-color":"red"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "mask",
|
||||
"type": "fill",
|
||||
"source":"tpe_sample",
|
||||
"source-layer":"mask",
|
||||
"paint": {
|
||||
"fill-color":"white"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
var map = new maplibregl.Map({
|
||||
container: 'map',
|
||||
center: [121.5177,25.0412],
|
||||
zoom: 14,
|
||||
style: style
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
75
app/public/examples/maplibre_zipcodes.html
Normal file
75
app/public/examples/maplibre_zipcodes.html
Normal file
@@ -0,0 +1,75 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl@1.14.1-rc.2/dist/maplibre-gl.css" crossorigin="anonymous">
|
||||
<script src="https://unpkg.com/maplibre-gl@1.14.1-rc.2/dist/maplibre-gl.js" crossorigin="anonymous"></script>
|
||||
<script src="https://unpkg.com/pmtiles@1.0.0/dist/index.js"></script>
|
||||
<!-- <script src="../js/dist/index.js"></script> -->
|
||||
<style>
|
||||
body, #map {
|
||||
height:100vh;
|
||||
margin:0px;
|
||||
background-color: #222222;
|
||||
}
|
||||
|
||||
#overlay {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
padding: 1rem;
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
<title>zcta - gl</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<div id="overlay">
|
||||
displaying archive: <a href="https://protomaps-static.sfo3.digitaloceanspaces.com/cb_2018_us_zcta510_500k_nolimit.pmtiles">cb_2018_us_zcta510_500k_nolimit.pmtiles</a>
|
||||
<pre>ogr2ogr -t_srs EPSG:4326 cb_2018_us_zcta510_500k.json cb_2018_us_zcta510_500k.shp
|
||||
tippecanoe -zg --projection=EPSG:4326 --no-tile-compression --no-feature-limit --no-tile-size-limit -o cb_2018_us_zcta510_500k_nolimit.mbtiles -l zcta cb_2018_us_zcta510_500k.json
|
||||
pmtiles-convert cb_2018_us_zcta510_500k_nolimit.mbtiles cb_2018_us_zcta510_500k_nolimit.pmtiles</pre>
|
||||
</div>
|
||||
<script>
|
||||
let cache = new pmtiles.ProtocolCache();
|
||||
maplibregl.addProtocol("pmtiles",cache.protocol);
|
||||
var style = {
|
||||
"version": 8,
|
||||
"sources": {
|
||||
"zcta": {
|
||||
"type": "vector",
|
||||
"tiles": ["pmtiles://https://protomaps-static.sfo3.digitaloceanspaces.com/cb_2018_us_zcta510_500k_nolimit.pmtiles/{z}/{x}/{y}"],
|
||||
"maxzoom":7
|
||||
}
|
||||
},
|
||||
"layers": [
|
||||
{
|
||||
"id": "ztcta_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
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
var map = new maplibregl.Map({
|
||||
container: 'map',
|
||||
center: [-101.43,44.34],
|
||||
zoom: 3,
|
||||
style: style
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
BIN
app/public/examples/osm_carto.pmtiles
Normal file
BIN
app/public/examples/osm_carto.pmtiles
Normal file
Binary file not shown.
22
app/public/examples/serve_localhost.go
Normal file
22
app/public/examples/serve_localhost.go
Normal file
@@ -0,0 +1,22 @@
|
||||
package main
|
||||
|
||||
import (
|
||||
"flag"
|
||||
"log"
|
||||
"net/http"
|
||||
)
|
||||
|
||||
func main() {
|
||||
port := flag.String("p", "7000", "port to serve on")
|
||||
directory := flag.String("d", ".", "the directory containing PMTiles archives")
|
||||
flag.Parse()
|
||||
|
||||
http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
|
||||
w.Header().Set("Access-Control-Allow-Origin", "*")
|
||||
w.Header().Set("Access-Control-Allow-Headers", "Range")
|
||||
http.ServeFile(w, r, r.URL.Path[1:])
|
||||
})
|
||||
|
||||
log.Printf("Serving %s on HTTP port: %s\n", *directory, *port)
|
||||
log.Fatal(http.ListenAndServe(":"+*port, nil))
|
||||
}
|
||||
BIN
app/public/examples/tpe_sample.pmtiles
Normal file
BIN
app/public/examples/tpe_sample.pmtiles
Normal file
Binary file not shown.
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;
|
||||
13
app/src/Inspector.tsx
Normal file
13
app/src/Inspector.tsx
Normal 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
31
app/src/LeafletMap.tsx
Normal 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
58
app/src/MaplibreMap.tsx
Normal 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
147
app/src/Start.tsx
Normal 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
9
app/src/main.tsx
Normal 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
54
app/src/stitches.config.ts
Normal 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
1
app/src/vite-env.d.ts
vendored
Normal file
@@ -0,0 +1 @@
|
||||
/// <reference types="vite/client" />
|
||||
21
app/tsconfig.json
Normal file
21
app/tsconfig.json
Normal 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
8
app/tsconfig.node.json
Normal file
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node"
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
7
app/vite.config.ts
Normal file
7
app/vite.config.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
export default defineConfig({
|
||||
base:'/PMTiles/',
|
||||
plugins: [react()]
|
||||
})
|
||||
Reference in New Issue
Block a user