Webサイトに地図を載せたいあなたへ ~Leafletの使い方~

2019.04.18

本記事のポイント

Leafletは「Webサイトに地図を載せたい」そんな願いを叶えてくれるJavaScriptライブラリです。今回は、Leafletを使いWebサイト上で①地理院地図、②OpenStreetMap、③Google Mapsの3種類の地図を表示する方法を説明します。

はじめに

Google Mapsを使いたいけれど…。

「Webサイトに地図を載せたい」そう考えたあなたが、まず真っ先に思い浮かべる地図は何でしょうか。

Google Mapsを思い浮かべる方が多いのではないかと思います。
無料であれだけ高性能な地図を利用出来てしまうのですから、Google Mapsを単体で利用したことがある方も多いはずです。

しかし、自分のWebサイト上にGoogle Mapsを組み込みたいと考えた際、話は別です。というのも、2018年7月16日以降、Google Maps API*の料金体系が変更され、無償で利用できる枠が大幅に縮小されてしまいました。
*簡単に言えば「Googleマップを、さまざまなサービスで利用できるようにしたもの」

ちなみに、どのくらい縮小されたのか。
これまでは、1日25,000リクエストまで無償で利用できていたものが、Maps Javascript APIのみ利用した場合*、月28,000リクエスト(1日平均933リクエスト)までとなりました。
*単純に「Google MapsをWebサイトに表示する」場合。合算で200USドルが無償枠となるので、他のAPIを利用する場合、更にリクエスト数が制限されます。

また、利用にはAPIキーという、WebサイトやアプリケーションでGoogle Maps APIを利用するための鍵の取得が必須となりました。

「Webサイト上に地図を載せたい」と考えたときに、果たして本当にGoogle Mapsを使う必要があるのでしょうか。
課金する前に、APIキーを取得する前に、試しに別のライブラリで別の地図を表示してみませんか？
ここでGoogle Maps APIの代わりとして登場するのが、今回紹介する「Leaflet」です。

自己紹介？

業務で「Leaflet」を使う機会があり、今回記事にしてみました。

JavaScriptライブラリですが、筆者もJavaScript初心者なので、HTMLの知識があれば使えるような説明を心掛けたいと思います。
※ここに書いてあるコードについて、一応動くことを確認してはおりますが、上手く動かない場合は公式ページに詳細な説明が載っているので参考にしてみてください。
Leaflet[公式]　Tutorials

ちなみに、Google Mapsの代わりとして地理院地図、OpenStreetMapを利用してみましたが、筆者は最終的にはGoogle Mapsを利用することになり、APIキーを取得しました。APIキーさえあれば「Leaflet」でもGoogle Mapsを表示させることが可能です。それは後程。

> AWS、Google Cloud の利用料が、今なら最大8%OFF！

> 各種クラウド・オンプレの「導入支援・監視運用」なら JIG-SAW OPS

地理院地図を表示する

まず、HTMLファイルを作成し、CDNからcss/jsファイルを読み込みます。
Leaflet本体をダウンロードして使用することも可能です。
Leaflet[公式]　Download

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>

bodyタグ内のマップを表示したい場所にdiv要素を追加します。
なお、マップの高さを指定しないと地図が表示されません。

<div id="mapid" style="width: 100%;height: 600px;"></div>

次はJavascriptを書いていきます。
地図を初期化し、表示される地図の中心地とズームレベルを指定します。
中心地は緯度経度で指定してください。今回はJIG-SAW本社がある場所を中心としました。
ズームレベルは使用する地図によって異なりますが、地理院地図(標準地図)の場合「18」が最大です。

var map = L.map('mapid').setView([35.688544, 139.764692], 18);

次に、背景の地図タイルを追加します。
タイルレイヤーを作成する際には、タイル画像のURLと出典を記載する必要があります。
地理院地図[公式]　タイル情報
 地理院地図[公式]　出典情報
※出典ソース例が書かれたサイトなのですが、地理院タイルを用いたサイト構築サンプル集が載っており、Leafletを使った例もあがっております。(あれ、何のためのブログ記事かな？)

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);

まとめると以下のようなコードになります。
それでは、実際に表示してみましょう。
わかりやすいようにJIG-SAW本社の位置にマーカーを追加してみました。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>地理院地図を表示する</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" />
</head>

<body>
  <div id="mapid" style="width: 100%;height: 600px;"></div>

  <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
  <script>
    var map = L.map('mapid').setView([35.688544, 139.764692], 18);
    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);

    //JIG-SAW本社の位置にマーカーを追加する。
    var marker = L.marker([35.688544,139.764692]).addTo(map);
    //上のマーカーにポップアップを追加する。
    marker.bindPopup("JIG-SAW本社").openPopup();
  </script>
</body>
</html>

お分かりいただけたでしょうか。JIG-SAW本社の位置にあるはずの建物(大手町フィナンシャルシティグランキューブ)がありません。こちらの建物、2016年4月1日竣工とのことなので、2019年の段階で地図に表示されていないのは、残念な気がしてしまいますね。
少しGoogle Mapsが恋しくなってきたところで、次はOpenStreetMapを表示させてみることにしましょう。

> AWS、Google Cloud の利用料が、今なら最大8%OFF！

> 各種クラウド・オンプレの「導入支援・監視運用」なら JIG-SAW OPS

OpenStreetMapを表示する

記事の最初に「①地理院地図、②OpenStreetMap、③Google Mapsの3種類の地図を表示する方法を説明する」と書きましたが、今回はこれら3種類の地図をユーザーが自由に切り替えるられるように表示することを目標とします。

先に全体のコード、サンプル地図を載せます。
上のコード、サンプルと異なる部分に注目してみてください。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>地理院地図、OpenStreetMapを表示する</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" />
</head>

<body>
  <div id="mapid" style="width: 100%; height: 600px"></div>
  <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
  <script>
    var map = L.map('mapid').setView([35.688544, 139.764692], 18);

    var gsi = 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>"
    });

    var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: "© <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors"
    });

    var baseMaps = {
      "地理院地図" : gsi,
      "OpenStreetMap" : osm
    };
    L.control.layers(baseMaps).addTo(map);
    gsi.addTo(map);

    //JIG-SAW本社の位置にマーカーを追加する。
    var marker = L.marker([35.688544,139.764692]).addTo(map);
    //上のマーカーにポップアップを追加する。
    marker.bindPopup("JIG-SAW本社").openPopup();
  </script>
</body>
</html>

地図右上の□にカーソルを持っていき、「OpenStreetMap」を選択してみてください。
地図が切り替わり、イケてる感じの~~ハンバーガー屋さん~~があるらしい大手町フィナンシャルシティグランキューブが見えたでしょうか。(どうでも良いですが、検索してみたところ「トースティ」というサンドイッチを売っているお店のようです。)

少し上のコードについて触れたいと思います。
背景の地図タイルを切り替えられるようにするには、作成したタイルレイヤーを変数に入れておく必要があります。
OpenStreetMapについても、タイルレイヤーの作り方は地理院地図と同じです。
OpenStreetMap[公式]　タイル情報
 OpenStreetMap[公式]　出典情報

var gsi = 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>"
});
  
var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: "© <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors"
});

あとはキーと変数名をオブジェクトに設定し、L.control.layerを作成後、mapに追加するだけです。
最後の一行は最初に表示される地図タイルを設定するものです。ここでは地理院地図が最初に表示されます。
Leaflet[公式]　Control.Layers

var baseMaps = {
  "地理院地図" : gsi,
  "OpenStreetMap" : osm
};
L.control.layers(baseMaps).addTo(map);
gsi.addTo(map);

Leaflet[公式]　関連チュートリアル

> AWS、Google Cloud の利用料が、今なら最大8%OFF！

> 各種クラウド・オンプレの「導入支援・監視運用」なら JIG-SAW OPS

Google Mapsを表示する

Leafletにはその機能を簡単に拡張することができるサードパーティ製プラグインが豊富に存在します。
Leaflet[公式]　Plugins
LeafletでGoogle Mapsを表示する際はその中の「Leaflet.GridLayer.GoogleMutant」を使います。
Leaflet.GridLayer.GoogleMutant[公式]
※なお、こちらからGoogle Maps APIキーを取得する必要があります。
Google Maps Platform[公式]

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>地理院地図、OpenStreetMap、Google Mapsを表示する</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" />
</head>

<body>
  <div id="mapid" style="width: 100%; height:600px"></div>

  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" async defer></script>
  <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
  <script src='https://unpkg.com/leaflet.gridlayer.googlemutant@latest/Leaflet.GoogleMutant.js'></script>
  <script>
    var map = L.map('mapid').setView([35.688544, 139.764692], 18);

    var gm = L.gridLayer.googleMutant({
      type: 'roadmap'
    });
    var gsi = 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>"
    });
    var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: "© <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors"
    });

    var baseMaps = {
      "地理院地図" : gsi,
      "OpenStreetMaps" : osm,
      "Google Maps" : gm
    };

    L.control.layers(baseMaps).addTo(map);
    gsi.addTo(map);

    //JIG-SAW本社の位置にマーカーを追加する。
    var marker = L.marker([35.688544,139.764692]).addTo(map);
    //上のマーカーにポップアップを追加する。
    marker.bindPopup("JIG-SAW本社").openPopup();
  </script>
</body>
</html>

「YOUR_API_KEY」の部分に取得した鍵を入力します。
次に、CDNからGoogleMutanのjsファイルを読み込みます。

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" async defer></script>
<script src='https://unpkg.com/leaflet.gridlayer.googlemutant@latest/Leaflet.GoogleMutant.js'></script>

タイルレイヤーの作成方法は上2つの地図と少し勝手が違いますが、タイルレイヤーを作成した後の処理は同じです。

var gm = L.gridLayer.googleMutant({
  type: 'roadmap'
});

var baseMaps = {
  //追記
  "Google Maps" : gm
};

ブログ用にAPIキーを取得していないので、APIキーを空白の状態でサンプル地図を表示してみたいと思います。

※Google Mapsに切り替えると、表示エラーが発生していると思います。(稀に発生しないケースもあるようですが…。)

ちなみに筆者が地理院地図、OpenStreetMapではなく、Google Mapsを使わなければならなくなった理由はそのズームレベルの違い故です。
先程、地理院地図の最大ズームサイズは18と書きましたが、一方Google Mapsの最大ズームサイズは21です。
実際使ってみて「数m単位で位置情報を表示したい」という場合に、地理院地図、OpenStreetMapではズームレベルが低すぎると感じました。ただ、今回のように建物の場所を大まかに示す場合は(地図が更新されていない場合もありますが)、Google Maps以外の地図でも十分なのかなと思います。

> AWS、Google Cloud の利用料が、今なら最大8%OFF！

> 各種クラウド・オンプレの「導入支援・監視運用」なら JIG-SAW OPS