Mapbox UK Boundaries

I recently wanted to see about getting Mapbox loaded with vector layers of UK counties and whilst Mapbox do provide this, it is within their enterprise pricing.

I bootstapped this with create-react-app. I didn’t particularly need React, but I know how quickly I can develop with all of the tooling bundled in like hot reloading. It just makes sense to use what you know sometimes, even if it isn’t the most optimal.

One interesting challege with this project was getting the Office for National Statistics’s data set to play well with what the Mapbox API requires. You see, the ONS do provide the data in the GeoJSON standard, however I was surprised to see that on loading of the data, it was rendering rings like Saturn around, well, the Earth.

The problem was that the Mapbox API expects source data to conform to the EPSG:4326 reference system. Of course, the data used was not compatible, with the ONS opting for the EPSG:27700, known in the UK as OSGB36 / British National Grid system. The main difference, without going into details, was that the coordinates did not resemble typical latitude and longitude in the geographic coordinate system.

In order to get around this issue, I managed to use Proj4js, a library to convert coordinates from one system to another with the following:

const projection = "+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 +x_0=400000 +y_0=-100000 +ellps=airy +datum=OSGB36 +units=m +no_defs";
proj4.defs("EPSG:27700", projection);

const value = proj4("EPSG:27700", "EPSG:4326", coords);
// ...

Using similar code to the above, I mutated all source geometry values into the EPSG:4326 system.

You can view the result here: https://oliverbenns.github.io/mapbox-uk-boundaries.