はじめに

JAXAさんが提供している「JAXA Earth API」を試しに使ってみました。

JAXA Earth APIとは公式サイトによると

地球観測データは衛星やセンサー、配信システムごとに仕様が異なり、データを横断的に活用するためには専門的な知識を要します。 そこでJAXAが保有する複数の衛星データをAPI (Application Programming Interface) 経由で、プログラミング環境 (Python、JavaScript) 上から簡単に利用できるようにするための衛星データ配信サービス「JAXA Earth API」の開発をスタートしました。

とのことです。実際使ってみると簡単に衛星データを可視化することができました。

今回は宇宙にちなんでWebフレームワークのAstroを使いたかったので、JAXA Earth APIのJavaScript版を使用しました。

ソースコードとデモは公開しているので、参考にしてみてください。

ソースコード

デモ

Astroプロジェクト作成

まずはAstroのプロジェクトを作成します。

pnpm create astro@latest

JAXA Earth APIのJavaScript版をダウンロード

どうやらnpm経由では導入できないようで、以下URLからダウンロードしてきます。今回はESM版を使いました。

UMD: https://data.earth.jaxa.jp/api/javascript/v1.2.2/jaxa.earth.umd.js

ESM: https://data.earth.jaxa.jp/api/javascript/v1.2.2/jaxa.earth.esm.js

ダウンロードした.jsファイルをsrc/libs/data.earth.jaxa.jp_api_javascript_v1.2.2_jaxa.earth.esm.jsに配置しました。

世界の地表面温度をマップに可視化する

JAXAさん公式のサンプルコードをちょっと変えただけですが、その日ごと（実際は半月ごとのデータ）の世界の地表面温度をマップとして表示してみます。

データセットはLand Surface Temperature (Daytime/Half-monthly) というものを使用しています。

src/pages/index.astroを以下のように書き換えます。

JAXA Earth APIでcanvasを生成して、表示させる流れになるためクライアントサイド、つまりAstroではscriptタグ内で記述していくことになります。

---
import Layout from "../layouts/Layout.astro";
---

<Layout title="JAXA Earth API Demo">
  <main>
    <div id="app"></div>
    <input type="date" id="date" />
  </main>
</Layout>

<script>
  import * as je from "../libs/data.earth.jaxa.jp_api_javascript_v1.2.2_jaxa.earth.esm";

	const app = document.querySelector("#app");
	
  const renderMap = async (date: Date) => {
    const image = await je.getImage({
      //MODISの地表面温度のデータ
      //https://data.earth.jaxa.jp/ja/datasets/#/id/NASA.EOSDIS_Terra.MODIS_MOD11C1-LST.daytime.v061_global_half-monthly
      collection:
        "https://s3.ap-northeast-1.wasabisys.com/je-pds/cog/v1/NASA.EOSDIS_Terra.MODIS_MOD11C1-LST.daytime.v061_global_half-monthly/collection.json",
      band: "LST",
      date,
      colorMap: {
        min: 273.15 - 5,
        max: 273.15 + 35,
        colors: "jet",
      },
      bbox: null,
      width: null,
      height: null,
      onloading: null,
    });
    const canvas = image.getCanvas();
    if (app?.firstChild) {
      app.removeChild(app.firstChild);
    }
    app?.appendChild(canvas);
  };
  const date = new Date();
  renderMap(date);

	// 日付入力関連処理
  const dateInput = document.querySelector("#date");
  dateInput?.setAttribute("value", date.toISOString().split("T")[0]);
  dateInput?.addEventListener("change", async (e) => {
    const value = (e?.target as HTMLInputElement).value;
    const date = new Date(value);
    renderMap(date);
  });
</script>

動かしてみると以下のようになりました。日本もなかなか暑いですね！

おわりに

実際に使ってみての感想になりますが、本当にgetImage()メソッドを呼ぶだけで良い感じに可視化できてしまったので驚きました。

現時点（2023/10/4）ではJavaScript版のAPIドキュメントは準備中とのことで、サンプルを参考にしながらでしたが、ドキュメントが公開されたら、また色々試せそうですね！