Develop and Deploy Web Application

You can use Mapbox GL JS to develop your own web application and delopy it to gh-pages.

Use boilerplate to create your repository

watergis/mapboxgljs-boilerplate is the template of Mapbox GL JS implementation for Water Services Providers with all of customized plugins. You can use this template to create your own repository easily.

Fork an existing repository to your organization

It is also possible for you to fork our water services providers' application.

Customized Mapbox GL JS Plugins for this toolkit.

I developed the following plugins for the web application for water services providers. All the plugins are already included in mapbox-gl-js-client repository for Narok Water and WASAC.

Automating deployment process for web application

Both Narok water and WASAC’s applications are using Github Action to deploy the application to gh-pages automatically. You can also use Circle CI or Github Actions to automate.

Github Action’s workflow file is here. You also need to register environmental variable on secret page on setting.

  • ACCESSTOKEN : Your Mapbox Access Token
  • CNAME : Your custom domain like narok.water-gis.com. If you don’t have own domain, you don’t need to put CNAME.

The below is an example of Github Action’s workflow file

name: Node.js CI

on:
  push:
    branches: [ master ]

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js
      uses: actions/setup-node@v1
      with:
        node-version: 12.x
    - run: npm ci
      env:
        NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}
    - name: configure git, build and deploy
      env:
        NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}
        ACCESSTOKEN: ${{secrets.ACCESSTOKEN}}
        CNAME: ${{secrets.CNAME}}
      run: |
        echo "ACCESSTOKEN=${ACCESSTOKEN}" > .env
        echo "CNAME=${CNAME}" >> .env
        npm run build
        git config --global user.name "narwassco+githubci"
        git config --global user.email "narwassco+githubci@users.noreply.github.com"
        git remote set-url origin https://x-access-token:${NODE_AUTH_TOKEN}@github.com/narwassco/mapbox-gl-js-client.git
        npm run deploy