Leaflet 入門

Leaflet の公式サイトと導入

導入

まずは公式サイトから Leaflet をダウンロードします。

https://leafletjs.com/

Leaflet には CDN とダウンロード版が用意されていて、どちらも公式サイトの Download ページにそれぞれの導入のしかたが書いてあります。

ダウンロード派は CSS ファイルと images は同じディレクトリにおきましょう。

公式サイトで見られるドキュメント

とりあえず Leaflet の公式サイトにある Tutorials と API Reference にざっと目を通してどんなクラスや機能があるのか大雑把に把握。プラグインのリンク集もあります。それからいろんなデモサイトなどを拝見。

公式サイトのドキュメントは鋭意執筆中といった感じですが、今公開されている内容でもライブラリの入手からチュートリアル、API Reference、拡張の仕方まで必要な情報は一通り揃っているようで、基本的にはサイトを見れば間に合いそうです。

Leaflet 入門

Hello, world

ライブラリの導入が済んだら最初の一歩はお約束のこれで。

これは京都市内、とある日本の聖地をあらわす緯度経度を中心にズームレベル15で地図を描画し、さらに聖地を指し示すマーカーとポップアップがついています。公式サイトのトップページに見本として載っているものとやっていることは同じです。

以下、ライブラリを読み込んだ状態を前提とした、JavaScript 部分の抜粋です。

var nintendo = L.latLng(34.9697112, 135.7562166);
var map = L.map('map').setView(nintendo, 15);

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

L.marker(nintendo).addTo(map)
  .bindPopup('Hello, world!')
  .openPopup();

L.* がいっぱい。

Leaflet のクラスと命名規則

Leaflet には地図を表現するために必要なさまざまなオブジェクトの型がクラスとして定義されていますが、ドキュメントによるとクラス名は L.UpperCamelCase (単語の頭文字は大文字) で、拡張するときもそうしてねと言っています。

以下はデモで使われているクラスの一部です。

クラス名	概要
L.Map	地図コンテナ
L.LatLng	地理（緯度経度）座標 (lat, lng[, alt])
L.TileLayer	マップタイルレイヤー
L.Marker	マーカー

このクラス名、デモのコードと見比べてみると

var map = L.map('map').setView(nintendo, 15);

とちょっと違う。

var map = new L.Map('map').setView(nintendo, 15);

じゃないですよね。

この L.map() は「インスタンス生成用のショートカット」だそうです。作者はほとんどすべての Leaflet クラスについてインスタンス生成のためのショートカット関数（いわゆるファクトリー関数ですね）を

L.hoge = function (options) {
    return new L.Hoge(options);
};

のように定義していて、このショートカットを使って実際のインスタンス生成を行う書き方をよしとしているようです。このショートカットの命名規則は L.lowerCamelCase で、単語の頭は大文字だけど先頭だけは小文字、となります。

公式サイトのチュートリアルにこういったことが書いてあるんですが、まだまとまった文書という感じではなくチュートリアルついでに所々ぽろっと出てくる感じだったのでまとめてみました。

※7/18 に 1.3.3 にアップデートされたあたりから急にドキュメントの更新が盛んになったみたいで見るたびに内容が変わっていってるので最新情報をチェックされる方はご注意。

参考

• Leaflet – a JavaScript library for interactive map（トップページ）
• Markers With Custom Icons – Leaflet
• Extending Leaflet, Class Theory – Leaflet