JAXA Earth API for JavaScript はブラウザ上のJavaScriptで実行可能です。 地球観測データを可視化したり、簡単な統計処理を行うことが可能で、フロントエンド（HTML、JavaScript、CSSなど）の実装のみで地球観測データを扱うウェブアプリを作ることが可能です。
ES Module (ESM) 形式及び Universal Module Definition (UMD) 形式に対応しています。開発方法に応じてどちらかをご利用ください。
この解説内容は次の環境で動作確認済です（2026.2時点のWindows11, Android 16, iOS 18.5の最新版）。動作しない場合は最新バージョンをお試しください。
次のリンク先からモジュールのファイルをダウンロードしてください。
https://data.earth.jaxa.jp/api/javascript/v2.0.0/jaxa.earth.esm.js
また、VS Code等のコード補完機能（インテリセンス）を利用したり、TypeScriptで開発したりする場合は、次の型定義ファイルを利用してください。jaxa.earth.esm.jsと同じフォルダに保存すると自動で適用されます。
https://data.earth.jaxa.jp/api/javascript/v2.0.0/jaxa.earth.esm.d.ts
次の通りHTMLファイルのindex.htmlを作成します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>esm</title>
</head>
<body>
<script type="module"> //ESM形式の場合はtype="module"の記載が必須です。
//モジュールのファイルを読み込みます。
//このHTMLファイルとjaxa.earth.esm.jsのファイルは同一フォルダにある想定です。
import * as je from "./jaxa.earth.esm.js";
//全てのクラスやメソッドはjeオブジェクトを使ってアクセスします。
console.log(je);
//ここにコードを記載します。（後述）
</script>
</body>
</html>
必要なファイルは次の通りです。
- jaxa.earth.esm.js
- jaxa.earth.esm.d.ts (VS Code等のコード補完機能を使用したい場合のみ)
- index.html
ウェブサーバーを起動し、このHTMLにアクセスしてください。ESM形式のJavaScriptを実行するためにはウェブサーバーが必要です。HTMLファイルをダブルクリックで開いても動作しません。端末ローカルで実行する際はVSCodeのLive Server等をご利用ください。
次のリンク先からモジュールのファイルをダウンロードしてください。
https://data.earth.jaxa.jp/api/javascript/v2.0.0/jaxa.earth.umd.js
また、VS Code等のコード補完機能（インテリセンス）を利用したり、TypeScriptで開発したりする場合は、次の型定義ファイルを利用してください。jaxa.earth.umd.jsと同じフォルダに保存すると自動で適用されます。
https://data.earth.jaxa.jp/api/javascript/v2.0.0/jaxa.earth.umd.d.ts
次の通りHTMLファイルのindex.htmlを作成します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>umd</title>
<!-- モジュールのファイルを読み込みます。-->
<!-- このHTMLファイルとjaxa.earth.umd.jsのファイルは同一フォルダにある想定です。-->
<script src="./jaxa.earth.umd.js"></script>
</head>
<body>
<script>
//全てのクラスやメソッドはグローバルオブジェクトに定義されたjeを使ってアクセスします。
console.log(je);
//UMD形式ではトップレベルawaitはサポートされていません。
//トップレベルawaitを模擬するために、非同期の即時実行関数式内に記述します。
(async function(){
//ここにコードを記載します。（後述）
})();
</script>
</body>
</html>
必要なファイルは次の通りです。
- jaxa.earth.umd.js
- jaxa.earth.umd.d.ts (VS Code等のコード補完機能を使用したい場合のみ)
- index.html
ブラウザでこのHTMLを開きます。UMD形式のJavaScriptを実行するためにはウェブサーバーは不要です。ダブルクリックで開いても動作します。
//ここにコードを記載します。の部分に記載するコードの例は次の通りです。
利用できるデータセットの詳細については、こちらをご参照ください。
//数値配列データとして汎用的に扱えるDataObjectを取得します。
const dataObject = await je.getDataObject({
//利用するデータセットのcollection.jsonのURLを記載します。
collectionUrl: "https://s3.ap-northeast-1.wasabisys.com/je-pds/cog/v1/JAXA.EORC_ALOS.PRISM_AW3D30.v3.2_global/collection.json",
//dateの指定を省略した場合は最新のデータを取得します。
//利用するデータセットのバンドを指定します。
band: "DSM",
//データを取得する緯度経度範囲を記載します。
//[最小経度(西), 最小緯度(南), 最大経度(東), 最大緯度(北)]
bbox: [-180, -90, 180, 90],
//データを取得する画像のサイズをピクセル数で記載します。
width: 1000,
height: 500,
});
//可視化するためのカラーマップを指定します。
const colorMap = new je.image.ColorMap({
//最小値
min: 0,
//最大値
max: 6000,
//最小値～最大値を青～緑～黄～赤の虹色で塗りつぶします。
colors: je.Colors.JET,
});
//可視化した結果をHTMLCanvasElementとして取得し、HTML上に追加します。
document.body.appendChild(je.image.createCanvas(dataObject, colorMap));
JAXA Earth API for JavaScriptを利用すると、上記のような単純な画像表示以外にも様々なウェブアプリケーションを開発することが可能です。
詳細については、こちらのサンプルコードをご参照ください。