ウェブサイト上で地図を表示させる時はどんなウェブサービスを使っていますか？一番多いのはGoogleマップだと思います。
柔軟にカスタマイズができて至れりつくせり。
しかしマップ上に何千件ものマーカーを設置するには、マップAPIの有料版を取らなければいけません。膨大なデータを地図に表示させるにはお金がかかります。
そこで登場するのがOpenStreetMap(通称OSM)というオープン・ソースの地理情報です。JavaScriptのAPIで簡単に利用できます。
OpenStreetMap Japan
自由な地図をみんなの手に/The Free Wiki World Map
そしてOSMを扱う時に便利なJavaScriptライブラリがLeaflet。
Leaflet
Leaflet
OSMのAPIだけでも柔軟にカスタマイズできますが、それをもっと簡単に記述できるようになります。
地図を表示する
必要なものを読み込んで、地図を描画するタグを置く。だけ。
必要なファイルをロード
|
1 2 3 |
<!-- headタグ内でCSSとLeafletを読み込む --> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> |
地図を描画したいところにタグを置いて、CSSで高さを指定
|
1 |
<div id="map"></div> |
|
1 |
#map { height: 180px; } |
地図のデフォルト値を設定して、描画する
|
1 2 3 4 5 6 7 8 |
// 地図のデフォルトの緯度経度(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: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>', maxZoom: 19 }); |
特定の座標にマーカーを置く
|
1 |
L.marker([50.5, 30.5]).addTo(map); |
動作サンプル
See the Pen raGPex by sato4yoshida (@sato4yoshida) on CodePen. 1
geoJSONのロードしてマーカーを表示する
ざっくりと使い方がわかったところで、本題へ。
地図上に大量のマーカーを置く時は、geoJSONを利用すると便利。
マーカーを置く緯度経度をJSON形式で扱え、JSONなので別ファイルで保存なんてこともできる。
geoJSONのフォーマット
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
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にクリック時に表示するコンテンツを記述
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
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の値を呼び出します。
|
1 2 3 4 5 6 7 8 9 10 |
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年ハウモリ、初めての地図。地図と出会い、地図を使うの巻。 | ハウモリ