UC03: Spatial Deforestation — Municipalities

Fetching municipal-level GeoJSON from the GJD API and rendering interactive Leaflet maps

Objective

Fetch deforestation data with municipality-level polygon geometry for all 29 municipalities of Caquetá (16) and Putumayo (13) in Colombia for 2019. The API returns paginated GeoJSON (10 features per page), so we fetch all pages and assemble a single GeoJSON FeatureCollection. We then display on a basic Leaflet map and create a choropleth map colored by deforestation value.

Step 1: The API Call (with Pagination)

We add geojson=true and specify all 29 municipality codes. The API paginates the response, so we loop through pages:

const MUNICIPALITIES = [
  "CO-CAQ-18029", "CO-CAQ-18094", "CO-CAQ-18150", // ... 29 total
];

const allFeatures = [];
let page = 1, lastPage = 1;

do {
  const qs = new URLSearchParams({
    topic_id: 11,
    ID_Municipalities: JSON.stringify(MUNICIPALITIES),
    geojson: "true",
    page: page,
  });
  const json = await fetch(`proxy.php?${qs}`).then(r => r.json());
  allFeatures.push(...json.data.data.data.features);
  lastPage = json.data.data.last_page;
  page++;
} while (page <= lastPage);

Step 2: Basic Map

Step 3: Choropleth Map

Each municipality is colored by its deforestation value. Hover to see the name, jurisdiction, and value.

Summary

1. Requested municipal-level GeoJSON from the GJD API with geojson=true and ID_Municipalities.
2. Handled paginated responses (10 features per page, 3 pages for 29 municipalities).
3. Rendered municipality polygons on a Leaflet map.
4. Created a choropleth with color scale, hover tooltips, and a legend.