Leafletを使ってWebサイトに地図を表示する

      2019/02/17

Google マップを使用せずにWebサイトなどに地図を表示する方法です。
無料のJavaScriptライブラリLeafletを使って地図データ(タイル)を表示させます。マーカーを乗せることも可能です。

基本的な Leaflet の使い方

ライブラリのリンク

ダウンロードして自分のサーバに置く方法もありますが、今回はWeb上のファイルを指定します。
<head></head>に以下を記述します。

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>

HTML

地図を表示させたい箇所に<div>を記述します。

<div id="map"></div>

スタイルシート

地図用の<div>について表示する大きさなどを指定します。

#map {
    border: 1px solid #BDBDBD;
    height: 200px;
    margin: 0;
    width: 400px;
}

地図の表示

表示位置に指定した<div>より下に地図を表示するためのスクリプトを記述します。
ここではタイルにOpenStreetMapを利用しています。

<script>
// 地図を作成する.
var map = L.map('map');

// タイルレイヤーを作成し、地図にセットする.
L.tileLayer('http://tile.openstreetmap.jp/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '<small>&copy;</small> <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors',
}).addTo(map);

// 地図の中心座標とズームレベルを設定する.
map.setView([34.693869, 135.501844], 15);
</script>

Leaflet

国土地理院のタイルを使う場合
// タイルレイヤーを作成し、地図にセットする.
L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
    maxZoom: 18,
    attribution: '<a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">国土地理院</a>',
}).addTo(map);

マーカーを表示する

マーカーを表示したい座標を指定して地図にセットします。

// マーカー.
var marker = L.marker([34.693869, 135.501844]).addTo(map);

Leaflet マーカー

マーカーポップアップを表示する

マーカークリック時にポップアップを表示させることができます。HTMLなのでリンクなども記述できます。

// ポップアップ.
marker.bindPopup("<p>大阪市役所</p>");

Leaflet マーカーポップアップ

マーカーポップアップを表示状態にする

// ポップアップオープン.
marker.bindPopup("<p>大阪市役所</p>").openPopup();

マーカーをオリジナルの画像にする

アイコンを定義してマーカー作成時に指定します。

var startMarkerIcon = L.icon({
    iconUrl: 'star.png', // アイコン画像のURL.
    iconSize:     [32, 32], // アイコンサイズ.
    iconAnchor:   [16, 32], // 指定した地図の座標がマーカーのどの位置になるか.
    popupAnchor:  [0, -16]  // ポップアップが出現する位置(iconAnchorからの相対位置)
});

var marker = L.marker([34.693869, 135.501844], {icon: startMarkerIcon}).addTo(map);

Leaflet マーカーアイコン

ツールチップの表示

マーカー上にマウスを乗せた時にメッセージを表示することができます。こちらもHTMLで記述できます。

// ツールチップ.
marker.bindTooltip("クリックして");

Leaflet マーカーツールチップ

マーカークラスター

地図が縮小された時に近くのマーカーをクラスタリング(集合)します。

ライブラリのリンク

<head></head>に以下を記述します。

<script src="https://unpkg.com/leaflet.markercluster@1.3.0/dist/leaflet.markercluster.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.Default.css" />

マーカークラスターの表示

// クラスターグループの作成.
var markers = L.markerClusterGroup();
markers.addLayer(
    L.marker([34.693869, 135.501844])
);
markers.addLayer(
    L.marker([34.693383, 135.503254])
);
// クラスターグループをマップに追加.
map.addLayer(markers);

Leaflet マーカークラスター

クラスターグループのオプション

マーカークラスターオブジェクト生成時にオプション指定が可能です。

// クラスターグループの作成.
var markers = L.markerClusterGroup({
    spiderfyOnMaxZoom: true,
    disableClusteringAtZoom: 16
});
オプション名 内容
spiderfyOnMaxZoom 近い場合にクリックでスパイダー表示するかどうか
disableClusteringAtZoom 強制解除されるズーム値

上記以外にもオプションはあります。

Leaflet スパイダー表示

ズームコントロールを非表示にする

マップオブジェクト生成時にオプション指定が可能です。

// 地図を作成する.
var map = L.map('map', {
    zoomControl: false
});

Leaflet ズームコントロールなし

ブラウザいっぱいに地図を表示する方法

スタイルシートを以下の様に記述します。HTMLの<body>部分には地図表示用の<div>のみ記述します。

html, body {
    height: 100%;
    margin: 0;
}

#map {
    height: 100%;
    margin: 0;
    width: 100%;
}

サンプル

 - JavaScript/JSP ,