Nagashima Laboratory

WebAPIを使った地図

Web API（application programming interface）とは、web上でデータをやりとりする仕組みのことで、異なるソフトウェアやプログラムを連携することができます。

オープンソースの地図データを読み込んで、Webページに地図を表示します。

キーワード：WebAPI、Leaflet、Open Street Map

Webページに地図を表示するには？

Webページに地図を表示させるとき、最も簡単なのは、GoogleMapを使う方法です。

  • そのまま埋め込む：共有＞地図を埋め込むから、iframeのコードを取得して、HTMLにペーストします
  • マイマップを使う：Google アカウントでログインすると、マップ上に自分でピンを配置したり、説明を加えたり、地図を編集することができます。その上で、マイマップを共有することで、HTMLに埋め込みができます。

場所を紹介する用途であれば、上記の通りGoogleMapを埋め込む方法が簡単かつ便利です。独自の機能を持った地図を作成したいときに、APIを使って地図を読み込み、地図を自作する方法が候補に挙がります。

地図のAPI

地図APIには次のようなものがあります。

地図データの呼び出し方

地図APIの利用には、LeafletというJavaScriptライブラリを使用します（ライセンスは、BSD 2-Clause “Simplified” License）。

※ライブラリ…予めよく使う機能をまとめたもの。Leafletの場合は、地図表示に必要な機能が用意されているため、少ないコードで地図の操作ができるようになっています。

【準備】フォルダ：javascript_map

①JavaScriptを書くための準備で作成したフォルダ（空のHTML、CSS、JavaScriptが入っている）を準備します。GitHubからもダウンロードできます。

②フォルダの名前を「javascript_map」に変更します

③地図に表示する「ピン」の画像を用意します。仮の画像を用意していますので、Githubからダウンロードしてください。

画像は images フォルダに入れます。

地図を表示する

ひとまず地図を表示させてみます。公式のQuick Start Guideに沿って進めます。

①HTMLのheadに、LeafletのCSSとJavascriptを読み込む

埋め込みコードについては、Quick Start Guideから最新のものをコピーしてください。ペースト場所は、自分のCSSファイルを読み込む前の部分です。

▼index.html

  <title>JavaScript Map</title>

<!-- この部分にコードをペーストしてください -->

  <link rel="stylesheet" href="style.css">
  <script src="script.js" defer></script>
</head>

②地図を表示させる場所を作る

次にbodyの編集をします。今回はheaderとfooterは不要なため、削除します。

▼index.html

<body>
<!--header削除-->
  <main>
    <div id="map"></div>
  </main>
<!--footer削除-->
</body>

③地図が全画面に表示されるようにする

▼style.css

body {
  margin: 0;
}

#map {
  height: 100vh;
}

④地図の中心点と倍率（ズームレベル）を決める

地図の中心点を指定します。このときに必要なのが緯度・経度の情報です。緯度・経度はGoogleMapで調べられます。任意の地点で右クリックすると、緯度・経度の情報が表示されますので、コピーします。

下記のコードの「緯度, 経度」と書かれた部分を、コピーした数値で置き換えてください。

▼script.js

const map = L.map('map').setView([緯度, 経度], 15);

ズームレベル（zoom level）は数字を上げることで拡大され、数字が小さくなると縮小されます。どのズームレベルが用意されているかは、地図によって変わります。

⑤地図を読み込む

Open Street Map を読み込みます。マップの画像のことをタイル（tile）といい、ここではタイルレイヤーと呼ばれるものを設定しています。attributionの部分はクレジット標記です。マップの右下に表示されます。

▼script.js

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

マップにピンを表示する

マップ上にピンを表示させます。ピンを表示したい場所を緯度・経度で指定します（GoogleMapで調べます）。吹き出しに表示したいテキストは、bindPopup(‘ ‘)の中に記述します。

繰り返し記述すれば、複数のピンをマップ上に表示させることができます。

▼script.js

L.marker([緯度, 経度]).addTo(map).bindPopup('こんにちは！');

次のように、openPopup()を追加すると、吹き出しが初めから開いた状態になります。

L.marker([緯度, 経度]).addTo(map).bindPopup('こんにちは！').openPopup();

吹き出しのカスタマイズをする

吹き出し（popup）はCSSで装飾を変更できます。色の設定は一例です。

▼style.css

/*ふきだしの背景色変更*/
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: #000;
  color: #FFF;
}

img {
  width: 100%;
}

また、吹き出しの中に入れるコンテンツは、HTMLタグで編集できますので、画像を表示することもできます。画像は適宜用意してください。

▼script.js

L.marker([緯度, 経度]).addTo(map)
  .bindPopup('テキスト<br><img src="images/img01.png" alt="img">');

ピンの画像を変える

ピンの画像はデフォルトでは青色ですが、これを自分で用意した画像に変更します。まず、Illustratorなどを使って、ピンの画像と影の画像を作成します。ここでは、次のような画像を準備しました。

公式チュートリアルのMarkers With Custom Iconsに沿って設定します。

①アイコンの設定をする

アイコン画像として使う画像ファイルを指定します。iconUrlに、アイコン画像、shadowUrlに影アイコン画像を指定します。

▼script.js

//アイコン
const whiteIcon = L.icon({
  iconUrl: 'images/ico.png',
  shadowUrl: 'images/ico_shadow.png',

iconSize:     [40, 40], // size of the icon
shadowSize:   [40, 40], // size of the shadow
iconAnchor:   [20, 40], // point of the icon which will correspond to marker's location
shadowAnchor: [20, 40],  // the same for the shadow
popupAnchor:  [0, -42] // point from which the popup should open relative to the iconAnchor
});

公式チュートリアルではvarを使っていますが、近年のJavaScriptでは定数はconstを使うため、constで記述しています。

iconAnchorで、マップにささる場所を決めています。左上を始点に座標を指定します。今回の図の場合は、画像サイズが40, 40で、一番下の中央を指定したいので、20, 40となります。画像を自作するときは、自分が用意した画像に合わせてください。

popupAnchorは吹き出しの表示位置です。こちらは、iconAnchorで指定した場所が基点になります（0, 0 がiconAnchorで指定した場所）。今回の例では、ピンの上に表示したい場合、0, -40 となりますが、ピンよりやや上に表示させるため、0, -42 としています。

②アイコン画像の設定を呼び出す

緯度・経度の後ろに、アイコンの名前（constで設定した部分）を呼び出すと、アイコン画像が反映されます。

アイコンの指定は、アイコンの定義よりも後の行で、行います。

▼script.js

L.marker([緯度, 経度], { icon: whiteIcon }).addTo(map).bindPopup('こんにちは！');

ピンの画像を複数用意する

上記のコードを繰り返し記述すれば、何種類もののピンの画像を表示できますが、ただ繰り返すだけでなく、効率よくコードを書く方法もあります。

影画像や座標の指定は共通なので、一箇所にまとめて書き、iconUrl（アイコン画像）の部分のみ、画像ごとに設定します。ピンへの設定の仕方は、ピン画像が1種類のときと同じです。

下記のコードを書く場合は、先に設定したコード（ピン画像が1種類のとき）をコメントアウトして、無効にしてください。

▼script.js

//複数アイコンをまとめて定義
const circleIcon = L.Icon.extend({
  options: {
    shadowUrl: 'images/ico_shadow.png',
    iconSize: [40, 40],
    shadowSize: [40, 40],
    iconAnchor: [20, 40],
    shadowAnchor: [20, 40],
    popupAnchor: [0, -42]
  }
});

const whiteIcon = new circleIcon({ iconUrl: 'images/ico.png' }),
  pinkIcon = new circleIcon({ iconUrl: 'images/ico_pink.png' });

L.marker([緯度, 経度], { icon: whiteIcon }).addTo(map).bindPopup('こんにちは！');
L.marker([緯度, 経度], { icon: pinkIcon }).addTo(map).bindPopup('こんにちは！');

マップの種類を変える

国土地理院の地図に変更してみます。複数の地図（タイル）がありますので、URL部分は、利用するものをサイトから選んで記述してください。なお、設定できるズームレベルは地図の種類によって異なります。

マップの種類を変更するときは、設定済みのタイルレイヤー（L.tileLayerの行）をコメントアウトしてください。

▼script.js ※URL部分はサイトから自分で選択してください

L.tileLayer('国土地理院のタイルURL', {attribution: '<a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">国土地理院</a>',}).addTo(map);

Open Street Mapの別配色もあります。こちらはOpen Street Map フランスで提供しているデータです。

▼script.js

// Open Street Map hot
L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Tiles style by Humanitarian OpenStreetMap Team hosted by OpenStreetMap France'
}).addTo(map);

応用として、画面上で地図を切り替えるUIを設定することもできます。詳しくは、Layer Groups and Layers Controlを参照してください。

地図上に円や多角形を描画する

地図上にはピンや吹き出しだけでなく、円や多角形も描画することができます。Quick Start Guideも合わせて参照してください。

円を描く場合は、円の中心点を緯度経度で指定し、半径（radius）をメートルで指定します。1000と書けば、中心点から、半径1000メートル（1km）になります。

▼script.js

const circle = L.circle([緯度, 経度], {
  color: 'red', //円の輪郭線の色
  fillColor: '#f03', //円の塗りつぶしの色
  fillOpacity: 0.3, //塗りつぶしの不透明度
  radius: 1000 //半径、メートルで指定
}).addTo(map);

円をクリックしたときに吹き出しを表示することもできます。ここで使っている、circleとは、上で定義している、const circleのことを指しています。

▼script.js

circle.bindPopup("半径1kmの範囲");

多角形のときは、各頂点を緯度経度で指定します。3つの頂点を指定すると三角形、4つの頂点を指定すると四角形になります。

▼script.js

// 多角形の表示
const polygon = L.polygon([
  [緯度, 経度],
  [緯度, 経度],
  [緯度, 経度]
], {
  color: 'red',
  fillColor: '#f03',
  fillOpacity: 0.3
}).addTo(map);

クリック位置の緯度経度を表示

これまで緯度経度を調べるときには、GoogleMapで調べる方法を使っていましたが、Leafletで呼び出した地図上でも、緯度経度が調べられる機能を追加することもできます。

▼script.js

// クリック位置の緯度経度表示
const popup = L.popup();

function onMapClick(e) {
  popup
    .setLatLng(e.latlng)
    .setContent("ここは" + e.latlng.toString() + "です")
    .openOn(map);
}

map.on('click', onMapClick);

参考リンク