OpenStreetMap + Leaflet で Google Maps API をリプレイス

2019/12/02

OpenStreetMap + Leaflet で Google Maps API をリプレイス

Google Maps API が Google Maps Platform に移行して、従量課金制になってから１年以上が経ちました。通常の地図表示なら月100,000 読み込みまでは無料で使えるとは言え、課金アカウントにクレジットカード情報を登録する必要があります。

ちょっとマーカーを変更したり、表示スタイルをカスタマイズしたいだけなのに、ハードルが高い！以前は完全無料で、APIキーの取得すら不要だっただけに、対応に困ったという方も多いのではないでしょうか。

今回は、そんな Google Maps API の代替として、OpenStreetMap と Leaflet をご紹介します。

誰でも自由に使える地図データ OpenStreetMap

"OpenStreetMap" は、オープンデータベースライセンス（ODbL）の下、誰でも自由に使える地理情報データです。

このオープンデータを利用しない手はありません。みんなで積極的に活用して、とっても有益なこのプロジェクトを応援していきましょう。

ちなみに、タイルと呼ばれる部分的な地図画像がサーバから配信されます。１枚のタイルはこんな感じ。

詳しくは、公式サイトをご参照ください。

OpenStreetMap

OpenStreetMap Japan

オープンソースの地図ライブラリ Leaflet で Webマップを実装

地図画像だけあっても GoogleマップっぽいインターフェースのWeb地図にはならないので、Web地図ライブラリを使用します。

ここでは、オープンソースの JavaScript ライブラリ "Leaflet" を使ってみましょう。公式サイトからダウンロードするか、CDNから直接、HTMLファイルに読み込んで使用します。

公式サイトでは導入チュートリアルや、機能拡張できるプラグインも紹介されています。では早速、試してみましょう。

Leaflet - a JavaScript library for interactive maps

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>sample</title>
  <!-- leaflet の CSSファイルを読み込み -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="">
  <!-- マップを表示する要素に高さを与えておく -->
  <style>
    #mapid{
      height: 256px;
    }
  </style>
</head>
<body>
  <!-- マップを表示する要素を置く -->
  <div id="mapid"></div>
  <!-- leaflet.js を読み込み -->
  <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js" integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og==" crossorigin=""></script>
  <script>
    /* 中心座標とズームレベルを設定してマップを初期化する */
    var mymap = L.map('mapid').setView([35.678362, 139.715387], 16);
    /* 地図タイルに OpenStreetMap を指定する。著作権表示も忘れずに */
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(mymap);
    /* マップにマーカーを追加。マーカーにポップアップウインドウをバインドして開く */
    L.marker([35.678362, 139.715387]).addTo(mymap).bindPopup('新国立競技場<br>て、ずっと「新」なの？').openPopup();
  </script>
</body>
</html>

サンプル Demo

1984年

Leaflet 公式サイトにあるクイックスタートガイド、ほぼまんまですが、簡単ですよね。少なくとも、Google Maps API を使ったことのある人なら、すぐに理解できる感じ。

チュートリアルには丁寧な解説があるし、足りない機能はプラグインもあるので、やりたいことは大体できると思います。

地理情報がみんなのものであることって、何気に重要だと思うんですよね。1984年に Apple が打った CM ではありませんが、IBM でも Microsoft でもなく、改革者だと思われていた彼が「ビッグ・ブラザー」だった、とか怖い。て、戯れ言ですよ！

何はともあれ、もう一つの選択肢を持っておくことは有効だなぁ、というお話でした。

いろいろ試してみたいので、OpenStreetMap + Leaflet + WordPress でデモサイトを立ててみようかと思っています。ぼちぼち進めたり、進めなかったりしますので、約束はできませんが、もし公開できたらまたお知らせします。