Yahooの地図APIが使えなくなるので国土地理院地図の使い方を調べてみた

脱力系備忘録BloG ホーム » JavaScript »Yahooの地図APIが使えなくなるので国土地理院地図の使い方を調べてみた

Yahooの地図APIが使えなくなるので国土地理院地図の使い方を調べてみた

2020/02/07 Fri.

無料で使えてとても便利だったYahooデベロッパーネットワークのYOLP(地図)が2020年10月で使えなくなるようです。
YOLP Web APIにおける一部API・SDK 提供終了のお知らせ

無料サービスはありがたい反面、突然死の洗礼があるので開発者には悩ましい存在です。

で、貧乏開発者の私は性懲りもなく無料地図APIサービスを探すことにしたところ、国土地理院の地図データをAPIとして利用する方法がありました。
国土地理院といえば我が国の国家機関。さすがに突然死はない。だろうと思いたい。
さらにありがたいことにユーザー登録なんて七面倒くさいことなく無料で提供してくれています。
こんなありがたいもの、利用しないわけにはいきません。ということで、その導入方法の初歩的な部分をメモ。

さて、まずは国土地理院のAPI説明ページをご覧ください。
地理院タイルを用いたサイト構築サンプル集

国土地理院が提供するのはあくまでも地図データだけのようです。
その地図データを利用して地図を動かしたり、マーカーを付けたりというのはフリーのJavaScriptパッケージを利用することになります。
そのパッケージの開発が突然死する可能性はありますが、パッケージを入手しておけばとりあえずある日突然動かなくなるということはないので「ヨシ！」とします。

さて、国土地理院サイトでは「Leaflet」と「OpenLayers」の2種類を紹介してくれております。
今回は「Leaflet」を使ってみようと思います。

ということで説明ですが、とりあえずソースを載せるだけで終わります。簡単すぎるのでソースの注釈を見てください。
ソースは国土地理院のソースを元にちょっとだけ機能をつけ足したものです。
つけ足した機能は以下の通りです。

●画面中央に最初からマーカーを表示
●そのマーカーをクリックするとポップアップが出たり消えたり
●地図上をクリックすると新たにマーカーを表示する
●地図上の別の場所をクリックすると先ほどのマーカーが移動する
●マーカーが移動したときにコンソールログに緯度経度を表示する

というものです。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>GSI Tiles on Leaflet</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
  integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
  crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
  integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
  crossorigin=""></script>

<style>
  body {padding: 0; margin: 0}
  html, body, #map {height: 100%; width: 100%;}
</style>
</head>

<body>
<div id="map"></div>
<script>

//★地理院のソースに以下を追加
//移動するマーカーを制御するための変数をグローバルで定義
var Marker = '';

var map = L.map('map');

L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
  attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"
}).addTo(map);

map.setView([32.453287, 139.767809], 15);

//★地理院のソースに以下を追加
//マーカー追加
//初期画面の中央にマーカーを表示。クリックするとポップアップがオン・オフ。
L.marker([32.453287, 139.767809]).addTo(map)
    .bindPopup('<div>マーカー<br>ポップアップ</div>');

//地図のclickイベントでonMapClick関数を呼び出し
map.on('click', onMapClick);

//クリックマーカー制御関数
function onMapClick(e) {
    if (Marker == '') {
        //初めてのクリックの時にその場所にマーカーを表示
        Marker = L.marker(e.latlng).addTo(map);
    } else {
        //2回目以降のクリックではマーカーの位置を変えて移動させる
        Marker.setLatLng(e.latlng);
        //移動したときに緯度経度情報をオブジェクトから取得
        console.log(e.latlng['lat'] + ' : ' + e.latlng['lng']);
    }
}
</script>
</body>
</html>

関連記事

category: JavaScript

コメント: 0