LeafletでOpenStreetMapを使用する際の備忘録

LeafletでOpenStreetMapを表示するやり方を調べたので忘れないように書いておく

LeafletはWeb地図サービスで広く使われるオープンソースのJavaScriptライブラリ
仕様、詳細は公式サイト(https://leafletjs.com/)のTutorialsやDocs(リファレンス)を参照のこと
※記事で記載してるバージョン等は執筆時点のもので最新バージョンとは異なる場合がある

Leafletの導入
地図の表示
地図の表示コード

Leafletの導入

LeafletはJavaScriptとCSS各1ファイルとマーカー用のイメージファイルで構成されている
Leaflet導入には、公式サイトよりダウンロードするか外部ファイルとして読み込む

ダウンロードして使用する場合は、HTMLファイルヘッダーに次のようなコードを追加する
ダウンロードファイルに含まれるimagesフォルダも適宜配置する

<link rel="stylesheet" href="/path/to/leaflet.css" />
<script src="/path/to/leaflet.js"></script>

1 2	<link rel="stylesheet" href="/path/to/leaflet.css" /> <script src="/path/to/leaflet.js"></script>

外部ファイルとして読み込む場合は、HTMLファイルヘッダーに次のコードを追加する
(imagesフォルダの配置は不要)

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
  integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
  crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
  integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
  crossorigin=""></script>

integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="

crossorigin=""/>

integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="

crossorigin=""></script>

本記事では外部ファイルとして読み込む方法を使用する

地図の表示

OpenStreetMapを表示する設定

地図の位置(中心)とズーム設定

var map = L.map('map').setView([35.684130,139.774102], 11);

1	var map = L.map('map').setView([35.684130,139.774102], 11);

設定内容説明

‘map’ — 表示するdivのid
35.684130,139.774102 — 地図中心の緯度と経度
11 — ズーム(数字が大きくなると拡大)

使用する地図、ライセンス表示、最大ズーム設定

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
    });

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

});

設定内容説明

tileLayer — 使用する地図(OpenStreetMap)
attribution — ライセンス表示
maxZoom — 最大ズーム(必須ではない)

タイルレイヤー読み込み

tileLayer.addTo(map);

1	tileLayer.addTo(map);

設定内容説明

地図上にタイルレイヤーを読み込んで表示させる

マーカーとポップアップ

L.marker([35.666285,139.725918]).addTo(map)
  .bindPopup("乃木坂駅はココ")
  .openPopup();

L.marker([35.666285,139.725918]).addTo(map)

.bindPopup("乃木坂駅はココ")

.openPopup();

設定内容説明

L.marker — マーカー表示する緯度経度
bindPopup — ポップアップ文字列(imgやaタグも使用可能)
openPopup() — ポップアップ追加と同時に表示

地図表示

htmlのbody内で地図表示位置を指定する

<div id="map" style="width: 300px; height: 300px;"></div>

1	<div id="map" style="width: 300px; height: 300px;"></div>

設定内容説明

id — JavaScriptと合わせて”map”とする
width — 指定しなければLeaflet初期値の100%となる
height — Leaflet初期値がないので必ず指定する

地図の表示コード

ここまでの内容をまとめたコード(html)は次のようになる
なおJavaScriptはhtml読み込み後に実行させるためwindow.onloadを使用してる

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Leaflet OpenStreetMap サンプル</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
  integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
  crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
  integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
  crossorigin=""></script>
<script type="text/javascript">
(window.onload = function() {
  var map = L.map('map').setView([35.684130,139.774102], 11);
  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
    });
  tileLayer.addTo(map);
  L.marker([35.666285,139.725918]).addTo(map)
    .bindPopup("乃木坂駅はココ")
    .openPopup();
})();
</script>
</head>
<body>
<div id="map" style="width: 300px; height: 300px;"></div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Leaflet OpenStreetMap サンプル</title>

integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="

crossorigin=""/>

integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="

crossorigin=""></script>

(window.onload = function() {

var map = L.map('map').setView([35.684130,139.774102], 11);

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

});

tileLayer.addTo(map);

L.marker([35.666285,139.725918]).addTo(map)

.bindPopup("乃木坂駅はココ")

.openPopup();

})();

</script>

</head>

<body>

</body>

</html>

その他OpenStreetMap以外に国土地理院の地図を使用することも可能
使用する地図、ライセンス表示、最大ズーム設定を以下のように変更すれば良い

var tileLayer = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png',{
  attribution: ' <a href="https://maps.gsi.go.jp/development/ichiran.html">国土地理院</a>',
  maxZoom: 17
  });