システム監視・システム運用のJIG-SAW OPS

Tech ブログTECH BLOG

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

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を表示させることが可能です。それは後程。

地理院地図を表示する

まず、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を表示させてみることにしましょう。

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[公式] 関連チュートリアル

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以外の地図でも十分なのかなと思います。

最後に

これで3種類の地図を切り替えて表示する地図をWebページに載せることができるようになりました。
しかし、ここからがLeafletの素敵なところ。

・マーカーのアイコンを変更する
・マーカーに登録したタイトルを検索する機能を付ける
・マップに画像を設置する
・マップに絵を描く

など、様々な機能をプラグインを用いることで容易に追加することができます。
今回は地図の表示、Leafletの紹介に収まりましたが、ぜひ好きにカスタマイズしてみてください。

関連記事

Tech ブログTECH BLOG

Tech ブログ
ご不明な点はお気軽に
お問い合わせください
03-6262-5160 電話受付時間:平日9:30〜18:30
お問い合わせフォーム

JIG-SAW株式会社

JIG-SAWは、IoTやクラウド基盤に最適な技術やナレッジをベースに、データコントロールの仕組みとフルマネージドサービスであらゆるサービスを安定稼働で支えます。 2015年4月に東証マザーズ上場。 現在1200件数万台のサーバー運用を行っています。

お電話でのお問い合わせ
03-6262-5160
電話受付時間:平日9:30〜18:30
メールでのお問い合わせ
お問い合わせフォーム
サービス資料のご請求
資料請求フォーム
クラウドノウハウ集ダウンロード
ダウンロードフォーム