UI polish, bug fixes, and README

Changes since last commit:

NATS airspace
- Remove D and D_OTHER types from parser — UK small-arms ranges covered the
  entire country and made the layer unusable
- Replace title-attribute tooltips on type filters with clickable ⓘ icons
  (mobile-friendly); info text appears in a shared box below the grid
- Add Select All / Deselect All controls (moved to bottom of all layers, now
  applies to every layer checkbox not just NATS types)
- Fix per-type filter using expression syntax ['match', ...] — legacy filter
  syntax was unreliable in MapLibre GL JS 4.x

Map style switching
- Fix overlay layers being lost when switching Terrain / Satellite / Streets
  by waiting for the 'idle' event instead of 'style.load'; MapTiler styles
  fire style.load before the map is ready to accept addSource/addLayer calls
- Defensive cleanup at top of addAllLayers() removes all custom layers and
  sources before re-adding, preventing "source already exists" crashes

Location tracking
- Move locate button from floating bottom-right into the left panel
- Auto-request location on page load
- Dynamic button label: "Getting location…" → "Stop Tracking" → "Track location"
- Suppress alert on permission-denied (error code 1); show inline message for
  other errors

Panel UX
- Move planning disclaimer out of panel body into a ⚠ icon in the header;
  click to expand, includes hyperlinked NOTAM link
- Add NOTAM link to the data-links section at the bottom
- Danger / Restricted and MoD / Military rows now have ⓘ icons explaining
  that these layers have no built-in data and require a GeoJSON upload;
  removes the old "Override: load GeoJSON below" note and "(override)" labels
  from the dropdown
- Load Data section: stacked full-width layout (dropdown above button)
- Lighten grey text (#555#888, #666#999) across section labels,
  layer notes, info icons, hints, data links, and popup close button

Map bounds and attribution
- Restrict panning to UK + Channel Islands with maxBounds
- Replace default attribution control with custom one appending
  "© Bournemouth Technology" with link to bournemouthtechnology.co.uk

README
- Add full project description, feature list, tech stack table, setup
  instructions, and data source reference table
This commit is contained in:
Jon
2026-05-25 18:28:25 +01:00
parent db9d58043d
commit f741a17202
4 changed files with 297 additions and 86 deletions

View File

@@ -0,0 +1,86 @@
# DroneMapUK
A browser-based UK drone airspace planning tool built with MapLibre GL JS. Visualises the airspace restrictions, protected areas, and managed land relevant to UK drone operations in a single interactive map.
> **Planning aid only.** Always verify with official CAA sources and check NOTAMs at [aurora.nats.co.uk](https://www.aurora.nats.co.uk/) before any flight.
---
## Features
- **NATS AIP Airspace** — parses the official NATS AIXM 5.1 XML dataset in a Web Worker (off the main thread) to render Restricted, Prohibited, CTR, CTA, TMA, RAS, and TMZ zones with per-type toggles and colour coding
- **Flight Restriction Zones (FRZ)** — 5 km radius circles around ~40 UK licensed aerodromes, hardcoded from CAA reference points
- **Danger / Restricted Areas** — load your own GeoJSON (e.g. converted from NATS ENR 5.1 KMZ)
- **MoD / Military Areas** — load your own GeoJSON
- **National Parks (GB)** — fetched automatically from the OS Open Geography Portal ArcGIS REST API
- **Royal Parks (London)** — 8 London parks with approximate boundaries
- **SSSIs** — England auto-loaded viewport-lazy from Natural England ArcGIS API (zoom ≥ 8); Scotland/Wales via file upload
- **Forestry managed land** — load GeoJSON from Forestry England, FLS Scotland, or NRW Wales
- **GPS location tracking** — live position with accuracy circle, auto-centres on first fix
- **Map styles** — Terrain, Satellite, Streets (MapTiler)
- **3D terrain** — MapTiler terrain-rgb-v2 DEM with pitch and sky layer
- **Hillshade overlay** — best on Satellite style
---
## How it works
The app is three plain files — `index.html`, `style.css`, and `app.js` — with no build step, no bundler, and no framework.
| Concern | Detail |
|---|---|
| Map rendering | [MapLibre GL JS 4.x](https://maplibre.org/) via CDN |
| Base tiles | [MapTiler](https://maptiler.com) (requires a free API key) |
| NATS parsing | `nats-worker.js` Web Worker — receives the 72 MB AIXM XML as an `ArrayBuffer`, parses GML geometry (GeodesicString, CircleByCenterPoint, ArcByCenterPoint), and posts GeoJSON back to the main thread |
| API key storage | `localStorage` key `droneMapUK_maptilerKey` |
| SSSI loading | Viewport-lazy fetch from Natural England ArcGIS FeatureServer, debounced 450 ms on map move |
| National Parks | Single fetch from OS Open Geography Portal on map load |
| Style switching | Uses MapLibre `idle` event (not `style.load`) to re-add sources and layers after `setStyle()` |
---
## Setup
1. Get a free API key at [maptiler.com](https://maptiler.com)
2. Serve the directory from a local web server — the NATS XML fetch requires HTTP, not `file://`
```bash
# Python
python3 -m http.server 8080
# Node
npx serve .
```
3. Open `http://localhost:8080` in a browser and enter your MapTiler key when prompted
---
## NATS airspace data
Download the official NATS AIP dataset from [nats-uk.ead-it.com](https://nats-uk.ead-it.com/cms-nats/opencms/en/uas-restriction-zones/) and place the extracted XML file at the path referenced in `app.js`:
```
EG_AIP_DS_20260514_XML/EG_AIP_DS_FULL_20260514.xml
```
Update `NATS_XML_PATH` in `app.js` if your filename differs.
---
## GeoJSON data sources
| Layer | Source |
|---|---|
| Danger / Restricted | [NATS UAS Zones](https://nats-uk.ead-it.com/cms-nats/opencms/en/uas-restriction-zones/) |
| Forestry England | [data-forestry.opendata.arcgis.com](https://data-forestry.opendata.arcgis.com/) |
| FLS Scotland | [ArcGIS Viewer](https://www.arcgis.com/apps/webappviewer/index.html?id=e4b9f5f437474e0481a3cec097e4c2ec) |
| NRW Wales | [datamap.gov.wales](https://datamap.gov.wales/) |
| SSSIs (Scotland/Wales) | [Natural England / Defra Open Data](https://naturalengland-defra.opendata.arcgis.com/) |
---
## Attribution
Map tiles © [MapTiler](https://maptiler.com) · Data © [OpenStreetMap contributors](https://www.openstreetmap.org/copyright)
A [Bournemouth Technology](https://bournemouthtechnology.co.uk) product