geospatial-frontend

Build map-centric geospatial demo web apps with MapLibre globe rendering and DuckDB-WASM data access.

66|10|Updated Mar 19, 2026
One-click install
npx skills add https://github.com/isaaccorley/geospatial-skills --skill geospatial-frontend
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: geospatial-frontend
Source: https://github.com/isaaccorley/geospatial-skills/tree/main/plugins/geospatial-frontend/skills/geospatial-frontend
Command: npx skills add https://github.com/isaaccorley/geospatial-skills --skill geospatial-frontend

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you quickly scaffold high-quality geospatial demo frontends that let users explore satellite-backed retrieval and visualization without building a UI framework from scratch.

Core Features & Use Cases

  • Map-first MapLibre globe UI: Uses a 3D globe as the primary interaction surface with transparent HUD panels for search, controls, status, and results.
  • DuckDB-WASM geospatial data pipeline: Loads Parquet manifests and shards, performs spatial filtering, and computes similarity/embeddings in a web worker.
  • Interactive drawing + guided tutorial: Supports box and polygon AOI drawing, then provides a live multi-step spotlight walkthrough that simulates real actions for retrieval/search demo flows.

Quick Start

Ask your coding agent to scaffold a warm-dark MapLibre globe demo that supports AOI drawing, DuckDB-WASM backed filtering, and a multi-step retrieval visualization tutorial.

Frequently Asked Questions about geospatial-frontend

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a web app for satellite imagery retrieval and visualization?

Build satellite imagery retrieval web apps using a Vite and vanilla TypeScript setup with MapLibre for 3D globe rendering and DuckDB-WASM for spatial data access. It supports interactive AOI drawing and tutorial-driven search flows.

How does DuckDB-WASM handle geospatial filtering in the browser?

DuckDB-WASM handles geospatial filtering by loading Parquet manifests and shards in a web worker, performing spatial queries on demand. This keeps heavy compute operations off the main thread for efficient metadata and embedding retrieval.

Can I use MapLibre with vanilla TypeScript for interactive map drawing?

Yes, MapLibre works with vanilla TypeScript to support interactive box and polygon AOI drawing on a 3D globe. The implementation uses GeoJSON-based map layer pipelines with state-driven re-rendering for responsive updates.

What is the best way to scaffold a map-centric demo with a fixed HUD layout?

Scaffold a map-centric demo using a fixed HUD layout with transparent panels for search, controls, status, and results overlaid on a warm-dark MapLibre globe. This provides a guided multi-step spotlight walkthrough for retrieval flows.

Do I need web workers for DuckDB-WASM spatial queries in a mapping application?

Yes, web workers are required to run DuckDB-WASM spatial queries and compute similarity for embeddings without blocking the UI. This two-phase loading approach fetches metadata first, then loads embeddings on demand.

Why does my geospatial web app need a two-phase loading approach for satellite data?

A two-phase loading approach is needed to efficiently manage satellite data by loading metadata first, then fetching embeddings on demand. This prevents large data payloads from degrading the map rendering performance.