This repo both hosts a deployed instance of TGVE on GitHub Pages, and acts as a template that you can use to deploy your own instance.
The latest release is deployed at https://tgve.github.io/app. You can pass your own geospatial data URL as defaultURL=url parameter as follows:
https://tgve.github.io/app?defaultURL=https://raw.githubusercontent.com/tgve/example-data/main/casualties_100.geojsonYou should see something like:
Likewise, you can embed it in an iframe as follows (this document is restricted to certain HTML elements, excluding iframe):
<iframe srce="https://tgve.github.io/app" />See the example notebook for how to embed the application into a Jupyter notebook.
With this template repository, it is easy to host your own instance of the Turing Geo-visualization Engine (TGVE), via GitHub Pages. To achieve this, follow these three steps:
- Create repo from this template
You should now have a copy (not fork) of the repo at https://github.com/USER_OR_ORG/YOUR_REPO_NAME. The actions may not start running at this stage. In the next step we will make sure this happens.
-
Edit
REACT_APP_DEFAULT_URLinbuild-deploy.ymlwith the URL of your dataset. To pass separate data and geography URLs, useREACT_APP_GEOGRAPHY_URL,REACT_APP_GEOGRAPHY_COLUMNandREACT_APP_COLUMN, as described here. Check outsrc/App.jsto see how you can pass these variables to the TGVE React component. -
The GitHub Actions defined in
.github/workflowsare responsible for building and deploying the app. Once the first build is complete, it will create a separate branch calledgh-pages. Enable deployment to GitHub Pages by setgh-pagesas the branch androotas the directory in your repo's GitHub Pages settings:
You should now have an instance at https://USER_OR_ORG.github.io/YOUR_REPO_NAME. Note that publishing to GitHub Pages may take some time.
What did we do? The repo now has a branch called gh-pages which GitHub uses to serve the app; the app will pull data from the link added in step (2). The following screenshot shows a repo with owner “layik” and repository name “eAtlas”:
The example data file includes point data with geography defined in the columns. TGVE is able to extract the points from the CSV file using the csv2geojson package from Mapbox. You can set your own Mapbox API key by providing MAPBOX_KEY as a GitHub secret; see REACT_APP_MAPBOX_ACCESS_TOKEN in build-deploy.yml.
To run locally, ensure yarn is installed. Then:
- Clone this repository
- Run
yarn - Run
yarn start
Then visit http://localhost:3000 to see the running application.
See the following READMEs for documentation.
react-scriptslocked to3.4.4due to aurl-loaderissue.