Interactive Neighbourhood Areas Map

Ed | Nov. 25, 2020, 9:53 p.m.

I have been working with spatial data using GIS mapping systems since before I began coding, and before I started my planning career. I often display my spatial data, exported from a GIS mapping system, on interactive maps created using the Leaflet JS library.

I find interactive maps to be really effective - and far more versatile than paper/pdf maps. The problem with my usual approach is that my data is stored as a flat file. To edit the dataset required opening it in a GIS mapping system and exporting a new version of the data. This made updating or editing an interactive map unneccessarily complicated.

I realised that to better manage data, it needed to be stored in a spatial database (i.e. a PostGIS database). I'd read about GeoDjango and was keen to explore using it to develop an interactive map application - which would allow easier editing and presentation of the data.

Screenshot of interactive map

Screenshot of interactive map

I was quite excited by the prospect of using GeoDjango, since it would require me to draw on my skills in working with spatial data, and my knowledge of building web applications.

For some time I have hosted and maintained an interactive map on my neighbourhood-planning.co.uk website showing designated Neighbourhood Areas in East Cambridgeshire. I decided to rebuild this interactive map as a fully-fledged GIS web application using GeoDjango.

Before working with GeoDjango, it is useful to understand a bit about how spatial data works, and how to build an interactive map in Leaflet JS. There were a few places I would likely have got stuck if I had not had previous experience of both these elements.

I had some initial difficulty importing spatial data into my database using GeoDjango. Once I got my head around the way GeoDjango 'maps' spatial data attributes to model fields, it was much the same as working with any other dataset and django application - albeit with the data displayed as objects on a web map, rather than as text on a page.

Overall, I am really pleased with the result. The map is easy to use and understand - it shows parish boundaries within the district council's area, with designated Neighbourhood Areas shaded based on their status, either red for a ‘Made plan’ or blue where the plan is not yet made (i.e. where preparation of a Neighbourhood Plan is currently in progress). It looks great and works well on large screens and mobile devices alike (thanks to the "Leaflet Map" library and "Open StreetMap" base map it utilises).

Clicking on a Neighbourhood Area or parish reveals a popup label. The label shows the name of the area, the current status of any Neighbourhood Plan project, and includes a link where the viewer can find more details about the preparation of the Neighbourhood Plan - such as key dates and milestones achieved.

Using the Django Admin page, the council's staff can quickly and easily update a record and the changes are shown immediately on the interactive map. This allows staff to take over the responsibility for maintaining the map, without the need for any complex knowledge of spatial data or websites.

I found the Interactive Neighbourhood Area Map to be an interesting project, and am excited by the opportunities such an approach offers since the map and database can be fully customised to meet the client / projects needs. For example, it could be developed into an interactive Policies Map to show sites and policies contained in a Neighbourhood Plan or Local Plan.

Click the button to launch the Neighbourhood Areas interactive map.

Launch →