ブラウザ上で現在地の標高を知りたい。

すでに標高を知ることができるアプリなどもありますが、オリジナルアプリ作成で
標高データ取得が必要なので調べました。

GeolocationAPIで現在地の取得

GeolocationAPIはJavaScriptのAPIです。
位置情報、IPアドレス、WiFiなどの情報から現在地を取得します。

function test() {
    navigator.geolocation.getCurrentPosition(test2);
}

getCurrentPosition()でデータの取得に成功すると引数のtest2()が実行されます。

function test2(position) {
    var lat = position.coords.latitude;
    var lon = position.coords.longitude;
}

test2()で緯度軽度の入れ物を用意し、test()で取得したデータを入れます。
緯度軽度の取得だけならここで終了です。

国土地理院APIの使用

国土地理院のAPIに緯度軽度を渡すと標高が返ってきます。
返ってくる値はJSONです。

国土地理院API(標高取得)のURL

    http://cyberjapandata2.gsi.go.jp/general/dem/scripts/getelevation.php?lon={軽度}&lat={緯度}&outtype=JSON

緯度：36.103543　軽度：140.08531　の例

返ってくる値

返ってきたJSONデータ

    {"elevation":25.3,"hsrc":"5m\uff08\u30ec\u30fc\u30b6\uff09"}

取得したJSONデータをパースする

    var jsonAltitude = JSON.parse(text);
    console.log(jsonAltitude.elevation);

パースしたデータをポップアップで表示

//ポップアップ表示
      alert("現在地の標高は" + jsonAltitude.elevation + "mです。" +  "(" + "緯度：" + stringLat + "、経度：" + stringLon + ")")

ブラウザでの実行結果

適当にhtmlを形成します。

「標高を取得」ボタンをクリックします。

できました。

全てのコード

fetchAltitude.js

//GeolocationAPが利用できるか確認
if (navigator.geolocation) {
  test()
} else {
  alert("現在地を取得できませんでした。")
}


function test() {
    navigator.geolocation.getCurrentPosition(test2);
}

function test2(position) {

    //まず現在地の緯度経度を取得する
    var lat = position.coords.latitude;
    var lon = position.coords.longitude;

    //国土地理院API用に有効桁数を合わせる。
    var adjustiveLat = lat + "00";
    var adjustiveLon = lon + "0";

    //文字列に変換
    var stringLat = String(adjustiveLat);
    var stringLon = String(adjustiveLon);

    //国土地理院APIに現在地の緯度経度を渡して、標高を取得する
    const url = 'http://cyberjapandata2.gsi.go.jp/general/dem/scripts/getelevation.php?lon=' + stringLon + '&lat=' + stringLat + '&outtype=JSON';

    console.log(url);

    fetch(url).then(function(response) {
      return response.text();
    }).then(function(text) {
      console.log(text);
      
      //取得したjsonをパース
      var jsonAltitude = JSON.parse(text);
      console.log("標高：" + jsonAltitude.elevation + "m");

      //ポップアップ表示
      alert("現在地の標高は" + jsonAltitude.elevation + "mです。" +  "(" + "緯度：" + stringLat + "、経度：" + stringLon + ")")

    });

}