The challenge
Grainger Market’s map was a static PDF, updated manually every time a stall changed. Keeping it current was time-consuming and error-prone, and the result wasn’t interactive for users.
Newcastle City Council needed:
- A map that stayed in sync with stall data elsewhere on the site.
- An admin process that was easy to maintain via Drupal’s interface.
- An interactive experience where users could click, search and explore.
The site’s visual design, by Newcastle agency Gardiner Richardson, was already in place. Our job was to bring it to life within a LocalGov Drupal microsite.
What we did
We restructured how stall data was stored and created an interactive visual layer to connect it to the map.
Data model
Each stall was split into two linked parts:
- Stall: the business, with name, category, image, and description.
- Pitch: the physical location, with a unique number, alley reference, and precise map co-ordinates.
A stall could occupy one or several pitches. This meant changes in the real market; a move, closure, or new stall could be reflected instantly in Drupal’s admin UI.
Interactivity
Using D3.js, we turned those co-ordinates into an SVG map that draws and updates automatically. Users can:
- Click a stall name to see where it is on the map.
- Click a stall location to find out who’s there.
The D3 integration binds live content to its visual representation, keeping data and display always in sync.
Integration with LocalGov Drupal microsites
We configured permissions so the Grainger Market team can manage their own stall and map content, while the rest of the platform remains secure. All data is stored as Drupal content types, keeping it editable, reusable, and open-source-friendly.
See the finished map live at ourgraingermarket.co.uk.
The results
Interactive experience: users can explore the market visually and intuitively.
Simpler admin: stalls are managed like any other Drupal content type. No more manual PDFs.
Reusable code: the same D3-driven approach can be applied to other LocalGov Drupal microsites needing spatial or data-driven maps.
Open-source contribution: the solution aligns with LGD’s ethos of sharing and re-use.
Our reflection
This project shows how flexible LocalGov Drupal can be when paired with open-source tools like D3. By combining good data structure with accessible design, we helped Newcastle City Council deliver a feature that’s easy to maintain, interactive for users, and fully integrated into their microsite ecosystem