Andrew Larcombe

Publishing spatial data with Gatsby

See the demo:
Get the code:

Gatsby makes it really easy to build modern, progressive web apps and sites with data from a huge variety of sources (Gatsby calls this the 'content mesh' - read more about that here:

Many organisations have this data spatial data formats (eg ESRI Shapefiles, GeoJSON, KML etc) - and using my Gatsby plugin gatsby-source-geo, these too can be used as sources for Gatsby sites.

Using Open Data from the Welsh Government's Lle Geo-portal ( we'll build a site listing all the hospitals in Wales and give each hospital it's own page displaying some information about it and a map showing its location.

Assuming you have a Gatsby site running you'll need to install the following packages

npm i --save gatsby-source-geo gdal gatsby-plugin-react-leaflet react-leaflet leaflet

(The GDAL package may take a long time to install as it have to compile the underlying C libraries to link to)

Let's get the data - create a new directory called 'data' and download and unzip the Shapefile containing the hospital data.

mkdir data
cd data
wget -O ""

Next, let's configure Gatsby to use this shapefile as a data source by adding the following to gatsby-config.js

Now, if you run 'gatsby develop' and open GraphiQL you'll see that you can query geographic features (eg the hospitals in our downloaded shapefile) as allGeoFeatures...

...and each feature is available as a node and fields of individual spatial features are available in the featureFields field...

From here it's fairly simple to setup a page template (hospital.js in the repo) that will display information about the hospital and a map (using the same map component described at

...and it can be populated using this GraphQL query...

The rest of the codebase just uses some standard Gatsby techniques to create a list page on the index, and to create the hospital pages. You can checkout the code at

Remember, you can use this technique to build sites not only from ESRI Shapefiles, but from pretty much any spatial data source, and there are a huge number of Open Data sources out there. Happy mapping!

I'm Andrew - a Tech Architect and Agile Delivery Consultant. Find out more about the services I offer here