Render Indaba zone boundaries from GeoJSON polygons

[roy-bme]

Motivation

• Zones were only shown as centre-point labels but the database now contains boundary_geojson polygons for all zones, so the map should display actual zone shapes.
• Polygons should be visually differentiated by zone type, be semi-transparent, and render behind business pins so markers remain prominent.

Description

• Updated the server-side fetch to include type and boundary_geojson from the zones table and pass them through to the client model (app/indaba/(ops)/map/page.tsx).
• Extended MapZone to carry optional type and boundary_geojson fields (components/ops/Map/types.ts).
• Implemented polygon rendering in the Leaflet map (components/ops/Map/BulawayoMap.tsx) using L.geoJSON(...) with zone-type color mapping, a semi-transparent fill (fillOpacity: 0.15), subtle border (opacity: 0.4), and hover interaction that increases fill opacity to 0.3 and shows the zone name tooltip.
• Added Leaflet panes (zonesPane, zoneLabelsPane) and layer groups so polygons render behind business markers while keeping existing centre-point text labels.

Testing

• Ran TypeScript checks with npm run typecheck, which completed successfully.
• No additional automated tests were added or run.

---

Codex Task

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
blackmasswebsite	Ready	Preview, Comment	May 11, 2026 11:10am

[supabase]

This pull request has been ignored for the connected project ipqmdinidqpmchggjdov because there are no changes detected in supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.

---

Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.