JAXA Earth API for JavaScript can be run with JavaScript in the browser. You can visualize Earth observation data and perform simple statistical processing, and you can build web apps that handle Earth observation data using only frontend implementation (HTML, JavaScript, CSS, etc.).
It supports both the ES Module (ESM) format and the Universal Module Definition (UMD) format. Use whichever suits your development method.
This guide has been verified to work in the following environments (the latest versions of Windows 11, Android 16, and iOS 18.5 as of February 2026). If it does not work, please try the latest version.
Download the module file from the following link.
https://data.earth.jaxa.jp/api/javascript/v2.0.1/jaxa.earth.esm.js
Also, if you want to use code completion (IntelliSense) in VS Code or develop with TypeScript, use the following type definition file. If you save it in the same folder as jaxa.earth.esm.js, it is applied automatically.
https://data.earth.jaxa.jp/api/javascript/v2.0.1/jaxa.earth.esm.d.ts
Create the HTML file index.html as follows.
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>esm</title>
</head>
<body>
<script type="module"> //For the ESM format, specifying type="module" is required.
//Load the module file.
//This HTML file and jaxa.earth.esm.js are assumed to be in the same folder.
import * as je from "./jaxa.earth.esm.js";
//All classes and methods are accessed using the je object.
console.log(je);
//Write your code here. (described later)
</script>
</body>
</html>
The necessary files are as follows.
- jaxa.earth.esm.js
- jaxa.earth.esm.d.ts (Only if you want to use built-in code completion in tools like VS Code)
- index.html
Start a web server and access this HTML. A web server is required to run ESM-format JavaScript. It will not work if you open the HTML file by double-clicking it. When running locally on your machine, use a tool such as Live Server in VS Code.
Download the module file from the following link.
https://data.earth.jaxa.jp/api/javascript/v2.0.1/jaxa.earth.umd.js
Also, if you want to use code completion (IntelliSense) in VS Code or develop with TypeScript, use the following type definition file. If you save it in the same folder as jaxa.earth.umd.js, it is applied automatically.
https://data.earth.jaxa.jp/api/javascript/v2.0.1/jaxa.earth.umd.d.ts
Create the HTML file index.html as follows.
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>umd</title>
<!-- Load the module file. -->
<!-- This HTML file and jaxa.earth.umd.js are assumed to be in the same folder. -->
<script src="./jaxa.earth.umd.js"></script>
</head>
<body>
<script>
//All classes and methods are accessed using je, which is defined on the global object.
console.log(je);
//Top-level await is not supported in the UMD format.
//To emulate top-level await, write the code inside an async immediately invoked function expression.
(async function(){
//Write your code here. (described later)
})();
</script>
</body>
</html>
The necessary files are as follows.
- jaxa.earth.umd.js
- jaxa.earth.umd.d.ts (Only if you want to use built-in code completion in tools like VS Code)
- index.html
Open this HTML in a browser. No web server is required to run UMD-format JavaScript. It also works if you open it by double-clicking.
An example of the code to write in the //Write your code here. part is as follows.
For details on the available datasets, please refer to here.
//Retrieve a DataObject that can be handled generically as numeric array data.
const dataObject = await je.getDataObject({
//Write the URL of the collection.json of the dataset to use.
collectionUrl: "https://s3.ap-northeast-1.wasabisys.com/je-pds/cog/v1/JAXA.EORC_ALOS.PRISM_AW3D30.v3.2_global/collection.json",
//If date is omitted, the latest data is retrieved.
//Specify the band of the dataset to use.
band: "DSM",
//Write the latitude-longitude range for which to retrieve data.
//[minimum longitude (west), minimum latitude (south), maximum longitude (east), maximum latitude (north)]
bbox: [-180, -90, 180, 90],
//Write the size of the image to retrieve in pixels.
width: 1000,
height: 500,
});
//Specify the color map for visualization.
const colorMap = new je.image.ColorMap({
//minimum value
min: 0,
//maximum value
max: 6000,
//Fill the minimum value to the maximum value with a rainbow of blue to green to yellow to red.
colors: je.Colors.JET,
});
//Retrieve the visualized result as an HTMLCanvasElement and add it to the HTML.
document.body.appendChild(je.image.createCanvas(dataObject, colorMap));
See an example of the execution result here
With JAXA Earth API for JavaScript, you can develop various web applications beyond the simple image display shown above.
For details, please refer to the sample code here.