UC01: Forest Cover in Caqueta, Colombia

Querying, visualizing, and comparing forest cover data with Highcharts

Objective

Fetch forest cover data for Caqueta (Colombia, 2010-2019) from the GJD API using fetch(), display it in a Highcharts column chart, and then compare it with Putumayo.

Step 1: The API Call

Here is how we build the URL and call the API with JavaScript:

const BASE_URL = "https://api.greenjurisdictions.org/api/v1/dataPlaces/false/true/false";
const years = Array.from({length: 10}, (_, i) => `"${2010 + i}"`).join(",");

const params = new URLSearchParams({
  ID_Topic: 120,
  ID_Countries: '["CO"]',
  ID_Jurisdictions: '["CO-CAQ"]',
  ID_Municipalities: '[]',
  ID_years: `[${years}]`,
  ID_sources: '[14]',
});

const response = await fetch(`${BASE_URL}?${params}`, {
  headers: {
    "X-API-TOKEN": GJD_CONFIG.API_KEY,
    "Accept": "application/json",
  },
});
const data = await response.json();

Step 2: Caqueta Bar Chart

Step 3: Comparison with Putumayo

By changing ID_Jurisdictions to ["CO-CAQ","CO-PUT"], we get both jurisdictions in one request.

Summary

This example showed how to:

1. Call the GJD API with fetch() and parse JSON.
2. Render a column chart with Highcharts.
3. Query multiple jurisdictions and build a grouped comparison chart.