A web application that renders Singapore's OneMap Orthophoto (satellite) tiles using MapLibre GL JS, featuring a custom WebGL post-processing layer for real-time image enhancement.
- Singapore Satellite Imagery: Integrates directly with OneMap's Orthophoto tile service.
- Real-time WebGL Enhancements: Adjust the visual quality of the satellite imagery on the fly using custom WebGL shaders:
- Noise Reduction
- Sharpening
- Brightening
- Contrast
- Saturation
- Smart Presets & Persistence: Includes a "Best Effort" preset for quick optimization. Your custom settings are automatically saved to
localStorageand restored on your next visit. - Retina/HiDPI Support: Automatically detects high-density displays and adjusts tile sizes and zoom levels for the crispest possible imagery.
- Performance Optimized: The WebGL post-processing layer automatically disables itself when all settings are at their default (zero) to save GPU cycles.
OneMap natively serves 256px tiles, which appear blurry on Retina displays when stretched across 512 physical pixels. By explicitly halving MapLibre's tileSize to 128px on HiDPI screens, we squeeze the 256px images into a perfect 1:1 hardware pixel mapping for incredibly crisp satellite imagery.
- MapLibre GL JS - Open-source interactive map library.
- WebGL - Custom fragment shaders for real-time image manipulation.
- Vite 8 - Next-generation frontend tooling for fast builds and development.
- Node.js (v18 or higher recommended)
- npm
- Clone the repository and navigate to the project directory.
- Install the dependencies:
npm installStart the Vite development server:
npm run devThe application will be available at http://localhost:3000.
Build the application for production:
npm run buildThe optimized static files will be generated in the dist directory, ready to be served by any static file server.
This project was generated using Google AI Studio Build.
You can view and remix the original applet here: Remix on AI Studio
- Map data © OneMap
- Map data © Singapore Land Authority (SLA)