Publishing spatial data with Gatsby

See the demo: https://andrewl.github.io/gatsby-spatial-data
Get the code: https://github.com/andrewl/gatsby-spatial-data

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: https://www.gatsbyjs.org/blog/2018-10-04-journey-to-the-content-mesh)

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 (http://lle.gov.wales) 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 hospitals.zip "http://lle.gov.wales/services/wfs?version=1.0.0&request=GetFeature&typeName=inspire-wg:Hospitals&outputFormat=SHAPE-ZIP"
unzip hospitals.zip


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 http://www.andrewl.net/article/gatsby-geo-simple-map)...

...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 https://github.com/andrewl/gatsby-spatial-data

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