Leaflet

ウェブサイト上で地図を表示させる時はどんなウェブサービスを使っていますか？一番多いのはGoogleマップだと思います。柔軟にカスタマイズができて至れりつくせり。しかしマップ上に何千件ものマーカーを設置するには、マップAPIの有料版を取らなければいけません。膨大なデータを地図に表示させるにはお金がかかります。そこで登場するのがOpenStreetMap(通称OSM)というオープン・ソースの地理情報です。JavaScriptのAPIで簡単に利用できます。

OpenStreetMap Japan

https://openstreetmap.jp/

自由な地図をみんなの手に/The Free Wiki World Map

そしてOSMを扱う時に便利なJavaScriptライブラリがLeaflet。

http://leafletjs.com/

OSMのAPIだけでも柔軟にカスタマイズできますが、それをもっと簡単に記述できるようになります。

地図を表示する

必要なものを読み込んで、地図を描画するタグを置く。だけ。

必要なファイルをロード

地図を描画したいところにタグを置いて、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);