Skip to content

charlottegiseleweil/viewerTemplate

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 

Demo: http://viz.naturalcapitalproject.org/viewerTemplate/



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}.github.io/{repository-name}. (e.g "homepage": "https://myusername.github.io/myviewer")
  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 https://github.com/{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}.github.io/{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 viz.naturalcapitalproject.stanford.edu/{your-viewer}, and featured in our visualization gallery, email us, including the link to your viewer.