Web Design & Development Project for:

SEPPL Peatland Interactive Project Map

IT & Technology, NGO
Status: Completed

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).

I built an interactive GIS project map for a Malaysian environmental NGO using Leaflet. It brings a two-phase peatland rehabilitation and fire-prevention programme into one place. The work covers the Southeast Pahang Peatland Landscape, or SEPPL, with a story page beside the interactive GIS project map so visitors can understand the programme before exploring individual locations.

The brief

The NGO needed to show a corporate funder and the public what its work looked like on the ground. Its source material included KML exports, field photographs and reports for each phase. A report could explain an activity, but the reader also needed to see where it happened. I brought those materials together without naming the organisation here. The interactive GIS project map connects boundaries, rehabilitation areas, participating villages and monitoring points to the project narrative.

What I built

  • Six selectable layers – I separated the project boundary, rehabilitation sites, participating communities, biodiversity monitoring, awareness and education programmes, and fire monitoring. Visitors can choose the subject they want to explore rather than read every category at once.
  • A phase filter – Each layer can show Phase 1, Phase 2 or both. The same map supports comparison between the funding phases without making visitors switch between separate maps and remember where each location sits.
  • Photographs at the location – Marker popups contain galleries with a full-screen lightbox. The material includes seven partner villages, a camera-trap table covering 26 species, and 29 fire danger rating signboards and water level markers.
  • A project story page – Tabs divide the two phases into aims, activities, outcomes, headline figures and field photographs. Links connect that written explanation to the interactive GIS project map, keeping the background available alongside the geographic detail.
  • Map controls for different screens – A satellite and street map switch gives visitors two ways to read the area. A colour legend explains the layers, while a bottom-sheet layer panel provides the controls on mobile.
  • Structured project data – I converted the KML to GeoJSON with a Python build script. Copy, figures and coordinates sit in JSON files rather than the HTML, so updating the project content does not require editing the page markup.
  • Prepared field photography – I batch-converted the photographs, including iPhone HEIC files, to WebP. Captions and dates are held in a manifest, keeping those details attached to the photo collection used across the project.
  • Checks against client revisions – Automated checks cover figures, coordinates, photo order and marker colours. Colour comparisons use CIE Lab measurements to help distinguish the layers against satellite imagery before a build is shipped.

How the interactive GIS project map works

A visitor can start with the story, choose a phase and read what that phase covers. Opening the interactive GIS project map then places those activities in their geographic setting. A rehabilitation site is no longer just a name in a report: it has a location alongside the project boundary and the other categories of work.

The visitor can narrow the layers, compare phases and open a marker for photographs and detail. I kept the interactive GIS project map and its supporting content connected, so people can move between the overall programme and an individual site. The data also has a bundled script fallback for opening the demo directly from an index.html file.

Result

The interactive GIS project map gives the NGO a way to present its field material as something people can explore. Funders and public visitors can compare project phases, find participating communities and inspect the photographs attached to locations. The result is a geographic view of the documented work, with the written project story still available for context.

Need to turn field reports into an interactive map?

If your organisation has location data and photographs spread across reports, I can help you present them together. The starting point is the material you already have and the questions your audience needs answered. Tell me what you need and I will scope it properly.

 

Design a website isn’t an easy task but building an impactful website for your business will be the most important goal.

Want a similar website like this?

Web Design and Development Projects by Malaysia Freelance Web Designer

Each of the website project will be design from scratch. Design process includes; research, competitor study, benchmark, sketch and prototyping. There will be no limit of mockup design revision. Only approved mockup will be proceed to development.

Other related projects

FIDO - Malaysia Freelance Web Designer
FIDO - Malaysia Freelance Web Designer
FIDO - Malaysia Freelance Web Designer
Servis Buat Website di Malaysia. fidodesign.net
The logos and visuals on this website belong to their respective owners and are subject to copyright. fidodesign does not claim or issue copyright on behalf of these owners. The information provided on this website is for general purposes only and is intended to be as accurate and up to date as possible. When you visit or engage with our sites, services, applications, tools, or messaging, we or our authorized service providers may utilize cookies, web beacons, and similar technologies to store information. This helps us enhance your experience, ensuring it is better, faster, and more secure, as well as serving advertising purposes.
Copyright FIDO RESOURCES (SA0477312-X) © fidodesign.net - Malaysia Freelance Web Designer | All Right Reserved.

Seriously?