地図を表示する
必要なものを読み込んで、地図を描画するタグを置く。だけ。必要なファイルをロード
地図を描画したいところにタグを置いて、CSSで高さを指定
#map { height: 180px; }
地図のデフォルト値を設定して、描画する
// 地図のデフォルトの緯度経度(51.505, -0.09)と拡大率(拡大レベル13) var map = L.map('map').setView([51.505, -0.09], 13); // 描画する(Copyrightは消しちゃダメよ) var tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{ attribution: '© OpenStreetMap contributors, CC-BY-SA', maxZoom: 19 });
特定の座標にマーカーを置く
L.marker([50.5, 30.5]).addTo(map);
動作サンプル
See the Pen raGPex by sato4yoshida (@sato4yoshida) on CodePen. 1
geoJSONのロードしてマーカーを表示する
ざっくりと使い方がわかったところで、本題へ。 地図上に大量のマーカーを置く時は、geoJSONを利用すると便利。 マーカーを置く緯度経度をJSON形式で扱え、JSONなので別ファイルで保存なんてこともできる。geoJSONのフォーマット
var geojsonFeature = [ { "type": "Feature", "geometry": { "type": "Point", "coordinates": [-104.99404, 39.75621] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [-104.05, 48.99] } } ];geoJSONは最低限でこんなフォーマット。typeとgeometryにどの座標にどう描写するかが格納されています。
動作サンプル
See the Pen OSMとLeafletでgeoJSONをロード by sato4yoshida (@sato4yoshida) on CodePen. 1
マーカーをクリックで情報を表示する
よくあるようなマーカークリックで情報を表示させたりもできます。 geoJSONのproperty.popupContentにクリック時に表示するコンテンツを記述var geojsonFeature = [ { "type": "Feature", "properties": { "popupContent": "AAA" }, "geometry": { "type": "Point", "coordinates": [-104.99404, 39.75621] } }, { "type": "Feature", "properties": { "popupContent": "BBB" }, "geometry": { "type": "Point", "coordinates": [-104.05, 48.99] } } ];マーカーをセットする時にクリック時のイベントをバインド(onEachFeature)して、クリックイベントが発火したらpopupContentの値を呼び出します。
L.geoJson( geojsonFeature, { onEachFeature: function(feature, layer){ if (feature.properties && feature.properties.popupContent) { layer.bindPopup(feature.properties.popupContent); } } } ).addTo(map);
動作サンプル
See the Pen OSMとLeafletでgeoJSONをロード by sato4yoshida (@sato4yoshida) on CodePen. 1
マーカーを大量に置いてみる
3,000個分のgeoJSONをランダムで生成してるのでお使いのPCによっては重たいかもしれません。See the Pen OSMとLeafletでマーカーをいっぱい置いてみる by sato4yoshida (@sato4yoshida) on CodePen. 1
ピンバック: 2016年ハウモリ、初めての地図。地図と出会い、地図を使うの巻。 | ハウモリ