mirror of
https://github.com/protomaps/PMTiles.git
synced 2026-02-04 10:51:07 +00:00
app updates
This commit is contained in:
Brandon Liu
@@ -1,5 +1,6 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { styled, globalStyles } from "./stitches.config";
|
||||
import { PMTiles } from "../../js";
|
||||
|
||||
import Start from "./Start";
|
||||
import Loader from "./Loader";
|
||||
@@ -8,26 +9,37 @@ const Header = styled("div", {
|
||||
height: "$4",
|
||||
});
|
||||
|
||||
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() {
|
||||
globalStyles();
|
||||
|
||||
const existingValue = new URLSearchParams(location.search).get("file") || "";
|
||||
let initialValue;
|
||||
const loadUrl = new URLSearchParams(location.search).get("url");
|
||||
if (loadUrl) {
|
||||
initialValue = new PMTiles(loadUrl);
|
||||
}
|
||||
|
||||
let [file, setFile] = useState<string>(existingValue);
|
||||
let [file, setFile] = useState<PMTiles | undefined>(initialValue);
|
||||
|
||||
useEffect(() => {
|
||||
if (file) {
|
||||
const url = new URL(window.location.href);
|
||||
url.searchParams.set("file", file);
|
||||
url.searchParams.set("url", file.source.getKey());
|
||||
history.pushState(null, "", url.toString());
|
||||
}
|
||||
}, [file]);
|
||||
|
||||
let clear = () => {
|
||||
setFile(undefined);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Header>pmtiles viewer | github | toggle | {GIT_SHA}</Header>
|
||||
<Header>
|
||||
<span onClick={clear}>pmtiles viewer</span> | github | toggle |{" "}
|
||||
{GIT_SHA}
|
||||
</Header>
|
||||
{file ? <Loader file={file} /> : <Start setFile={setFile} />}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,12 +1,291 @@
|
||||
import { useState } from "react";
|
||||
import { PMTiles } from "../../js";
|
||||
import { useState, useEffect, Dispatch, SetStateAction } from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
import { PMTiles, Entry } from "../../js";
|
||||
import { styled } from "./stitches.config";
|
||||
import { inflate } from "pako";
|
||||
import Protobuf from "pbf";
|
||||
import { VectorTile, VectorTileFeature } from "@mapbox/vector-tile";
|
||||
import { path } from "d3-path";
|
||||
import { schemeSet3 } from "d3-scale-chromatic";
|
||||
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
||||
|
||||
function Inspector(props:{file:string}) {
|
||||
const TableContainer = styled("div", {
|
||||
height: "calc(100vh - $4)",
|
||||
overflowY: "scroll",
|
||||
width: "50%",
|
||||
});
|
||||
|
||||
const Pane = styled("div", {
|
||||
width: "50%",
|
||||
backgroundColor: "black",
|
||||
});
|
||||
|
||||
const TableRow = styled(
|
||||
"tr",
|
||||
{
|
||||
cursor: "pointer",
|
||||
},
|
||||
{ "&:hover": { color: "red" } }
|
||||
);
|
||||
|
||||
const Split = styled("div", {
|
||||
display: "flex",
|
||||
});
|
||||
|
||||
const TileRow = (props: {
|
||||
entry: Entry;
|
||||
setSelectedEntry: Dispatch<SetStateAction<Entry | null>>;
|
||||
}) => {
|
||||
return (
|
||||
<>
|
||||
foo
|
||||
</>
|
||||
<TableRow
|
||||
onClick={() => {
|
||||
props.setSelectedEntry(props.entry);
|
||||
}}
|
||||
>
|
||||
<td>{props.entry.z}</td>
|
||||
<td>{props.entry.x}</td>
|
||||
<td>{props.entry.y}</td>
|
||||
<td>{props.entry.offset}</td>
|
||||
<td>{props.entry.length}</td>
|
||||
<td>{props.entry.is_dir}</td>
|
||||
</TableRow>
|
||||
);
|
||||
};
|
||||
|
||||
interface Layer {
|
||||
name: string;
|
||||
features: Feature[];
|
||||
}
|
||||
|
||||
interface Feature {
|
||||
path: string;
|
||||
type: number;
|
||||
id: number;
|
||||
properties: any;
|
||||
}
|
||||
|
||||
let smartCompare = (a: Layer, b: Layer): number => {
|
||||
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;
|
||||
};
|
||||
|
||||
const FeatureSvg = (props: {
|
||||
feature: Feature;
|
||||
setSelectedFeature: Dispatch<SetStateAction<Feature | null>>;
|
||||
}) => {
|
||||
let [highlighted, setHighlighted] = useState(false);
|
||||
let fill = "none";
|
||||
let stroke = "";
|
||||
|
||||
if (props.feature.type === 3) {
|
||||
fill = highlighted ? "white" : "currentColor";
|
||||
} else {
|
||||
stroke = highlighted ? "white" : "currentColor";
|
||||
}
|
||||
|
||||
let mouseOver = () => {
|
||||
setHighlighted(true);
|
||||
};
|
||||
|
||||
let mouseOut = () => {
|
||||
setHighlighted(false);
|
||||
};
|
||||
|
||||
let mouseDown = () => {
|
||||
props.setSelectedFeature(props.feature);
|
||||
};
|
||||
|
||||
return (
|
||||
<path
|
||||
d={props.feature.path}
|
||||
stroke={stroke}
|
||||
strokeWidth={10}
|
||||
fill={fill}
|
||||
fillOpacity={0.5}
|
||||
onMouseOver={mouseOver}
|
||||
onMouseOut={mouseOut}
|
||||
onMouseDown={mouseDown}
|
||||
></path>
|
||||
);
|
||||
};
|
||||
|
||||
const LayerSvg = (props: {
|
||||
layer: Layer;
|
||||
color: string;
|
||||
setSelectedFeature: Dispatch<SetStateAction<Feature | null>>;
|
||||
}) => {
|
||||
let elems = props.layer.features.map((f, i) => (
|
||||
<FeatureSvg
|
||||
key={i}
|
||||
feature={f}
|
||||
setSelectedFeature={props.setSelectedFeature}
|
||||
></FeatureSvg>
|
||||
));
|
||||
return <g color={props.color}>{elems}</g>;
|
||||
};
|
||||
|
||||
const StyledFeatureProperties = styled("div", {
|
||||
position: "absolute",
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
backgroundColor: "red",
|
||||
});
|
||||
|
||||
const FeatureProperties = (props: { feature: Feature }) => {
|
||||
let tmp: [string, string][] = [];
|
||||
for (var key in props.feature.properties) {
|
||||
tmp.push([key, props.feature.properties[key]]);
|
||||
}
|
||||
|
||||
const rows = tmp.map((d, i) => (
|
||||
<tr key={i}>
|
||||
<td>{d[0]}</td>
|
||||
<td>{d[1]}</td>
|
||||
</tr>
|
||||
));
|
||||
|
||||
return <StyledFeatureProperties>{rows}</StyledFeatureProperties>;
|
||||
};
|
||||
|
||||
const VectorPreview = (props: { file: PMTiles; entry: Entry }) => {
|
||||
let [layers, setLayers] = useState<Layer[]>([]);
|
||||
let [selectedFeature, setSelectedFeature] = useState<Feature | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
let fn = async (entry: Entry) => {
|
||||
let view = await props.file.source.getBytes(entry.offset, entry.length);
|
||||
let tile = new VectorTile(
|
||||
new Protobuf(
|
||||
new Uint8Array(view.buffer, view.byteOffset, view.byteLength)
|
||||
)
|
||||
);
|
||||
let newLayers = [];
|
||||
for (let [name, layer] of Object.entries(tile.layers)) {
|
||||
let features: Feature[] = [];
|
||||
for (var i = 0; i < layer.length; i++) {
|
||||
let feature = layer.feature(i);
|
||||
let p = path();
|
||||
let geom = feature.loadGeometry();
|
||||
|
||||
if (feature.type === 1) {
|
||||
for (let ring of geom) {
|
||||
for (let pt of ring) {
|
||||
p.arc(pt.x, pt.y, 20, 0, 2 * Math.PI);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
for (let ring of geom) {
|
||||
p.moveTo(ring[0].x, ring[0].y);
|
||||
for (var j = 1; j < ring.length; j++) {
|
||||
p.lineTo(ring[j].x, ring[j].y);
|
||||
}
|
||||
if (feature.type === 3) {
|
||||
p.closePath();
|
||||
}
|
||||
}
|
||||
}
|
||||
features.push({
|
||||
path: p.toString(),
|
||||
type: feature.type,
|
||||
id: feature.id,
|
||||
properties: feature.properties,
|
||||
});
|
||||
}
|
||||
newLayers.push({ features: features, name: name });
|
||||
}
|
||||
newLayers.sort(smartCompare);
|
||||
setLayers(newLayers);
|
||||
};
|
||||
|
||||
if (props.entry) {
|
||||
fn(props.entry);
|
||||
}
|
||||
}, [props.entry]);
|
||||
|
||||
let elems = layers.map((l, i) => (
|
||||
<LayerSvg
|
||||
key={i}
|
||||
layer={l}
|
||||
color={schemeSet3[i % 12]}
|
||||
setSelectedFeature={setSelectedFeature}
|
||||
></LayerSvg>
|
||||
));
|
||||
|
||||
return (
|
||||
<div>
|
||||
<svg viewBox="0 0 4096 4096" width={800} height={800}>
|
||||
{elems}
|
||||
</svg>
|
||||
{selectedFeature ? <FeatureProperties feature={selectedFeature} /> : null}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const RasterPreview = (props: { file: PMTiles; entry: Entry }) => {
|
||||
let [imgSrc, setImageSrc] = useState<string>("");
|
||||
|
||||
useEffect(() => {
|
||||
let fn = async (entry: Entry) => {
|
||||
// TODO 0,0,0 is broken
|
||||
let view = await props.file.source.getBytes(entry.offset, entry.length);
|
||||
let blob = new Blob([view]);
|
||||
var imageUrl = window.URL.createObjectURL(blob);
|
||||
setImageSrc(imageUrl);
|
||||
};
|
||||
|
||||
if (props.entry) {
|
||||
fn(props.entry);
|
||||
}
|
||||
}, [props.entry]);
|
||||
|
||||
return <img src={imgSrc}></img>;
|
||||
};
|
||||
|
||||
function Inspector(props: { file: PMTiles }) {
|
||||
let [entryRows, setEntryRows] = useState<Entry[]>([]);
|
||||
let [selectedEntry, setSelectedEntry] = useState<Entry | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
let fn = async () => {
|
||||
let entries = await props.file.root_entries();
|
||||
setEntryRows(entries);
|
||||
};
|
||||
|
||||
fn();
|
||||
}, [props.file]);
|
||||
|
||||
let rows = entryRows.map((e, i) => (
|
||||
<TileRow key={i} entry={e} setSelectedEntry={setSelectedEntry}></TileRow>
|
||||
));
|
||||
|
||||
let tilePreview = <div></div>;
|
||||
if (selectedEntry) {
|
||||
tilePreview = <VectorPreview file={props.file} entry={selectedEntry} />;
|
||||
} else {
|
||||
}
|
||||
|
||||
return (
|
||||
<Split>
|
||||
<TableContainer>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>z</th>
|
||||
<th>x</th>
|
||||
<th>y</th>
|
||||
<th>offset</th>
|
||||
<th>length</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>{rows}</tbody>
|
||||
</table>
|
||||
</TableContainer>
|
||||
<Pane>{tilePreview}</Pane>
|
||||
</Split>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -8,14 +8,10 @@ const MapContainer = styled("div", {
|
||||
height: "calc(100vh - $4)",
|
||||
});
|
||||
|
||||
function LeafletMap(props:{file:string, tileType: string | null}) {
|
||||
const p = new PMTiles(
|
||||
"https://protomaps-static.sfo3.digitaloceanspaces.com/osm_carto.pmtiles"
|
||||
);
|
||||
|
||||
function LeafletMap(props: { file: PMTiles; tileType: string | null }) {
|
||||
useEffect(() => {
|
||||
const map = L.map("map").setView([0, 0], 0);
|
||||
leafletLayer(p, {
|
||||
leafletLayer(props.file, {
|
||||
attribution:
|
||||
'© <a href="https://openstreetmap.org">OpenStreetMap</a> contributors',
|
||||
}).addTo(map);
|
||||
|
||||
@@ -6,28 +6,140 @@ import Inspector from "./Inspector";
|
||||
import LeafletMap from "./LeafletMap";
|
||||
import MaplibreMap from "./MaplibreMap";
|
||||
|
||||
function Loader(props: { file: string }) {
|
||||
let [tab, setTab] = useState("maplibre");
|
||||
import { MagnifyingGlassIcon, ImageIcon } from "@radix-ui/react-icons";
|
||||
import * as ToolbarPrimitive from "@radix-ui/react-toolbar";
|
||||
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
||||
|
||||
const StyledToolbar = styled(ToolbarPrimitive.Root, {
|
||||
display: "flex",
|
||||
padding: 10,
|
||||
width: "100%",
|
||||
boxSizing: "border-box",
|
||||
minWidth: "max-content",
|
||||
borderRadius: 6,
|
||||
backgroundColor: "white",
|
||||
boxShadow: `0 2px 10px "black"`,
|
||||
});
|
||||
|
||||
const itemStyles = {
|
||||
all: "unset",
|
||||
flex: "0 0 auto",
|
||||
color: "black",
|
||||
height: 25,
|
||||
padding: "0 5px",
|
||||
borderRadius: 4,
|
||||
display: "inline-flex",
|
||||
fontSize: 13,
|
||||
lineHeight: 1,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
"&:hover": { backgroundColor: "$hover", color: "blue" },
|
||||
"&:focus": { position: "relative", boxShadow: `0 0 0 2px blue` },
|
||||
};
|
||||
|
||||
const StyledButton = styled(
|
||||
ToolbarPrimitive.Button,
|
||||
{
|
||||
...itemStyles,
|
||||
paddingLeft: 10,
|
||||
paddingRight: 10,
|
||||
color: "white",
|
||||
backgroundColor: "blue",
|
||||
},
|
||||
{ "&:hover": { color: "white", backgroundColor: "red" } }
|
||||
);
|
||||
|
||||
const StyledLink = styled(
|
||||
ToolbarPrimitive.Link,
|
||||
{
|
||||
...itemStyles,
|
||||
backgroundColor: "transparent",
|
||||
color: "black",
|
||||
display: "inline-flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
{ "&:hover": { backgroundColor: "transparent", cursor: "pointer" } }
|
||||
);
|
||||
|
||||
const StyledSeparator = styled(ToolbarPrimitive.Separator, {
|
||||
width: 1,
|
||||
backgroundColor: "black",
|
||||
margin: "0 10px",
|
||||
});
|
||||
|
||||
const StyledToggleGroup = styled(ToolbarPrimitive.ToggleGroup, {
|
||||
display: "inline-flex",
|
||||
borderRadius: 4,
|
||||
});
|
||||
|
||||
const StyledToggleItem = styled(ToolbarPrimitive.ToggleItem, {
|
||||
...itemStyles,
|
||||
boxShadow: 0,
|
||||
backgroundColor: "white",
|
||||
marginLeft: 2,
|
||||
"&:first-child": { marginLeft: 0 },
|
||||
"&[data-state=on]": { backgroundColor: "red", color: "blue" },
|
||||
});
|
||||
|
||||
const StyledOverlay = styled(DialogPrimitive.Overlay, {
|
||||
backgroundColor: "black",
|
||||
position: "fixed",
|
||||
inset: 0,
|
||||
opacity: "40%",
|
||||
zIndex: 3,
|
||||
});
|
||||
|
||||
const StyledContent = styled(DialogPrimitive.Content, {
|
||||
backgroundColor: "white",
|
||||
borderRadius: 6,
|
||||
boxShadow:
|
||||
"hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px",
|
||||
position: "fixed",
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
transform: "translate(-50%, -50%)",
|
||||
width: "90vw",
|
||||
maxWidth: "450px",
|
||||
maxHeight: "85vh",
|
||||
padding: 25,
|
||||
zIndex: 4,
|
||||
"&:focus": { outline: "none" },
|
||||
});
|
||||
|
||||
const Toolbar = StyledToolbar;
|
||||
const ToolbarButton = StyledButton;
|
||||
const ToolbarSeparator = StyledSeparator;
|
||||
const ToolbarLink = StyledLink;
|
||||
const ToolbarToggleGroup = StyledToggleGroup;
|
||||
const ToolbarToggleItem = StyledToggleItem;
|
||||
|
||||
function Loader(props: { file: PMTiles }) {
|
||||
let [tab, setTab] = useState("inspector");
|
||||
let [tileType, setTileType] = useState<string | null>(null);
|
||||
let [metadata, setMetadata] = useState<[string, string][]>([]);
|
||||
let [modalOpen, setModalOpen] = useState<boolean>(false);
|
||||
|
||||
let view;
|
||||
if (tab === "leaflet") {
|
||||
view = <LeafletMap file={props.file} tileType={tileType}/>;
|
||||
view = <LeafletMap file={props.file} tileType={tileType} />;
|
||||
} else if (tab === "maplibre") {
|
||||
view = <MaplibreMap file={props.file} tileType={tileType}/>;
|
||||
view = <MaplibreMap file={props.file} tileType={tileType} />;
|
||||
} else {
|
||||
view = <Inspector file={props.file} />;
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
let pmtiles = new PMTiles(props.file);
|
||||
let pmtiles = props.file;
|
||||
const fetchData = async () => {
|
||||
let metadata = await pmtiles.metadata();
|
||||
let m = await pmtiles.metadata();
|
||||
let tmp: [string, string][] = [];
|
||||
for (var key in m) {
|
||||
tmp.push([key, m[key]]);
|
||||
}
|
||||
setMetadata(tmp);
|
||||
|
||||
let resp = await fetch(props.file, {
|
||||
headers: { Range: "bytes=512000-512003" },
|
||||
});
|
||||
let magic = new DataView(await resp.arrayBuffer());
|
||||
let magic = await props.file.source.getBytes(512000, 4);
|
||||
let b0 = magic.getUint8(0);
|
||||
let b1 = magic.getUint8(1);
|
||||
let b2 = magic.getUint8(2);
|
||||
@@ -36,7 +148,7 @@ function Loader(props: { file: string }) {
|
||||
if (b0 == 0x89 && b1 == 0x50 && b2 == 0x4e && b3 == 0x47) {
|
||||
setTileType("png");
|
||||
} else if (b0 == 0xff && b1 == 0xd8 && b2 == 0xff && b3 == 0xe0) {
|
||||
setTileType("jpg")
|
||||
setTileType("jpg");
|
||||
} else if (b0 == 0x1f && b1 == 0x8b) {
|
||||
setTileType("mvt.gz");
|
||||
} else {
|
||||
@@ -46,10 +158,75 @@ function Loader(props: { file: string }) {
|
||||
fetchData();
|
||||
}, [props.file]);
|
||||
|
||||
return <>
|
||||
<div>{props.file} | {tileType}</div>
|
||||
{view}
|
||||
</>;
|
||||
const metadataRows = metadata.map((d, i) => (
|
||||
<tr key={i}>
|
||||
<td>{d[0]}</td>
|
||||
<td>{d[1]}</td>
|
||||
</tr>
|
||||
));
|
||||
|
||||
const closeModal = () => {
|
||||
setModalOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Toolbar aria-label="Formatting options">
|
||||
<ToolbarToggleGroup
|
||||
type="single"
|
||||
defaultValue="center"
|
||||
aria-label="Text alignment"
|
||||
value={tab}
|
||||
onValueChange={setTab}
|
||||
>
|
||||
<ToolbarToggleItem value="inspector" aria-label="Left aligned">
|
||||
<MagnifyingGlassIcon /> Tile Inspector
|
||||
</ToolbarToggleItem>
|
||||
<ToolbarToggleItem value="leaflet" aria-label="Center aligned">
|
||||
Leaflet
|
||||
</ToolbarToggleItem>
|
||||
<ToolbarToggleItem value="maplibre" aria-label="Right aligned">
|
||||
MapLibre
|
||||
</ToolbarToggleItem>
|
||||
</ToolbarToggleGroup>
|
||||
<ToolbarSeparator />
|
||||
<ToolbarLink href="#" target="_blank" css={{ marginRight: 10 }}>
|
||||
{props.file.source.getKey()}
|
||||
</ToolbarLink>
|
||||
<ToolbarButton
|
||||
css={{ marginLeft: "auto" }}
|
||||
onClick={() => setModalOpen(true)}
|
||||
>
|
||||
Metadata
|
||||
</ToolbarButton>
|
||||
</Toolbar>
|
||||
|
||||
<DialogPrimitive.Root open={modalOpen}>
|
||||
<DialogPrimitive.Trigger />
|
||||
<DialogPrimitive.Portal>
|
||||
<StyledOverlay />
|
||||
<StyledContent
|
||||
onEscapeKeyDown={closeModal}
|
||||
onPointerDownOutside={closeModal}
|
||||
>
|
||||
<DialogPrimitive.Title />
|
||||
<DialogPrimitive.Description />
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>key</th>
|
||||
<th>value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>{metadataRows}</tbody>
|
||||
</table>
|
||||
<DialogPrimitive.Close />
|
||||
</StyledContent>
|
||||
</DialogPrimitive.Portal>
|
||||
</DialogPrimitive.Root>
|
||||
{view}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Loader;
|
||||
|
||||
@@ -8,33 +8,33 @@ const MapContainer = styled("div", {
|
||||
height: "calc(100vh - $4)",
|
||||
});
|
||||
|
||||
const rasterStyle = (file:string) => {
|
||||
const rasterStyle = (file: PMTiles) => {
|
||||
return {
|
||||
version: 8,
|
||||
sources: {
|
||||
source: {
|
||||
type: "raster",
|
||||
tiles: ["pmtiles://" + file + "/{z}/{x}/{y}"],
|
||||
maxzoom:4
|
||||
tiles: ["pmtiles://" + file.source.getKey() + "/{z}/{x}/{y}"],
|
||||
maxzoom: 4,
|
||||
},
|
||||
},
|
||||
layers: [
|
||||
{
|
||||
id: "raster",
|
||||
type: "raster",
|
||||
source: "source"
|
||||
source: "source",
|
||||
},
|
||||
],
|
||||
};
|
||||
};
|
||||
|
||||
const vectorStyle = (file:string) => {
|
||||
const vectorStyle = (file: PMTiles) => {
|
||||
return {
|
||||
version: 8,
|
||||
sources: {
|
||||
source: {
|
||||
type: "vector",
|
||||
tiles: ["pmtiles://" + file + "/{z}/{x}/{y}"],
|
||||
tiles: ["pmtiles://" + file.source.getKey() + "/{z}/{x}/{y}"],
|
||||
maxzoom: 7,
|
||||
},
|
||||
},
|
||||
@@ -62,11 +62,12 @@ const vectorStyle = (file:string) => {
|
||||
};
|
||||
};
|
||||
|
||||
function MaplibreMap(props: { file: string, tileType: string | null }) {
|
||||
function MaplibreMap(props: { file: PMTiles; tileType: string | null }) {
|
||||
let mapRef = useRef<HTMLDivElement>(null);
|
||||
useEffect(() => {
|
||||
let cache = new ProtocolCache();
|
||||
maplibregl.addProtocol("pmtiles", cache.protocol);
|
||||
cache.add(props.file);
|
||||
|
||||
const map = new maplibregl.Map({
|
||||
container: "map",
|
||||
@@ -74,6 +75,7 @@ function MaplibreMap(props: { file: string, tileType: string | null }) {
|
||||
center: [0, 0],
|
||||
style: rasterStyle(props.file) as any,
|
||||
}); // TODO maplibre types (not any)
|
||||
map.addControl(new maplibregl.NavigationControl({}));
|
||||
map.on("load", map.resize);
|
||||
|
||||
return () => {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { useState, Dispatch, SetStateAction } from "react";
|
||||
import { useState, Dispatch, SetStateAction, useCallback } from "react";
|
||||
import maplibregl from "maplibre-gl";
|
||||
import L from "leaflet";
|
||||
import { PMTiles } from "../../js";
|
||||
import { PMTiles, FileSource } from "../../js";
|
||||
import { styled } from "./stitches.config";
|
||||
import { useDropzone } from "react-dropzone";
|
||||
|
||||
@@ -84,10 +84,10 @@ const Example = styled("div", {
|
||||
variants: {
|
||||
selected: {
|
||||
true: {
|
||||
backgroundColor:"red"
|
||||
}
|
||||
}
|
||||
}
|
||||
backgroundColor: "red",
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const ExampleList = styled("div", {
|
||||
@@ -97,29 +97,40 @@ const ExampleList = styled("div", {
|
||||
});
|
||||
|
||||
const EXAMPLE_FILES = [
|
||||
"https://protomaps-static.sfo3.digitaloceanspaces.com/osm_carto.pmtiles"
|
||||
]
|
||||
"https://protomaps-static.sfo3.digitaloceanspaces.com/osm_carto.pmtiles",
|
||||
"https://protomaps-static.sfo3.digitaloceanspaces.com/mantle-trial.pmtiles",
|
||||
"https://protomaps-static.sfo3.digitaloceanspaces.com/cb_2018_us_zcta510_500k_nolimit.pmtiles",
|
||||
];
|
||||
|
||||
function Start(props:{setFile:Dispatch<SetStateAction<string>>}) {
|
||||
function Start(props: {
|
||||
setFile: Dispatch<SetStateAction<PMTiles | undefined>>;
|
||||
}) {
|
||||
const onDrop = useCallback((acceptedFiles: File[]) => {
|
||||
props.setFile(new PMTiles(new FileSource(acceptedFiles[0])));
|
||||
}, []);
|
||||
|
||||
const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
|
||||
const { acceptedFiles, getRootProps, getInputProps } = useDropzone({
|
||||
onDrop,
|
||||
});
|
||||
|
||||
let [remoteUrl, setRemoteUrl] = useState<string>("");
|
||||
let [selectedExample, setSelectedExample] = useState<number | null>(1);
|
||||
|
||||
const onRemoteUrlChangeHandler = (event:React.ChangeEvent<HTMLInputElement>) => {
|
||||
const onRemoteUrlChangeHandler = (
|
||||
event: React.ChangeEvent<HTMLInputElement>
|
||||
) => {
|
||||
setRemoteUrl(event.target.value);
|
||||
}
|
||||
};
|
||||
|
||||
const loadExample = (i:number) => {
|
||||
const loadExample = (i: number) => {
|
||||
return () => {
|
||||
props.setFile(EXAMPLE_FILES[i]);
|
||||
}
|
||||
}
|
||||
props.setFile(new PMTiles(EXAMPLE_FILES[i]));
|
||||
};
|
||||
};
|
||||
|
||||
const onSubmit = () => {
|
||||
props.setFile("abcd");
|
||||
}
|
||||
// props.setFile(new PMTiles("abcd"));
|
||||
};
|
||||
|
||||
return (
|
||||
<Container>
|
||||
@@ -130,7 +141,9 @@ function Start(props:{setFile:Dispatch<SetStateAction<string>>}) {
|
||||
placeholder="https://example.com/my_archive.pmtiles"
|
||||
onChange={onRemoteUrlChangeHandler}
|
||||
></Input>
|
||||
<Button color="gray" onClick={onSubmit}>Load</Button>
|
||||
<Button color="gray" onClick={onSubmit}>
|
||||
Load
|
||||
</Button>
|
||||
<Label htmlFor="localFile">Select a local file</Label>
|
||||
<Dropzone {...getRootProps()}>
|
||||
<input {...getInputProps()} />
|
||||
@@ -138,7 +151,11 @@ function Start(props:{setFile:Dispatch<SetStateAction<string>>}) {
|
||||
</Dropzone>
|
||||
<Label>Load an example</Label>
|
||||
<ExampleList>
|
||||
{EXAMPLE_FILES.map((e,i) => <Example key={i} onClick={loadExample(i)}>{e}</Example>)}
|
||||
{EXAMPLE_FILES.map((e, i) => (
|
||||
<Example key={i} onClick={loadExample(i)}>
|
||||
{e}
|
||||
</Example>
|
||||
))}
|
||||
</ExampleList>
|
||||
</Container>
|
||||
);
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import App from './App'
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import App from "./App";
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||
ReactDOM.createRoot(document.getElementById("root")!).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
)
|
||||
);
|
||||
|
||||
@@ -5,6 +5,8 @@ export const { styled } = createStitches({
|
||||
colors: {
|
||||
black: "rgba(0, 0, 0)",
|
||||
white: "rgba(236, 237, 238)",
|
||||
hover: "#666",
|
||||
selected: "#444",
|
||||
},
|
||||
fonts: {
|
||||
sans: "Inter, sans-serif",
|
||||
@@ -48,7 +50,13 @@ export const { styled } = createStitches({
|
||||
});
|
||||
|
||||
export const globalStyles = globalCss({
|
||||
"*": { margin: 0, padding: 0, border: 0, fontFamily: "Inter, sans-serif", xborder: "1px solid gold" },
|
||||
"*": {
|
||||
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')"],
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user