Adding maps

[dandwal]

DP is looking to have a standardised map component so we can add maps to the website. As such, I figure, it is worth opening a discussion around this as soon as possible. It would be good to see what we could potentially (if anything) add to the design system as we have multiple teams needing maps for the website.

The plan is to use:

• Mapbox GL GS 1.13.1 (or later, but Open Source version not the 2.0+ version), which is a frontend library that does all the heavy lifting
• Ordnance survey Vector tile API for base layers
• Custom style.json which is provided by Ordnance Survey and points to their vector tile API for the base map (This is how the map looks, the colour of items e.g. roads and areas along with zoom levels for when they should appear etc)

It needs to be adjustable so that we can add more layers to the map such as boundaries (getting these from another API) this is done via the JS code that interacts with the Mapbox library. e.g. map.addSource then map.addLayer

As we are using the Ordnance survey Vector tiles there is an API key so this needs to be securely added (potential backend proxy to add it) - don't think this would affect the DS side too much so long as the URL can be passed to it but is worth being aware of.

In addition, we are looking at server-side static map rendering for those that do not have JS enabled (we have a few ideas and eyes on a couple of tools but have yet to do a research spike into these). Likely this will be handled that if JS is disabled then it makes a request to one of our other services that returns a rasterised image potentially just a .png

The 'standard' part will be the style.json, ordnance survey as the source for base layers and frontend library used.

We are just starting UR on the map at the moment using the above and the default Ordnance survey provided style.json but we already know some items like, contour lines, TOIDs and ground composition labels (mud, clay etc) will be removed.

Potentially import the Mapbox library (as a module, so not every page has it included). A set of style.json files that have (potentially) been accessibility tested and have ONS branding.

Maybe worth considering an abstraction layer for the library so the underlining map rendering library in use can be swapped out. We have our eyes also on Maplibre as Mapbox 2.0 went proprietary, Maplibre came out soon after as a fork of the open-source version of Mapbox 1.13 but as this is fairly new we have decided to stick with the tried and tested Mapbox 1.13 for now)

[jrbarnes9]

To discuss in next Working Group meeting on 7 December

[designorant]

Worth noting Maplibre 2.0 does not support IE11 so whether it's Mapbox or Maplibre, it's gotta be v1.