Fibre Coverage Map

Interactive GIS coverage checker built with Leaflet.js. Customers enter their address (or click on the map) to instantly see which fibre plans are available at their location.

Live demo: https://time2map.github.io/fibre-coverage/

---

Features

• Coverage check — type an address or click anywhere on the map
• Point-in-polygon detection — powered by Turf.js
• Two networks displayed:
  • Thinkspeed — residential estates in Cape Town
  • MFN Wholesale — national coverage (buildings + fibre routes)
• Products & pricing — plan cards shown when coverage is found
• Onboarding form — sign-up modal per plan with installation date picker
• Register interest — form for addresses not yet covered
• Layer toggles — show/hide each network independently
• Mobile-responsive layout

Tech stack

Layer	Library
Map	Leaflet.js 1.9
Geometry	Turf.js 6
Geocoding	Nominatim (OpenStreetMap, no API key required)
Tiles	OpenStreetMap
Data format	GeoJSON (converted from KMZ)

Project structure

index.html          — single-page app
css/style.css       — all styles
js/app.js           — map logic, geocoding, coverage check, UI
data/
  thinkspeed.geojson    — Thinkspeed coverage polygons (Cape Town)
  mfn_polygons.geojson  — MFN building polygons (national)
  mfn_routes.geojson    — MFN fibre routes (national)
  products.json         — plan catalog (name, speed, price, features)

Adding your own KMZ data

1. Place your .kmz file in the kmz/ folder
2. Run the converter (requires Python 3):

   python3 convert_kmz.py

   This extracts polygons, lines, and points into separate GeoJSON files under data/.
3. Add a new layer in js/app.js following the existing thinkspeed / mfn pattern
4. Add pricing plans to data/products.json under a matching key

Customising products & pricing

Edit data/products.json. Each network key maps to a provider object with a plans array:

{
  "your_network": {
    "provider": "Your ISP Name",
    "logo": "⚡",
    "color": "#0066cc",
    "plans": [
      {
        "name": "Home 50",
        "speed": "50 Mbps",
        "price": 599,
        "currency": "ZAR",
        "period": "month",
        "features": ["Uncapped", "No throttling"],
        "highlight": true
      }
    ]
  }
}

Local development

No build step needed — it's plain HTML/CSS/JS.

python3 -m http.server 8765
# open http://localhost:8765

Deployment

The site is fully static. Deploy to any host:

• GitHub Pages — push to main, enable Pages in repo settings (source: root)
• Netlify / Vercel — drag-and-drop the folder
• Any web server — copy files as-is

Data sources

• Coverage polygons: provided by the ISP as KMZ files
• Base map tiles: © OpenStreetMap contributors
• Geocoding: Nominatim (usage subject to Nominatim usage policy)