Newcastle City Council approached us with a problem to solve - how to build an interactive data-driven map into their existing Grainger Market LocalGov Drupal Microsite.
The problem
The existing map is a PDF, which has to be updated manually every time the stalls in the market changed. Keeping it up to date was proving to be a lot of effort. They needed a solution that could read the list of stalls and where they're located from data in the website, so the map can be kept up to date easily, and be in sync with the list of stalls elsewhere on the site.
A PDF also isn't interactive. On a website, you can choose a stall name, and the map could highlight that stall to show you where it is. Or you could click on a stall in the map, and the site could tell you what you clicked on. PDFs can't do that.
NCC already had visual designs commissioned from Newcastle's Gardiner Richardson to fit in with the rest of the existing site, so we didn't have to do that part, but we did have the challenge of building it.
So there's a few technical problems to solve:
1) How do we structure the data so it's easy to maintain the map via Drupal's admin UI? 2) How do we actually draw the map, and make it interactive? 3) How do we install this whole new feature in a LocalGov Drupal Microsite?
The solutions
We settled on a solution for the data that splits each stall in the market into two parts - a stall and a pitch. The stall has a name, a category, an image, and importantly, it has a pitch. Well, actually, it has many pitches. You can think of the pitch as the physical location in the market. A stall can occupy more than one pitch, (EG, they have the location "Alley 3, 133-138). So pitches have a number, a location (Alley 1/2/3/4 etc) and, importantly, a set of co-ordinates that we can draw on a map.
By splitting the data like this, we make every day changes to the market map easy. When you create or edit a stall, you choose which pitches they occupy. The combined co-ordinates of the pitches are drawn on the map to represent the stall. If a stall shuts down, you unpublish or delete that stall, and they're taken off the map.
But how's it drawn? We used (D3)[https://d3js.org] to translate the data aggregated in Drupal into an SVG map. D3 is a low-level toolkit for building interactive visualisations. It gives you the tools to bind the data to the presentation of it, leaving how the visualisation looks and works up to you.
And as for how we installed all this in an LGD microsite? The stall data is stored as a content type (AKA nodes) in Drupal. With the right permissions set up for who can create content of that type, and a bit of digging in to how LGD microsites uses permissions to let content appear on one site and not another in the same platform, we got it working. Admins assigned to the Grainger Market site get control of the stall and map data, nobody else does.
If you'd like to see the map in action, it's here: (Grainger market map)[https://ourgraingermarket.co.uk/].
