WebApp Use Cases

Build interactive web dashboards using HTML, Bootstrap, and Highcharts with GJD data.

Welcome

This section demonstrates how to consume the Green Jurisdiction Database API directly from the browser using HTML + JavaScript. No backend required.

Open-source repository — Clone this project to replicate all examples locally:
github.com/EarthInnovationInsitutute/usecasegjd
git clone git@github.com:EarthInnovationInsitutute/usecasegjd.git
Open-source repository — Clone this project to replicate all examples locally:
github.com/EarthInnovationInsitutute/usecasegjd
git clone git@github.com:EarthInnovationInsitutute/usecasegjd.git

Tech Stack

TechnologyPurpose
Bootstrap 5Responsive layout and UI components
HighchartsInteractive, publication-quality charts
Vanilla JavaScriptAPI requests and data processing

How it works

Each use case is a single HTML file that:

  1. Calls the GJD API using fetch().
  2. Parses the JSON response.
  3. Renders an interactive Highcharts chart.

Use Cases

#Use CaseDescription
01Forest Cover in CaquetaFetch forest cover data and compare Caqueta vs Putumayo with a grouped column chart.
02Deforestation in AcreFetch deforestation data and compare PRODES, Hansen/UMD, and MapBiomas sources.
03Spatial DeforestationFetch GeoJSON data for Caquetá and Putumayo, display on interactive Leaflet maps with choropleth styling.

Head over to Get Started to learn what you need.