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

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

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

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

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

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

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

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

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

© OpenStreetMap contributors

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

OpenStreetMap

OpenStreetMap Japan

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

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

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

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

Leaflet - a JavaScript library for interactive maps

サンプルコード




  
  sample