"JAXA Earth API for JavaScript" examples on the Observable by the JAXA Earth Observation Research Center
je = require("https://data.earth.jaxa.jp/api/javascript/v1.2.3/jaxa.earth.umd.js");
draw = async function (lng, lat, dl, size) {
const width = size;
const height = size;
//Get elevation data
const img = await je.getImage({
collection: "https://s3.ap-northeast-1.wasabisys.com/je-pds/cog/v1/JAXA.EORC_ALOS.PRISM_AW3D30.v3.2_global/collection.json",
bbox: [lng - dl, lat - dl, lng + dl, lat + dl], //[west,south,east,north]
width, //px
height, //px
//Bilinear resampling is required to calculate slopes
bilinearResampling: true,
});
const data = img.getData();
//HTML canvas element for drawing an image
const cv = document.createElement("canvas");
cv.width = width;
cv.height = height;
const ctx = cv.getContext("2d");
const imgdata = ctx.getImageData(0, 0, width, height);
//Approximate distance of pixels [m] (Earth's polar radius 6356752 [m])
const mppx = 6356752 * (data.bbox[3] - data.bbox[1]) * (Math.PI / 180) / height;
// hc: Elevation of the center pixel [m]
// dh: Elevation difference in north-south direction (Elevation of south pixel - Elevation of north pixel) [m]
// Simplified as dh << mppx
const getRGB = function(hc,dh){
if(isNaN(dh)) dh = 0;
if(isNaN(hc)) hc = 0;
return 255 * (0.5 + 0.3 * dh / mppx - hc * 0.00003);
};
//Processing each pixel
for (let j = 1; j < height - 1; j++) {
let index = j * width;
for (let i = 0; i < width; i++) {
const hn = data.data[index - width];
const hc = data.data[index];
const hs = data.data[index + width];
const rgb = getRGB(hc,hs - hn);
imgdata.data.set([rgb, rgb, rgb, 255], index << 2);
index++;
}
}
ctx.putImageData(imgdata, 0, 0);
return cv;
}
draw(138.73, 35.36, 0.1 ,500);
draw(131.064, 32.891, 0.2 ,500);
draw(86.924, 27.987, 0.1 ,500);
draw(77.017, 35.490, 0.1 ,500);
draw(-113.795, 36.029, 0.1 ,500);
draw(-62.54, 5.90, 0.3 ,500);
draw(110.24, 25.2, 0.1 ,500);
draw(-11.40,21.12,0.13 ,500);
draw(-111.022,35.027, 0.05 ,500);
draw(132.307, -23.819,0.1 ,500);
draw(131.035, -25.342, 0.05 ,500);
draw(-68.9,-22.285, 0.05 ,500);
draw(31.1323, 29.9761, 0.03 ,500);
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
