How to Build a Cloud-Hosted Vector Tiles Map Web App in React — Part I
App setup
The map is the starting point of every story I have written so far. I enjoy making them, with alternating results, I enjoy share them and learn something new at the same time. In this tutorial, I will show you how I set up a complete NodeJS map web application using two different hosting platforms (Amazon AWS Elastic Beanstalk and Heroku). We will supply the spatial data in vector tiles through our own purpose-built tile server with Express and Mapbox geojson-vt, a library that generates vector tiles from GeoJSON. We will also build a simple interface using React and OpenLayers.
Building such an application is not too complicated but requires a lot of preparation steps, that’s why I decided to split it into three parts. If you already know how to scaffold a React app and have an S3 bucket/AWS user you’d want to jump to the second part where we will start putting some code together.
Bootstrapping the App
Since we design both server and client code and we need a minimal app setup, we will not use create-react-app this time, we will create a node project, install Webpack with the required configuration for development/production, and the Babel loaders for React. I will save you the details of building a React boilerplate and just describe the project folder structure and include package.json, webpack.config.js and babel.config.js. You can get a complete explanation of a Node/React app setup looking at some online tutorials, my example is based on this and this which I found complete, easy to implement and up-to-date.
root-folder/
public/
index.html - this is where React will render
src/
client/
components/
App.jsx - React app wrapper
index.js - React instantiation / app entry point for Webpack
server/
styles/
babel.config.json
package.json
webpack.config.js// babel.config.json
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}You can also clone the starter kit for this project from GitHub, locally run npm install to install dependencies and then run npm start, if everything is set up correctly a test app page should open in your default browser showing a message saying “Welcome to React”.
Set up your AWS account and upload data to S3
If you don’t have an Amazon Web Services (AWS) account already, then you can set one up directly from their AWS home page. The features we will use for this tutorial are included in the free tier plan for an initial period of 12 months, after this limit the normal usage pricing plan will apply. Amazon’s services pricing is based on usage, in order to run an hosted web app (the service is called Elastic Beanstalk, EB) the costs involved is for the virtual machine instance where the app is hosted (Amazon EC2), the size and access frequency to the space where we will store our data (Amazon S3). The 12 months free tier usage limits EC2 without load balancing is 750 hours per month; the 12 months free tier for an S3 standard storage is 5GB / 20000 GET requests and 2000 PUT requests. In our example we will not use load balancing and predict less requests than the limit, we can fairly say that the app will have no costs for the first 12 months.
Once your AWS account is set up, head to the AWS management console and on the search bar type “S3” this will open the S3 management console. Here we click on “Create Bucket”, you will have to choose a name (for this project it will be called “geodata-italy”). On this settings page you will have to select your preferred AWS region and define the access policies to your bucket.
In my case I left the default choices, blocking public access to the bucket, I will create a read-only user with dedicated S3 bucket access policies later on. Once the bucket is created it will appear on your bucket list and we will be able to upload our test data.
For this example I provide some WGS84 GeoJSON Italian administrative boundaries, the geometries contain a fairly large number of vertices. when serving vector data of such type in WFS we would already start to see some performance drops, this will enable to assess the benefit of tiled Vector data. The test data sample can be downloaded here.
On the S3 buckets list page click on the upload button and the upload page will open, here we can add the file. When the file is uploaded the next action is to create a read-only user for the bucket and generate the bucket ID and the secret key, we will use these credentials to access the data stored in the bucket from the app.
On the main AWS management console select IAM (Identity and Access Manager) and when the page will open select “Users” on the left pane. On the Users page click on “Add User”, give the user a name (for example data-reader) and in the radio button below select “Programmatic Access”.
On the next page click on “Create New Group” and give it a name (example S3-read-only), when selecting the access policies for this group choose those providing read-only access to the bucket. Review the group policies before completing.
When redirected to the users’ list page, select the user you have just created and on the user details window select the “Security Credentials” tab, here click on the “Create access key” button to get the two values. Store the credentials since you won’t be able to see them again and we will need them later on.
This completes the setup of our app components and data setup, in the next section we will see how to create the code of the web app.
