国際宇宙ステーションは地上400km上空を飛行する有人施設であることは周知のことだが、秒速約7.7km（時速約27,700km）ものスピードで飛行を続けていて、地球1周を約90分で周りきるとのことだ。驚異のスピードで想像もつかない。
では国際宇宙ステーションが、たったいまどこを飛行しているのか？
それはNASAのサイトで見ることができる。「Live Space Station Tracking Map」は、リアルタイムに現在位置が反映され、およその飛行箇所を確認できるコンテンツだが、自身でもこれに類似したコンテンツを作成することができる。
このエントリーでは、国際宇宙ステーションの飛行位置を得ることができるAPI「ISS Location Now」を紹介したい。
使い方
ISS Location Now APIの使い方はいたって簡単。APIのエンドポイントにGETでリクエストするだけで、json形式の値が返ってくる。APIリクエストにおけるAPI key等のセットは不要だ。
URL
http://api.open-notify.org/iss-now.json
Request
axios
.get('http://api.open-notify.org/iss-now.json')
.then(response => {
console.log(response.data);
});Response
{
"timestamp": UNIX_TIME_STAMP,
"message": "success",
"iss_position": {
"latitude": CURRENT_LATITUDE,
"longitude": CURRENT_LONGITUDE
}
}デモンストレーション
それではAPIの座標データを利用して地図上にピン(アイコン)を表示してみよう。以下ソースコードを確認してほしい。
まず<head>内に必要なアセットを読み込む。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.js"></script>用意したものは、地図ライブラリの「leafletjs」とHTTPクライアントの「axios」だ。サンプルではCDNのものを読み込んでいるが、プロジェクト都合に合わせてローカルに配置してもよいだろう。
つづいて<body>内に地図を描画するHTMLタグを配置する。
<div id="map" style="width: 800px; height: 400px"></div>Google maps apiを利用したことがあるならば、月並みな記述だと思う。<div>にidを付与して後のスクリプトで参照できるようにしている。サンプルではインラインスタイルによるサイズ固定にしているが、レスポンシブに対応させてもよさそうだ。
最後にISS Location Now APIをリクエストして地図に描画するスクリプトを記述する。
// 地図を定義
const map = L.map('map').setView([0, 0], 2);
// 地図に配置するピン(アイコン)を定義
const icon = L.icon({
iconUrl: 'images/iss_pin.png',
iconSize: [30, 30],
iconAnchor: [15, 15],
});
// 地図上のサークルスタイルを定義
const circle_style = {
color: '#c22',
opacity: .3,
weight: 1,
fillColor: '#c22',
fillOpacity: .1,
};
// 地図上にピン(アイコン)を描画
const iss = L.marker([0, 0], { icon }).addTo(map);
// 地図上にサークルを描画
const isscirc = L.circle([0,0], 2200e3, circle_style).addTo(map);
// 地図を描画
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a>',
maxZoom: 4,
}).addTo(map);
function moveISS () {
axios
.get('http://api.open-notify.org/iss-now.json')
.then(response => {
const lat = response.data.iss_position.latitude;
const lon = response.data.iss_position.longitude;
iss.setLatLng([lat, lon]);
isscirc.setLatLng([lat, lon]);
map.panTo([lat, lon], animate=true);
});
setTimeout(moveISS, 5000);
}
moveISS();このスクリプトは、5秒毎に緯度経度を取得して、その都度、地図座標を更新する処理をしている。
まとめ
国際宇宙ステーションの飛行位置を得ることができるAPI「ISS Location Now」の紹介だった。
サンプルソースコードでは、OpenStreetMapの地図が描画されるが、Googleマップでも同様のことができる。もし余力があればチャレンジしてみてはいかがだろう。
このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。
