A modern, responsive web application for browsing and discovering open aerial imagery from OpenAerialMap. Built with React, MapLibre GL, and Tailwind CSS.
Live Demo: https://cgiovando.github.io/oam-vibe/
Note: This is an experimental pilot application and does not yet fully replace the official OAM Browser. This app was built primarily with AI assistance—see the AI Disclaimer for details. See also Limitations.
- Interactive Map Browser - Pan and zoom to explore aerial imagery worldwide
- Cloud-Native Data - Powered by PMTiles vector tiles from the new OAM API — all ~20k images available with zero API calls on map move
- Grid Clustering - Image counts aggregated into grid cells at low zoom, footprints at mid zoom, thumbnail previews at high zoom
- Full-Resolution Imagery - TMS tile overlay from TiTiler at zoom 14+ for crisp, full-resolution viewing of selected images
- Overlapping Image Picker - Click where multiple footprints overlap to get a disambiguation popup listing all images
- Filters - Client-side filtering by platform (UAV, Satellite, Aircraft), date range, and license — instant, no server round-trip
- Image Details - View metadata including provider, sensor, resolution (GSD), and file size
- Direct Downloads - Download GeoTIFF files directly from the interface
- Editor Integration - Open imagery in iD or JOSM, copy TMS URLs for use in any editor
- Show on Map - Click to fly to any image's location on the map
- Layer Modes - Toggle between footprints only and live image previews
- Basemap Switcher - Switch between Carto Light, HOT OSM, and Mapbox Satellite basemaps
- Mini Map - Overview map showing current viewport location
- Location Search - Search for places to quickly navigate the map
- URL State - Lat, lon, zoom, and selected image persisted in the URL for easy sharing
- Responsive Design - Works on desktop and tablet devices
This application uses the new cloud-native OAM API — a static PMTiles vector tileset hosted on S3:
- PMTiles:
s3://cgiovando-oam-api/images.pmtiles— vector tiles with animageslayer containing ~20k image footprints and metadata - TMS Tiles: Full-resolution imagery served via TiTiler at
titiler.hotosm.org - ETL: Image metadata fetched from the OAM API, converted to GeoJSON, and tiled with tippecanoe
This replaces the previous architecture that relied on per-request API calls with a 50-result limit and CORS proxy workarounds. With PMTiles, tiles are cached by the browser and panning/zooming is instant.
- React 19 - UI framework
- Vite 7 - Build tool and dev server
- MapLibre GL JS - Map rendering
- PMTiles - Vector tile access (static S3 file)
- Tailwind CSS 3 - Styling
- Turf.js - Geospatial analysis (bbox)
- Node.js 18+
- npm
# Clone the repository
git clone https://github.com/cgiovando/oam-vibe.git
cd oam-vibe
# Install dependencies
npm install
# Start development server
npm run devThe app will be available at http://localhost:5173/oam-vibe/
# Run development server with hot reload
npm run dev
# Run linting
npm run lint
# Build for production
npm run build
# Preview production build locally
npm run previewThe app is configured for GitHub Pages deployment:
# Build and deploy to GitHub Pages
npm run deployThis runs vite build and pushes the dist/ folder to the gh-pages branch.
src/
├── App.jsx # Main app component, all state management
├── main.jsx # Entry point
├── index.css # Tailwind directives + popup styles
└── components/
├── Map.jsx # MapLibre map: PMTiles source, layers, grid, previews, TMS, events
├── Sidebar.jsx # Scrollable image list with lazy loading
├── ImageCard.jsx # Image card: thumbnail, metadata, actions (download, TMS, iD, JOSM)
├── MapFilterBar.jsx # Dropdown filters (platform, date, license)
├── Toolbar.jsx # Left-side map controls (search, basemap, zoom)
├── MiniMap.jsx # Bottom-right overview map with viewport box
└── BurgerMenu.jsx # Top-right hamburger menu with links
This is an experimental pilot application and does not yet fully replace the official OAM Browser:
-
Missing Features:
- Image uploader (available at upload.openaerialmap.org)
- User authentication
- Image management in user pages
-
Technical Limitations:
- Thumbnail CORS: Preview overlays use
corsproxy.ioto load thumbnails from S3, which can be unreliable. A CORS policy on the S3 bucket would eliminate this dependency. - Static Data: The PMTiles file is regenerated periodically via ETL — newly uploaded images won't appear until the next ETL run.
- License field: Some images may show "Unknown License" until the ETL is re-run with the updated schema.
- Thumbnail CORS: Preview overlays use
This project is being developed in alignment with the OpenAerialMap Roadmap, which outlines the strategic direction for OAM's development.
The project also aims to eventually align with the HOT Development Guide standards for integration into the broader Humanitarian OpenStreetMap Team ecosystem.
Contributions are welcome! Please feel free to submit issues and pull requests.
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
IMPORTANT NOTICE: The majority of this application's code was generated with assistance from AI tools.
This application was developed primarily using AI-assisted coding tools:
- Claude (Anthropic) - Code generation, debugging, and documentation
- Gemini (Google) - Code generation and problem-solving
What this means:
- The codebase was largely generated by AI based on requirements and prompts
- All functionality has been tested and verified to work as intended
- Features and user experience have been reviewed and approved by the product owner
- The application has been tested by humans for usability and correctness
What this does NOT mean:
- This is not a traditional hand-coded application
- Not every line of code has been manually reviewed by a professional developer
This disclosure follows emerging best practices for transparency in AI-assisted software development. We believe in being upfront about how this software was created.
This project is open source and available under the MIT License.
This project uses the following open-source packages, each under their respective licenses:
Runtime Dependencies:
| Package | License |
|---|---|
| React | MIT |
| React DOM | MIT |
| MapLibre GL JS | BSD-3-Clause |
| PMTiles | BSD-3-Clause |
| Turf.js (@turf/bbox, @turf/helpers) | MIT |
Development Dependencies:
| Package | License |
|---|---|
| Vite | MIT |
| Tailwind CSS | MIT |
| ESLint | MIT |
| PostCSS | MIT |
| Autoprefixer | MIT |
| gh-pages | MIT |
Data & Services:
- Imagery data is provided by OpenAerialMap contributors under various open licenses (see individual image metadata)
- Full-resolution tiles served by TiTiler hosted by HOT
- Basemap tiles by CARTO under CC BY 3.0
- Map data by OpenStreetMap contributors under ODbL
- OpenAerialMap - Open imagery platform
- Humanitarian OpenStreetMap Team (HOT) - OAM maintainers
- MapLibre - Open-source map rendering
- CARTO - Basemap tiles
- OpenStreetMap - Map data