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

動作サンプル

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