https://github.com/cheeaun/onemap-orthophoto
A map of Singapore using MapLibre GL JS and OneMap Orthophoto tiles.
https://github.com/cheeaun/onemap-orthophoto
Last synced: 12 days ago
JSON representation
A map of Singapore using MapLibre GL JS and OneMap Orthophoto tiles.
- Host: GitHub
- URL: https://github.com/cheeaun/onemap-orthophoto
- Owner: cheeaun
- Created: 2026-04-16T07:18:03.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2026-04-18T02:23:02.000Z (3 months ago)
- Last Synced: 2026-04-27T11:00:08.962Z (3 months ago)
- Language: HTML
- Homepage: https://cheeaun.github.io/onemap-orthophoto/
- Size: 938 KB
- Stars: 7
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# OneMap Orthophoto
[](https://cheeaun.github.io/onemap-orthophoto/)
### 🚀 [Try the Live Demo](https://cheeaun.github.io/onemap-orthophoto/)
[](https://cheeaun.github.io/onemap-orthophoto/)
A web application that renders Singapore's OneMap Orthophoto (satellite) tiles using [MapLibre GL JS](https://maplibre.org/), featuring a custom WebGL post-processing layer for real-time image enhancement.
## ✨ Features
* **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 `localStorage` and 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.
## 💡 Technical Note: The "Retina Hack"
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.
## 🛠️ Tech Stack
* **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.
## 🚀 Getting Started
### Prerequisites
* Node.js (v18 or higher recommended)
* npm
### Installation
1. Clone the repository and navigate to the project directory.
2. Install the dependencies:
```bash
npm install
```
### Development
Start the Vite development server:
```bash
npm run dev
```
The application will be available at `http://localhost:3000`.
### Production Build
Build the application for production:
```bash
npm run build
```
The optimized static files will be generated in the `dist` directory, ready to be served by any static file server.
## 🤖 Built with Google AI Studio
This project was generated using [Google AI Studio Build](https://aistudio.google.com/).
You can view and remix the original applet here: **[Remix on AI Studio](https://ais-pre-gicrjv347zg5b6pb5gcsu2-202745490252.asia-southeast1.run.app)**
## 🙏 Acknowledgments
* Map data © [OneMap](https://www.onemap.gov.sg/)
* Map data © [Singapore Land Authority (SLA)](https://www.sla.gov.sg/)