Leaflet とは

Leafletは、地図データを扱うためのJavaScript ライブラリ。Google Maps PlatoformやYOLPのようなメソッドで、地図情報の操作ができる。

Leaflet のウェブサイト
https://leafletjs.com/

Leafletのレポジトリ
https://github.com/Leaflet/Leaflet

Vladimir Agafonkinというエンジニアによって開発された。

著作権は、Vladimir および各コントリビュータに帰属しているが、BSDライセンスを採用しているため、著作権の表示と免責条項さえ明記しておけば、再利用も再配布も自由となる。

Leafletを使えば、すぐに地図が使えるか

No、Leaflet自体は単なるJSライブラリで、地図データを持っていない。

Leaflet で地図を表示するためにはどうすれば良いか

Leallet とは別に、地図サービスからデータを取得する必要がある。

例えば MapBox という有名な地図情報サービスと組み合わせ使うことができる。

この場合、MapBoxにアカウントを作成し、APIキーをあらかじめ取得する必要がある。
利用頻度に応じて、MapBoxに利用料を払う必要がある。

面白い例として、Leaflet にGoogle Maps のデータを組み合わせて表示することも可能なようだ(ただしライセンス違反になる可能性が高い)。

この場合、地図の画像データはGoogle Mapsを使い、描画するためのライブラリにLeafletを利用する形となる。

いずれにせよ、利用する地図データの規約に合わせて、APIキーを取得したり、費用を払う必要がある。

OpenStreetMap とは

OpenStreatMap財団が「Open Data Commons Open Database License (ODbL)」の下にライセンスするオープンデータ。OpenStreetMapとその協力者をクレジットすれば、データを自由にコピー、配布、送信、利用することができる。料金はかからない。

ライセンスはCreative Commons.
https://www.openstreetmap.org/copyright/ja

Leaflet+ OpenStreetMap 基本的な使い方

公式サイトのチュートリアルが詳しい。

Laefletのライブラリ(CSS、JS)を読み込み、地図データをOpenStreetMapから呼び出して使う。

Leafletを使う場合、必ずCSSを先に呼び出し、その後にJSライブラリを読み込む必要がある。


<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
   integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
   crossorigin=""/>
 <!-- Make sure you put this AFTER Leaflet's CSS -->
 <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
   integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
   crossorigin=""></script>

ライブラリ読み込み後、htmlの　body内に、地図表示のためのDOMを設定する。

 <div id="mapid"></div>

地図表示用のDOMサイズを、個別にCSSで指定する。

#mapid { height: 500px; }

DOMの準備ができたら、地図オブジェクトを生成してOpenStreetMapの画像タイルを読み込む。


var map = L.map('mapid', {
  center: [35.66572, 139.73100],
  zoom: 17,
});
var tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
});
tileLayer.addTo(map);

サンプルコード

地図上にマーカーを表示する

DOMに地図を描画した後、マーカーの情報をオブジェクトに追加する。

// 六本木を中心に地図描画

var map = L.map('mapid', {
  center: [35.66572, 139.73100],
  zoom: 17,
}); 

// OpenStreetMap から地図画像を読み込む

var tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
});
tileLayer.addTo(map);

// マーカー画像の場所を指定する

L.marker([35.66572, 139.73100]).addTo(map);

動作サンプル

Leaflet+OSM Sample01 マーカーを表示

複数のマーカーを表示する

// 六本木を中心に地図描画

var map = L.map('mapid', {
  center: [35.66572, 139.73100],
  zoom: 17,
}); 

// OpenStreetMap から地図画像を読み込む

var tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
});
tileLayer.addTo(map);

// マーカー画像の場所を指定する

L.marker([35.66572, 139.73100]).addTo(map); //1つ目のマーカー
L.marker([35.6662186, 139.7303961]).addTo(map); //２つ目のマーカー

動作サンプル

Leaflet+OSM Sample02 マーカーを複数表示

geoJson を利用して複数のマーカーを表示する

geoJson は、地理情報を扱うためのJSONフォーマット。
Leafletに用意されている「geoJson」メソッドを利用する

// 六本木を中心に地図描画

var map = L.map('mapid', {
  center: [35.66572, 139.73100],
  zoom: 17,
}); 

// OpenStreetMap から地図画像を読み込む

var tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
});
tileLayer.addTo(map);


var features = [];
var place = [{
  "name": "東京ミッドタウン",
  "lat": "35.66572",
  "long": "139.73100"
}, {
  "name": "サントリー美術館",
  "lat": "35.6662186",
  "long": "139.7303961"
}, ]
// GeoJSON形式で複数個のマーカーを設定する
for (var i = 0; i < place.length; i++) {
  features.push({ // 1つのマーカーの情報を格納する
    "type": "Feature",
    "properties": {
      "name": place[i].name
    },
    "geometry": {
      "type": "Point",
      "coordinates": [place[i].long, place[i].lat]
    }
  });
}
L.geoJson(features).addTo(map);

注意点

geoJson でマーカーを表示する際は、「経度」→「緯度」で位置情報を指定する必要がある。

      "coordinates": [place[i].long, place[i].lat]

「緯度」→「経度」で指定すると、期待通りの描画にならないため、要注意。

動作サンプル

Leaflet+OSM Sample03 geoJson でマーカーを複数表示

マーカーをクリックするとポップアップを表示する

「bindPopup」でイベントをバインドする

var map = L.map('mapid', {
  center: [35.66572, 139.73100],
  zoom: 17,
});
var tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
});
tileLayer.addTo(map);
var features = [];
var place = [{
  "name": "東京ミッドタウン",
  "lat": "35.66572",
  "long": "139.73100"
}, {
  "name": "サントリー美術館",
  "lat": "35.6662186",
  "long": "139.7303961"
}, ]
// GeoJSON形式で複数個のマーカーを設定する
for (var i = 0; i < place.length; i++) {
  features.push({ 
    "type": "Feature",
    "properties": {
      "name": place[i].name
    },
    "geometry": {
      "type": "Point",
      "coordinates": [place[i].long, place[i].lat]
    }
  });
}
L.geoJson(features, {
  onEachFeature: function(features, layer) {
    if (features.properties && features.properties.name) {
      layer.bindPopup(features.properties.name);
    }
  }
}).addTo(map);

動作サンプル

Leaflet+OSM Sample04 マーカーをクリックするとポップアップが表示される

マーカーに MouseOver、Click イベントを仕掛ける

先にbindPopup をバインドし、MouseOver, click イベントを重ねる。

マーカーの上にマウスを重ねると、ポップアップが表示
マーカーをクリックすると、アラートが表示される

というユースケースで書いてみた。

var map = L.map('mapid', {
  center: [35.66572, 139.73100],
  zoom: 17,
});
var tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
});
tileLayer.addTo(map);
var features = [];
var place = [{
  "name": "東京ミッドタウン",
  "lat": "35.66572",
  "long": "139.73100"
}, {
  "name": "サントリー美術館",
  "lat": "35.6662186",
  "long": "139.7303961"
}, ]
// GeoJSON形式で複数個のマーカーを設定する
for (var i = 0; i < place.length; i++) {
  features.push({ 
    "type": "Feature",
    "properties": {
      "name": place[i].name
    },
    "geometry": {
      "type": "Point",
      "coordinates": [place[i].long, place[i].lat]
    }
  });
}
L.geoJson(features, {
  onEachFeature: function(features, layer) {
    if (features.properties && features.properties.name) {
      layer.bindPopup(features.properties.name);
      layer.on('mouseover', function(e) {
        this.openPopup();
      });
      layer.on('mouseout', function(e) {
        this.closePopup();
      });
      layer.on('click', function(e) {
        alert('Yay!');
      });
    }
  }
}).addTo(map);

動作サンプル

Leaflet+OSM Sample05 マーカーにonMouse、onClickそれぞれにイベントを仕掛ける

地図の中央に十字マークを表示する

「あちあち情報局」様のコードを参考にしました。
十字マークは、国土地理院より拝借。


// 十字マークを地図中央に表示

var crossIcon = L.icon({
  iconUrl: 'https://maps.gsi.go.jp/image/map/crosshairs.png',
  iconSize: [32, 32], 
  iconAnchor: [16, 16] 
});

var crossMarker = L.marker( map.getCenter(),{
  icon:crossIcon,  
  zIndexOffset:1000, 
  interactive:false 
}).addTo(map);


map.on('move', function(e) {
  crossMarker.setLatLng(map.getCenter());
});

動作サンプル

Leaflet+OSM Sample06 地図の中央に十字マークを表示する

現在地の情報を取得して地図を表示する

「locate」メソッドを使う。geoLocation のラッパーのようで、ブラウザが geoLocation API 対応なら、現在地を取得して処理を行ってくれる。

locateメソッドとは別に、onLocationFound, onLocationError という2つのメソッドがある。

それぞれ、現在位置の取得の成功・失敗に応じてイベントの発火ができる。
より細かい処理が必要な場合に有用。

// 現在地を取得して、地図を描画する

function getgeo() {
  map.on('locationerror', onLocationError);
  map.locate({
    setView: "true"
  });
}

function onLocationError(e) {
  alert(e.message);
}

動作サンプル

Leaflet+OSM Sample07 現在地の地図を表示する

地図の縮尺について

PCの画面で locateメソッドを使うと、地図の描写がZoomOutされ、細かい地図の描写ができない。
その一方、スマートフォンで locate 機能を使うと、直前まで表示していた地図の縮尺レベルを保ったまま、現在地周辺の地図を描画する。

スマホで使う分には問題ないが、ちょっと気持ち悪い。どうすれば解決するか、調査中。

地図をドラッグ移動後、中心点の緯度経度を表示する

「moveend」メソッドを使う。getCenter と組み合わせて、

地図の移動終了を、moveend で検知し、イベント発火
getCenter で中心地の緯度経度を取得する

という流れで処理する。

緯度は getCenter().lat
経度は getCenter().lng

で取得できる。

map.on('moveend', function(e) {
  console.log("緯度: " + map.getCenter().lat);
  console.log("経度: " + map.getCenter().lng);   
});

動作サンプル

Leaflet+OSM Sample08 地図をドラッグ移動後、中心の緯度経度を表示

コントローラーの表示位置を調整する

を使うと楽。

LeafletにはDOM操作用のメソッドがいくつか用意されており、それを使う。

「右上」「右下」「左上」「左下」の指定ができる。


map.zoomControl.setPosition("bottomleft");

StackOverflow をみていると、別なやり方も見つけられるが、上記の方がシンプル。

動作サンプル

Leaflet+OSM Sample09 Zoomコントローラーの位置を変える

実稼働例

個人で開発・運営しているウェブサービスに、Leaflet と OpenStreetMap で地図表示を行いました。こちらに反映してます。

天気の子聖地ナビ

Leaflet + OpenStreetMap で地図情報を扱うサンプルコード

Leaflet とは

Leafletを使えば、すぐに地図が使えるか

Leaflet で地図を表示するためにはどうすれば良いか

OpenStreetMap とは

Leaflet+ OpenStreetMap 基本的な使い方

サンプルコード

地図上にマーカーを表示する

動作サンプル

複数のマーカーを表示する

動作サンプル

geoJson を利用して複数のマーカーを表示する

注意点

動作サンプル

マーカーをクリックするとポップアップを表示する

動作サンプル

マーカーに MouseOver、Click イベントを仕掛ける

動作サンプル

地図の中央に十字マークを表示する

動作サンプル

現在地の情報を取得して地図を表示する

動作サンプル

地図の縮尺について

地図をドラッグ移動後、中心点の緯度経度を表示する

動作サンプル

コントローラーの表示位置を調整する

動作サンプル

実稼働例