Interactive GIS project map and story page for a Malaysian environmental NGO, showing a two-phase peatland rehabilitation and fire-prevention programme in the Southeast Pahang Peatland Landscape (SEPPL).
Interactive GIS project map and story page for a Malaysian environmental NGO, showing a two-phase peatland rehabilitation and fire-prevention programme in the Southeast Pahang Peatland Landscape (SEPPL).
The brief
An environmental NGO needed to show a corporate funder, and the public, what a decade of peatland work in Pahang actually looks like on the ground: where the project boundaries sit, which areas were replanted and rewetted, which villages take part, and where fire patrols and monitoring points are. The source material was GIS exports in KML, folders of field photographs and a written report per phase.
What I built
- Interactive map on satellite imagery with six toggleable layers: project boundary, rehabilitation sites, communities involved, biodiversity monitoring, CEPA (awareness and education) programmes and fire monitoring.
- Phase filter on each layer (Phase 1, Phase 2 or both), so the two funding phases can be compared on the same map.
- Marker popups with photo galleries and a full-screen lightbox, covering 7 partner villages, a 26-species camera-trap table and 29 fire danger rating signboards and water level markers.
- Project story page with Phase 1 and Phase 2 tabs: aims, key activities, outcomes, headline figures and field photographs, linking into the map.
- Satellite / street map switch, a colour legend, and a bottom-sheet layer panel on mobile.
How it was built
- Leaflet with Esri satellite tiles; the client’s KML converted to GeoJSON by a Python build script.
- All copy, figures and coordinates live in JSON files, not in the HTML, so content changes need no code edits.
- Photos batch-converted (including iPhone HEIC) to WebP with captions and dates in a manifest.
- Runs offline: the whole demo opens by double-clicking index.html, with the data bundled into one script as a fallback for file:// use.
- Automated checks trace every item in the client’s revision rounds (figures, coordinates, photo order, marker colours measured in CIE Lab so no two layers look alike on satellite) before a build can be shipped.
Need a map like this?
If your organisation has GIS data, field photos and reports that nobody outside the team ever sees, I can turn them into an interactive map that funders and the public can explore. Talk to me about your project.
