Technical design document

Core functionality

Colouring London is a web application with a database of building geometries and other attributes.

The four main user stories are as follows:

1. View coloured-in maps of building attribute data
2. Download crowdsourced building attribute data under an open licence
3. Locate and select a building for editing/adding data
4. Update a building's data

The three main elements of the application are the database, server application and frontend:

• Postgres database, with extensions:
  • PostGIS for geographical data
  • pg_trgm for text search and indexing
  • pgcrypto for hashing
• NodeJS server-side app
  • Express provides a minimal web framework
  • Mapnik renders the map tiles to images
  • Razzle helps render the frontend on the server side
• React frontend
  • Leaflet provides the interactive maps

A note on data

Geometries are kept separate from crowdsourced data. We assume that building geometries are provided by Ordnance Survey and may be used to generate raster map tiles for visualisation, but may not otherwise be shared or made available. The crowdsourced data on building attributes will be made freely and openly available.

Activity and API outline

View maps

User interaction: browse data categories, pan and zoom around map

API call: GET /tiles/<attribute>/<z>/<x>/<y>.png

Result: interactive map view of given data attributes.

Locate building

User interaction: search for a building name, street, postcode, area

API call: GET /buildings?q=1 London Road N1 ABC

Result: search results, perhaps relying only on crowdsourced address fields, perhaps calling out to OS APIs.

Notes on Ordnance Survey APIs: OS Names API provides coarse geolocation (e.g. by postcode, street or area). Restricted number of API calls, uses OS Open Names data. OS Places API provides free text search (https://apidocs.os.uk/docs/os-places-find) OS Inspire Addresses API provides address search. Restricted number of API calls, uses AddressBase data.

Select building

User interaction: click on the map to pick a particular building

API call: GET /buildings?lat=1&lon=2

Result: return building id, possibly building data, ideally also highlighting building outline (as fresh raster tile, immediately re-rendered).

Update building

User interaction: submit form with updated attributes, (possibly) ‘paint’ over multiple buildings

API call: POST /buildings/123

Result: save building data and see colour added to the map (trigger re-rendering of map tiles using updated data).

Download data

User interaction: browse list of archived data, click to download.

API call: GET /archive/2018-11.tar.gz

Result: download open dataset, including for example crowdsourced references to other datasets for (more or less accurate) geolocation: UPRN (for AddressBase/PAF), TOID (for OS MasterMap), OSM ID (for OpenStreetMap), textual address field.