fix: add flatgeobuf file link in data page (#4232)

UNDP-Data · Oct 8, 2024 · 3a81d7d · 3a81d7d
1 parent 12e3852
commit 3a81d7d
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 22 deletions.
diff --git a/.changeset/metal-humans-end.md b/.changeset/metal-humans-end.md
@@ -0,0 +1,5 @@
+---
+"geohub": patch
+---
+
+fix: add flatgeobuf file link in data page
diff --git a/sites/geohub/src/lib/server/helpers/createDatasetLinks.ts b/sites/geohub/src/lib/server/helpers/createDatasetLinks.ts
@@ -1,5 +1,5 @@
 import { getBase64EncodedUrl } from '$lib/helper';
-import type { DatasetFeature, Tag } from '$lib/types';
+import type { DatasetFeature, Tag, VectorTileMetadata } from '$lib/types';
 import { generateAzureBlobSasToken } from './generateAzureBlobSasToken';
 
 export const createDatasetLinks = async (
@@ -256,11 +256,49 @@ export const createDatasetLinks = async (
 			if (!feature.properties.url.startsWith('pmtiles://')) {
 				pbfUrl = pbfUrl.replace('/{z}/{x}/{y}', '/0/0/0');
 			}
+			const metadataUrl = `${origin}/api/vector/azstorage/metadata.json?pbfpath=${encodeURIComponent(pbfUrl)}`;
 			feature.properties.links.push({
 				rel: 'metadatajson',
 				type: 'application/json',
-				href: `${origin}/api/vector/azstorage/metadata.json?pbfpath=${encodeURIComponent(pbfUrl)}`
+				href: metadataUrl
 			});
+
+			if (pbfUrl.startsWith('pmtiles://')) {
+				const resMetadata = await fetch(metadataUrl);
+				if (resMetadata.ok) {
+					const metadata: VectorTileMetadata = await resMetadata.json();
+					if (metadata.json) {
+						const availableLayers = metadata.json.vector_layers.map((l) => l.id);
+						const pmtilesUrl = new URL(pbfUrl.replace('pmtiles://', ''));
+						if (availableLayers.length === 1) {
+							const fgbUrl = new URL(`${pmtilesUrl.pathname}.fgb${pmtilesUrl.search}`, pmtilesUrl);
+							const resFgb = await fetch(fgbUrl);
+							if (resFgb.ok) {
+								feature.properties.links.push({
+									rel: 'flatgeobuf',
+									type: 'application/json',
+									href: fgbUrl.href
+								});
+							}
+						} else {
+							for (const layer of availableLayers) {
+								const fgbUrl = new URL(
+									`${pmtilesUrl.pathname}.${layer}.fgb${pmtilesUrl.search}`,
+									pmtilesUrl
+								);
+								const resFgb = await fetch(fgbUrl);
+								if (resFgb.ok) {
+									feature.properties.links.push({
+										rel: `flatgeobuf-${layer}`,
+										type: 'application/json',
+										href: fgbUrl.href
+									});
+								}
+							}
+						}
+					}
+				}
+			}
 		}
 	}
 

diff --git a/sites/geohub/src/routes/(app)/data/[id]/+page.svelte b/sites/geohub/src/routes/(app)/data/[id]/+page.svelte
@@ -78,18 +78,20 @@
 	const accessIcon = getAccessLevelIcon(feature.properties.access_level, true);
 
 	const links = feature.properties.links;
-	const datasetApi = links.find((l) => l.rel === 'self')?.href;
-	const downloadUrl = links.find((l) => l.rel === 'download')?.href;
-	const infoUrl = links.find((l) => l.rel === 'info')?.href;
-	const statisticsUrl = links.find((l) => l.rel === 'statistics')?.href;
-	const tilesUrl = links.find((l) => l.rel === 'tiles')?.href;
-	const metadatajson = links.find((l) => l.rel === 'metadatajson')?.href;
-	const tilejson = links.find((l) => l.rel === 'tilejson')?.href;
-	const pbfUrl = links.find((l) => l.rel === 'pbf')?.href;
-	const previewUrl = links.find((l) => l.rel === 'preview')?.href;
-	const previewStyleUrl = links.find((l) => l.rel === 'stylejson')?.href;
-
-	let isStac = feature.properties.tags.find((t) => t.key === 'type' && t.value === 'stac');
+	const datasetApi = links?.find((l) => l.rel === 'self')?.href;
+	const downloadUrl = links?.find((l) => l.rel === 'download')?.href;
+	const infoUrl = links?.find((l) => l.rel === 'info')?.href;
+	const statisticsUrl = links?.find((l) => l.rel === 'statistics')?.href;
+	const tilesUrl = links?.find((l) => l.rel === 'tiles')?.href;
+	const metadatajson = links?.find((l) => l.rel === 'metadatajson')?.href;
+	const tilejson = links?.find((l) => l.rel === 'tilejson')?.href;
+	const pbfUrl = links?.find((l) => l.rel === 'pbf')?.href;
+	const previewUrl = links?.find((l) => l.rel === 'preview')?.href;
+	const previewStyleUrl = links?.find((l) => l.rel === 'stylejson')?.href;
+	const fgbUrls = links?.filter((l) => l.rel.startsWith('flatgeobuf'));
+	let selectedFgbLayer = fgbUrls && fgbUrls.length > 0 ? fgbUrls[0].rel : '';
+
+	let isStac = feature.properties.tags?.find((t) => t.key === 'type' && t.value === 'stac');
 	let isRgbTile = false;
 
 	const tags: [{ key: string; value: string }] = feature.properties.tags as unknown as [
@@ -469,6 +471,44 @@
 						</div>
 					</FieldControl>
 				{/if}
+
+				{#if fgbUrls && fgbUrls.length > 0}
+					{@const fgbUrl = fgbUrls[0].href}
+					<FieldControl title="Flatgeobuf" fontWeight="bold" showHelp={false}>
+						<div slot="control">
+							{#if fgbUrls.length === 1}
+								{#await getFileSize(fgbUrl) then bytes}
+									<div class="is-flex is-align-content-center">
+										<DefaultLink href={fgbUrl} title={`Flatgeobuf ${bytes}`} target="">
+											<i slot="content" class="fas fa-download has-text-primary pl-2"></i>
+										</DefaultLink>
+									</div>
+								{/await}
+							{:else}
+								<div class="select mb-2">
+									<select bind:value={selectedFgbLayer}>
+										{#each fgbUrls as url}
+											{@const layer = url.rel.split('-')[1]}
+											<option value={url.rel}>{layer}</option>
+										{/each}
+									</select>
+								</div>
+								{#if selectedFgbLayer}
+									{@const fgbUrl = fgbUrls.find((x) => x.rel === selectedFgbLayer)?.href}
+									{#if fgbUrl}
+										{#await getFileSize(fgbUrl) then bytes}
+											<div class="is-flex is-align-content-center">
+												<DefaultLink href={fgbUrl} title={`Flatgeobuf ${bytes}`} target="">
+													<i slot="content" class="fas fa-download has-text-primary pl-2"></i>
+												</DefaultLink>
+											</div>
+										{/await}
+									{/if}
+								{/if}
+							{/if}
+						</div>
+					</FieldControl>
+				{/if}
 			</div>
 		</div>
 	</div>

diff --git a/sites/geohub/src/routes/api/datasets/[id]/table/layers/[layer].[format]/+server.ts b/sites/geohub/src/routes/api/datasets/[id]/table/layers/[layer].[format]/+server.ts
@@ -95,16 +95,17 @@ export const GET: RequestHandler = async ({ params, locals, url, fetch }) => {
 	}
 	pmttilesUrl = pmttilesUrl.replace('pmtiles://', '');
 
-	let fgbUrl = new URL(pmttilesUrl);
-	if (availableLayers.length === 1) {
-		fgbUrl = new URL(`${fgbUrl.pathname}.fgb${fgbUrl.search}`, fgbUrl);
-	} else {
-		fgbUrl = new URL(`${fgbUrl.pathname}.${layerMeta.id}.fgb${fgbUrl.search}`, fgbUrl);
+	const fgbUrls = dataset.properties.links?.filter((l) => l.rel.startsWith('flatgeobuf'));
+	if (!(fgbUrls && fgbUrls.length > 0)) {
+		error(404, { message: 'Flatgeobuf file does not exist.' });
 	}
 
-	const resFgb = await fetch(fgbUrl);
-	if (!resFgb.ok) {
-		error(resFgb.status, { message: 'Flatgeobuf file does not exist.' });
+	let fgbUrl = fgbUrls.find((l) => l.rel === 'flatgeobuf')?.href;
+	if (availableLayers.length > 1) {
+		fgbUrl = fgbUrls.find((l) => l.rel === `flatgeobuf-${layerMeta.id}`)?.href;
+	}
+	if (!fgbUrl) {
+		error(404, { message: 'Flatgeobuf file does not exist.' });
 	}
 
 	// extract default bounds from metadata