mirrors/PMTiles
1
0
Fork 0
mirror of https://github.com/protomaps/PMTiles.git synced 2026-02-04 19:01:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

app: viewer improvements [#555] (#557)

Browse Source 
* add line labels
* allow loading remote and local tilesets without clearing the current tileset
This commit is contained in:
Brandon Liu
2025-04-22 14:33:33 +08:00
committed by GitHub
parent 731f03d325
commit 26c857ff40
3 changed files with 228 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
app/src/PageTile.tsx
View File

@@ -18,6 +18,7 @@ import {
type Setter,
Show,
createEffect,
createMemo,
createResource,
createSignal,
onMount,
@@ -104,7 +105,7 @@ function layerFeatureCounts(
function ZoomableTile(props: {
zxy: Accessor<[number, number, number]>;
tileset: Tileset;
tileset: Accessor<Tileset>;
}) {
let containerRef: HTMLDivElement | undefined;
let svg: Selection<SVGSVGElement, unknown, null, undefined>;
@@ -211,20 +212,27 @@ function ZoomableTile(props: {
}
});
const [parsedTile] = createResource(props.zxy, async (zxy) => {
const tileset = props.tileset;
const inputs = createMemo(() => ({
zxy: props.zxy(),
tileset: props.tileset(),
}));
const [parsedTile] = createResource(inputs, async (i) => {
const tileset = i.tileset;
const zxy = i.zxy;
if (await tileset.isVector()) {
const data = await tileset.getZxy(zxy[0], zxy[1], zxy[2]);
if (!data) return;
const vectorLayers = await props.tileset.getVectorLayers();
const vectorLayers = await props.tileset().getVectorLayers();
return parseTile(data, vectorLayers);
}
return await tileset.getZxy(zxy[0], zxy[1], zxy[2]);
});
onMount(async () => {
if (await props.tileset.isVector()) {
const vectorLayers = await props.tileset.getVectorLayers();
createEffect(async () => {
const tileset = props.tileset();
if (await tileset.isVector()) {
const vectorLayers = await tileset.getVectorLayers();
setLayerVisibility(vectorLayers.map((v) => ({ id: v, visible: true })));
}
});
@@ -315,7 +323,7 @@ function ZoomableTile(props: {
}
function TileView(props: {
tileset: Tileset;
tileset: Accessor<Tileset>;
zxy: Accessor<[number, number, number] | undefined>;
setZxy: Setter<[number, number, number] | undefined>;
}) {
@@ -523,7 +531,7 @@ function PageTile() {
when={tileset()}
fallback={<ExampleChooser setTileset={setTileset} />}
>
{(t) => <TileView tileset={t()} zxy={zxy} setZxy={setZxy} />}
{(t) => <TileView tileset={t} zxy={zxy} setZxy={setZxy} />}
</Show>
</Frame>
);