Rendering Public API items as GeoJSON on a map

Last updatedAugust 19, 2026

With Public API, you can retrieve items from a model that has a geometry field as GeoJSON. The GeoJSON you get back can be passed directly to a map library such as MapLibre GL JS or Leaflet, or to Re:Earth Visualizer, for display.

Sample code

Here’s a sample HTML page that fetches items as GeoJSON from Public API and displays them on a map with MapLibre GL JS. Replace WORKSPACE_ID, PROJECT_ID, and MODEL_ID with your actual values.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Re:Earth CMS Public API + MapLibre GL JS</title>
  <link href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet" />
  <script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
  <style>
    body { margin: 0; }
    #map { width: 100%; height: 100vh; }
  </style>
</head>
<body>
  <div id="map"></div>
  <script>
    const WORKSPACE_ID = "<workspace_id_or_alias>";
    const PROJECT_ID = "<project_id_or_alias>";
    const MODEL_ID = "<model_id_or_key>";

    const map = new maplibregl.Map({
      container: "map",
      style: "https://tile.openstreetmap.jp/styles/osm-bright-en/style.json",
      center: [139.6917, 35.6895],
      zoom: 10,
    });

    const CMS_URL = `https://api.cms.reearth.io/api/p/${WORKSPACE_ID}/${PROJECT_ID}/${MODEL_ID}.geojson`;

    map.on("load", async () => {
      const resp = await fetch(CMS_URL);
      if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
      const geojson = await resp.json();

      map.addSource("cms-data", { type: "geojson", data: geojson });
      map.addLayer({
        id: "cms-layer",
        type: "circle",
        source: "cms-data",
        paint: {
          "circle-radius": 8,
          "circle-color": "#e63946",
        },
      });
    });
  </script>
</body>
</html>

Result

The data retrieved from the CMS is displayed on the map.

A map rendered with MapLibre GL JS showing GeoJSON retrieved from Public API, with red circle markers scattered across Japan.

For the full endpoint specification, see Public API Reference.