ITエンジニア勉強ブログ

自分が学んだことを共有していきます。

OpenStreetMapを表示するJavaScriptライブラリ

IT

この記事ではOpenStreetMapをWebページ上に表示するJavaScriptライブラリをいくつか紹介します。

Leaflet


See the Pen
OpenStreetMap with JavaScript by Imai (@imai1)
on CodePen.


公式ページ

leafletjs.com

基本的な使い方

Leafletを使用する場合は、まずCSSおよびJSファイルをロードします。

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ==" crossorigin="" />

<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js" integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ==" crossorigin=""></script>

この記事執筆時点での最新バージョンは1.8.0でした。実利用の際は最新バージョンを使用ください。

次に、HTML上に地図を描画する領域を用意します。スクリプトから参照するためにIDが必要です。

<div id="map_leaflet" style="height: 260px;"></div>

最後に、スクリプトで描画領域にOpenStreetMapを紐づけます。

// タグに描画領域を設定する
const map = L.map('map_leaflet', {
  center: [35.658584, 139.7454316], // 十進角での東京タワーの緯度経度
  zoom: 17,
});

// 描画領域にOpenStreetMapを読み込む
const 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);

なお、後で詳しく説明する通り、OpenStreetMapの利用時にはライセンス表記が必要です。Leafletではライブラリのユーザが手動で表記設定をするようになっています。Leaflet自体はBSD-2-Clauseライセンスです。

マーカーはL.markerで作成した後にaddToで地図に紐づけます。

const marker = L.marker([35.658584, 139.7454316]).addTo(map);

OpenLayers


See the Pen
OpenStreetMap with OpenLayers by Imai (@imai1)
on CodePen.


公式ページ

openlayers.org

基本的な使い方

OpenLayersを使用する場合も、まずCSSおよびJSファイルをロードします。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.14.1/css/ol.css" type="text/css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.14.1/build/ol.js"></script>

この記事執筆時点での最新バージョンは6.14.1でした。実利用の際は最新バージョンを使用ください。

次に、HTML上に地図を描画する領域を用意します。スクリプトから参照するためにIDが必要です。

<div id="map_openlayers" style="height: 260px;"></div>

最後に、スクリプトで描画領域にOpenStreetMapを紐づけます。

const map = new ol.Map({
  target: 'map_openlayers',
  layers: [  // タイルの紐づけ
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  view: new ol.View({  // 描画領域の設定
    center: ol.proj.fromLonLat([139.7454316, 35.658584]),  // 十進角で東京タワーの経度緯度。緯度経度ではないことに注意。
    zoom: 17
  })
});

OpenLayersの場合は、OpenStreetMapのURLを直接叩く必要はありません。また、ライセンス表記はライブラリ側で管理されています。

なお、OpenLayersのfromLonLatは経度（Longitude）、緯度（Latitude）の順であることにご注意ください。

OpenLayersもBSD-2-Clauseライセンスです。

ArcGIS（概要のみ）

ArcGISは、OpenStreetMapのみならず、様々な種類・ソースの地図データを利用するための有名ライブラリです。

developers.arcgis.com

ArcGISのライブラリを利用する場合、一定量までは無料で地図データの表示ができますが、その場合でもAPIキーの登録が必要なようです。

OpenStreetMapの利用規約について

ライセンス表記

OpenStreetMapを利用する場合は次の表示が必要です。

Webページなどの電子データの場合、公式のcopyrightページにリンクされていれば最初の一つだけでも良いそうです。

タイルサーバ利用

データそのものはライセンス規約の範囲で自由に使えるとしても、それを提供するタイルサーバはそうではありません。公式のタイルサーバはdonated resources（有志に寄付された計算資源）で運用されているため、高負荷用途に利用することは禁止されています。

高負荷な用途にデータを利用したい場合の代替案としては、ミラーサーバを（そのサーバの利用規約の範囲で適切に）使用するか、自分でミラーサーバを用意する方法などがあります。


更に詳しく知りたい方は以下の公式ページおよびWiki等を参照されてください。また、この記事の情報が古くなっていたり誤っていたりする可能性もありますので、利用される場合は十分にご注意ください。

www.openstreetmap.org
wiki.openstreetmap.org