国際宇宙ステーションの飛行位置を得ることができるAPI「ISS Location Now」の使い方

国際宇宙ステーションは地上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 &copy; <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マップでも同様のことができる。もし余力があればチャレンジしてみてはいかがだろう。

このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。