Demo visualization functionality for major lakes on dummy GeoJSON file upload

Issue created with ChatGPT models' help¹

---

Description

Adapt an existing dummy GeoJSON dataset for the HydroLAKES layer so the visualization is easier to read and more visually meaningful inside the map UI².

This issue focuses on improving the appearance of the demo basin/lake layer using simple styling techniques such as color schemes, opacity, borders, layer ordering, or lightweight visualization improvements³. Contributors may reuse or modify existing dummy GeoJSON files already available in the repository fixtures folder⁴. Can name the final file lakes_visualization.geojson or something similar.

The goal is to keep the implementation very small and beginner-friendly while making the map layer visually clearer for users during demos and hackathon presentations¹.

---

Goals

• Adapt an existing dummy GeoJSON file for HydroLAKES¹ or create a new one
• Improve readability of the basin/lake visualization²
• Apply simple styling or color improvements³
• Keep implementation lightweight and easy to review⁴
• Optionally improve popup or hover readability if already supported¹

---

Implementation Instructions

• Use an existing dummy GeoJSON file from the fixtures folder as a starting point¹ or create a new one

• Create or adapt a HydroLAKES demo layer²

• Improve visualization using simple map styling techniques such as:

  • Fill colors
  • Opacity adjustments
  • Border colors
  • Layer ordering
  • Consistent color palette
  • Improved contrast between lakes/basins and background³

• Keep styling implementation simple and easy to understand⁴

• Verify that the updated layer renders correctly in the map UI¹

• Take before/after screenshots showing the visualization improvement²

Possible fixtures folder location:³

public/fixtures/

Example repository area:⁴

https://github.com/OpenSourceFellows/map_dashboard_hackathon/tree/main/public/fixtures

Optional lightweight improvements:¹

• Add clearer popup labels if already supported
• Adjust transparency so overlapping basins remain readable
• Use a more visually accessible color palette
• Improve visibility at common zoom levels

---

Expected Functionalities

Improved Basin Visualization

• Basin/lake polygons render clearly on the map¹
• Colors and borders improve readability compared to the original demo layer²

Lightweight Styling Enhancements

• Styling changes remain simple and maintainable³
• Visualization works correctly with static demo GeoJSON data⁴

---

Notes

• This issue is intentionally small and hackathon-friendly¹
• Contributors do not need backend integration²
• Static demo GeoJSON data is completely acceptable³
• Reusing existing fixtures data from the repository is encouraged⁴
• Long-term compatibility with future backend-driven GeoJSON layers is optional and not required¹

---

Acceptance Criteria

• HydroLAKES demo GeoJSON layer added or adapted¹. Can name the final file lakes_visualization.geojson or something similar.
• Basin/lake visualization is visibly improved²
• Styling changes remain lightweight and readable³
• Updated layer renders correctly in the map UI⁴
• Before/after screenshots included in PR¹
• GeoJSON structure remains valid²

---

Resources

¹ map_dashboard_hackathon fixtures folder

² GeoJSON Specification

³ Mapbox Data-Driven Styling Guide

⁴ Leaflet GeoJSON Documentation

Reference Figma Design:
[[[OpenNature Map Figma Design](https://www.figma.com/design/eRcnlUKzSsIJv3JcOMddwU/OpenNature-Map?node-id=5771-3944&t=PvHYPjlEBBF151A0-0&utm_source=chatgpt.com)](https://www.figma.com/design/eRcnlUKzSsIJv3JcOMddwU/OpenNature-Map?node-id=5771-3944&t=PvHYPjlEBBF151A0-0&utm_source=chatgpt.com)](https://www.figma.com/proto/e9z8edludVssFYABGEWsoI/OpenNature-Map--Hackathons-?node-id=1-1465&viewport=787%2C545%2C0.11&t=Xwc2asfn9Qksi99P-8&scaling=scale-down&content-scaling=fixed&starting-point-node-id=1%3A896&page-id=0%3A1&hide-ui=1)

Start by inspecting the existing dummy GeoJSON files in public/fixtures/ and the map UI code that loads them. Adapt or add a HydroLAKES demo layer with clearer styling, then verify that it renders correctly, the GeoJSON remains valid, and before/after screenshots can document the improvement.