Skip to content


Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


This is a template for creating your own interactive map-based viewer

Do you want your dashboard to be featured on the Natural Capital Project's visualization gallery? Email us a link to your repo.

Set up

Detailed set up with images

  1. Install node.js, and a text editor (e.g VScode )
  2. Download or clone this repository and open the project directory in your text editor (how to clone)
  3. Open the terminal (Command Prompt in Windows) in your project directory and run npm install - this will install all dependencies
  4. Run npm start -- this will run the app in the development mode.
    Open http://localhost:3000 to view it in the browser.
    The page will reload if you make edits. You will also see any errors in the console.

Customize viewer with your data

  1. Use src/data/data.js to change configuration, add and organize your data (data goes in src/data folders). Details:
  1. Customize text and appearance:

Deploy viewer online

Detailed workflow with images

  1. On github, create a new Github repository (you need to have a GitHub account). We'll deploy the viewer with GitHub pages.
  2. In the package.json file, change the homepage property to https://{username}{repository-name}. (e.g "homepage": "")
  3. Open your terminal/git bash and navigate to your project folder, change the remote url to your github repo:
    git remote set-url origin{username}/{repo-name}.git
  4. Deploy your app (still in your bash, project directory), run: npm run deploy
    Yay!! Your app is now running at https://{username}{repo-name}/ -----> to update any changes npm run deploy
  5. (Optional) Push the source code to your Github repo:
git add *
git commit -m "Your commit message"
git push origin master

To have your viewer hosted on{your-viewer}, and featured in our visualization gallery, email us, including the link to your viewer.