Geo Viewer
A Visual Studio Code extension for viewing geospatial data files on an interactive map. Open GeoPackage, FlatGeobuf, GeoJSON, Shapefile, and PMTiles files directly in VS Code with automatic map rendering, feature inspection, and layer selection.
Screenshots
| Format |
Extensions |
Notes |
| GeoPackage |
.gpkg |
Multi-layer support with layer selector |
| FlatGeobuf |
.fgb |
Streaming feature loading |
| GeoJSON |
.geojson |
Feature and FeatureCollection |
| Shapefile |
.shp |
Reads sibling .dbf for attributes |
| PMTiles |
.pmtiles |
Vector tile rendering with per-layer styling |
Features
- Interactive MapLibre GL JS map with pan, zoom, and rotate
- Click any feature to inspect its attributes in a popup
- Layer selector dropdown for multi-layer formats
- Auto zoom-to-fit with geometry-aware styling (polygons, lines, points)
- Configurable maximum feature count
- Fully client-side parsing — no server or native dependencies
Getting Started
Prerequisites
Install Dependencies
npm install
Build
Compile the TypeScript extension and bundle all vendor assets (MapLibre GL, sql.js WASM, format parsers):
npm run build
This runs esbuild to bundle the extension into out/extension.js, then copies and bundles all required media assets into media/.
Development
Use watch mode for continuous TypeScript compilation during development:
npm run watch
To test the extension locally, press F5 in VS Code (or run the Run Extension launch configuration). This opens a new Extension Development Host window with the extension loaded. Open any supported geospatial file to see it rendered on a map.
Alternatively, from a terminal:
code --extensionDevelopmentPath="$(pwd)"
Configuration
| Setting |
Default |
Description |
geoViewer.maxFeatures |
1000 |
Maximum number of features to display on the map |
Configure in VS Code settings (Ctrl+, / Cmd+,) or in .vscode/settings.json:
{
"geoViewer.maxFeatures": 5000
}
Packaging & Deployment
Create a .vsix Package
npm run package
This produces a geo-viewer-<version>.vsix file that can be shared and installed directly.
Install from .vsix
code --install-extension geo-viewer-1.0.0.vsix
Or in VS Code: Extensions → ... menu → Install from VSIX...
Publish to VS Code Marketplace
- Set the
publisher field in package.json to your marketplace publisher ID.
- Authenticate with
npx @vscode/vsce login <publisher>.
- Publish:
npx @vscode/vsce publish
Project Structure
src/
extension.ts # Extension entry point, registers custom editor
editorProvider.ts # Custom editor provider — reads files, creates webview
media/
main.js # Webview logic: map init, format routing, UI
gpkg.js # GeoPackage/WKB parser using sql.js
style.css # Webview styles
*.js / *.wasm # Bundled vendor libraries (generated by build)
scripts/
copy-assets.js # Build script to copy/bundle vendor assets
esbuild.js # esbuild config for extension bundling
License
See LICENSE for details.
