Yahooの地図APIが使えなくなるので国土地理院地図の使い方を調べてみた
2020/02/07 Fri.
無料で使えてとても便利だったYahooデベロッパーネットワークのYOLP(地図)が2020年10月で使えなくなるようです。
YOLP Web APIにおける一部API・SDK 提供終了のお知らせ
無料サービスはありがたい反面、突然死の洗礼があるので開発者には悩ましい存在です。
で、貧乏開発者の私は性懲りもなく無料地図APIサービスを探すことにしたところ、国土地理院の地図データをAPIとして利用する方法がありました。
国土地理院といえば我が国の国家機関。さすがに突然死はない。だろうと思いたい。
さらにありがたいことにユーザー登録なんて七面倒くさいことなく無料で提供してくれています。
こんなありがたいもの、利用しないわけにはいきません。ということで、その導入方法の初歩的な部分をメモ。
YOLP Web APIにおける一部API・SDK 提供終了のお知らせ
無料サービスはありがたい反面、突然死の洗礼があるので開発者には悩ましい存在です。
で、貧乏開発者の私は性懲りもなく無料地図APIサービスを探すことにしたところ、国土地理院の地図データをAPIとして利用する方法がありました。
国土地理院といえば我が国の国家機関。さすがに突然死はない。だろうと思いたい。
さらにありがたいことにユーザー登録なんて七面倒くさいことなく無料で提供してくれています。
こんなありがたいもの、利用しないわけにはいきません。ということで、その導入方法の初歩的な部分をメモ。
さて、まずは国土地理院のAPI説明ページをご覧ください。
地理院タイルを用いたサイト構築サンプル集
国土地理院が提供するのはあくまでも地図データだけのようです。
その地図データを利用して地図を動かしたり、マーカーを付けたりというのはフリーのJavaScriptパッケージを利用することになります。
そのパッケージの開発が突然死する可能性はありますが、パッケージを入手しておけばとりあえずある日突然動かなくなるということはないので「ヨシ！」とします。
さて、国土地理院サイトでは「Leaflet」と「OpenLayers」の2種類を紹介してくれております。
今回は「Leaflet」を使ってみようと思います。
ということで説明ですが、とりあえずソースを載せるだけで終わります。簡単すぎるのでソースの注釈を見てください。
ソースは国土地理院のソースを元にちょっとだけ機能をつけ足したものです。
つけ足した機能は以下の通りです。
●画面中央に最初からマーカーを表示
●そのマーカーをクリックするとポップアップが出たり消えたり
●地図上をクリックすると新たにマーカーを表示する
●地図上の別の場所をクリックすると先ほどのマーカーが移動する
●マーカーが移動したときにコンソールログに緯度経度を表示する
というものです。
地理院タイルを用いたサイト構築サンプル集
国土地理院が提供するのはあくまでも地図データだけのようです。
その地図データを利用して地図を動かしたり、マーカーを付けたりというのはフリーの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>
<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
この記事へのコメント
コメントの投稿
コメントは全て管理人が内容を確認してから表示されます（非公開コメント除く）。
内容によっては表示されない場合がありますことご了承願います。
内容によっては表示されない場合がありますことご了承願います。
![【Amazon.co.jp限定】『ゴジラ-1.0』 豪華版 3枚組 （Amazon限定：アクリルスタンド+ビジュアルシート付き、メーカー特典：名セリフステッカー付き) [Blu-ray]](https://m.media-amazon.com/images/I/81Sg1SwkmiL._AC_SL1500_.jpg)
