JAXA Earth APIをAstroで動かして衛星データを可視化してみる

はじめに

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

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

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

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

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

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

GitHub - 7nohe/jaxa-earth-api-demo: JAXA Earth API demo app with Astro

JAXA Earth API demo app with Astro. Contribute to 7nohe/jaxa-earth-api-demo development by creating an account on GitHub.

github.com

JAXA Earth API Demo

Astro description

jaxa-earth-api-demo.vercel.app

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タグ内で記述していくことになります。