Leaflet基本機能で地図を作ろう！(コード付)#2
前回の記事ではLeafletを使って地図を描くために最低限必要なサンプルコードについてご紹介させて頂きました。今回は、Leafletの基本機能だけを使って(プラグインを使わないで)、地図を描画します。
・サンプルコード（ご自由にご活用ください）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Leafletで地理院地図を表示する#2</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.0/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.3.0/dist/leaflet.js"></script>
<script>
// (4)マーカーリスト
var markerList = [
{ pos: [35.65860384361886, 139.70164418220523], name: "渋谷駅" },
{ pos: [35.67131255658154, 139.70271706581119], name: "原宿駅" },
{ pos: [35.665246098220976, 139.71256613731387], name: "表参道駅" },
{ pos: [35.646887024262085, 139.7099053859711], name: "恵比寿駅" },
{ pos: [35.66324127644291, 139.73219990730288], name: "六本木駅" }
];
function init() {
// (2)ズームコントロールのデフォルト解除
var map = L.map('map', { zoomControl: false });
map.setView([35.658825, 139.702904], 5);
L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"
}).addTo(map);
//(1)スケールコントロールを最大幅200px、右下、m単位で地図に追加
L.control.scale({ maxWidth: 200, position: 'bottomright', imperial: false }).addTo(map);
//(2)ズームコントロールを左下で地図に追加
L.control.zoom({ position: 'bottomleft' }).addTo(map);
//(3)背景地図の指定
var gsiattr = "<a href='http://portal.cyberjapan.jp/help/termsofuse.html' target='_blank'>地理院タイル</a>";
var gsi = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', { attribution: gsiattr });
var gsipale = L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', { attribution: gsiattr });
var osm = L.tileLayer('http://tile.openstreetmap.jp/{z}/{x}/{y}.png',
{ attribution: "<a href='http://osm.org/copyright' target='_blank'>OpenStreetMap</a> contributors" });
//(3)重畳表示する地図の指定
var gsirelief = L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/relief/{z}/{x}/{y}.png', { opacity: 0.7, maxNativeZoom: 15, attribution: gsiattr });
var gsirehillshademap = L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/hillshademap/{z}/{x}/{y}.png', { opacity: 0.5, maxNativeZoom: 16, attribution: gsiattr });
var gsiseamlessphoto = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg', { attribution: gsiattr });
//(3)背景地図の切替・重畳表示機能
var baseMaps = {
"地理院地図": gsi,
"淡色地図": gsipale,
"オープンストリートマップ": osm,
"航空写真(日本)" : gsiseamlessphoto
};
var overlayMaps = {
"色別標高図": gsirelief,
"陰影起伏図": gsirehillshademap
};
L.control.layers(baseMaps, overlayMaps).addTo(map);
// (3)デフォルトで表示する地図の指定
gsi.addTo(map);
//(4)マーカー全体が入るボックスを作る
var bound = L.latLngBounds(markerList[0].pos, markerList[0].pos);
//(4)マーカーを追加
for (var num in markerList) {
var mk = markerList[num];
var popup = L.popup().setContent(mk.name);
L.marker(mk.pos, { title: mk.name }).bindPopup(popup).addTo(map);
//(4)マーカー全体が入るボックスを広げる
bound.extend(mk.pos);
}
//(4)マーカー全体が入るように地図範囲を設定
map.fitBounds(bound);
}
</script>
</head>
<body onload="init()">
<div id="map" style="width:100%;height:600px"></div>
</body>
</html>①地図に必要な機能
地図に必要な機能として、次のような機能があります。Leafletを使うとこれらの機能を簡単に指定できます。ここではほんの一例をご紹介します。
（例）
・スケールコントロール機能
・拡大・縮小機能
・背景地図の切替・重畳表示機能
・マーカー機能 など
①スケールコントロール機能
スケールコントロール機能とは、地図の右下にある「1:10000」のように記載される縮尺です。次のように、大きさや表示位置を指定できます。
//(1)スケールコントロールを最大幅200px、右下、m単位で地図に追加
L.control.scale({ maxWidth: 200, position: 'bottomright', imperial: false }).addTo(map);②拡大・縮尺機能(ズームコントロール)
地図を拡大したり縮小する機能です。＋ボタンで地図を拡大、－ボタンで縮小します。これがないと困りますよね。
// (2)ズームコントロールのデフォルト解除
var map = L.map('map', { zoomControl: false });
//(2)ズームコントロールを左下で地図に追加
L.control.zoom({ position: 'bottomleft' }).addTo(map);L.control.zoom(XXX).addTo(map);という基本公式で指定します。
配置する場所を'bottomleft'（地図画面の左下）と指定できます。
なお、デフォルトは右下に表示されます。このため、これを書くとズームコントロールが2つ表示されることになるので、冒頭のver mapと地図の描画を宣言する際に、var map = L.map('map', { zoomControl: false }); として、ズームコントロールのデフォルト設定を「解除」しておく必要があります。
③背景地図の切替機能・重畳表示機能
背景地図を切り替えたり、重ね合わせる機能（重畳表示機能）です。
背景地図を使用する際には著作権表記を必ず確認しましょう。
//(3)背景地図の切替・重畳表示機能
var baseMaps = {
"地理院地図": gsi,
"淡色地図": gsipale,
"オープンストリートマップ": osm,
"航空写真(日本)" : gsiseamlessphoto
};
var overlayMaps = {
"色別標高図": gsirelief,
"陰影起伏図": gsirehillshademap
};
L.control.layers(baseMaps, overlayMaps).addTo(map);
gsi.addTo(map);まず、6種類の地図を「ver gsi ="";」のように関数で宣言します。
これらのうち「baseMaps」として4種類の背景地図を、「overlayMaps」として、2種類の重畳表示する地図を関数で宣言し、「L.control.layers(baseMaps, overlayMaps).addTo(map);」とレイヤー追加することで地図に切り替えボタンを追加しています。注意点は、この機能は、地図の右上に背景地図の切替ボタンを追加する機能なので、デフォルトで地図が表示されないことです。初期表示で表示する地図を指定するためには、「gsi.addTo(map);」のように指定する必要があります。これを忘れると真っ白な画面になってしまいますので注意が必要です。
④マーカー機能
最後に、マーカーを表示します。マーカーは「L.marker(XXX).addTo(map);」と指定します。addTo(map)の次に、「.bindPopup(XXX)」や「.openPopup(XXX)」と追加すると、マーカー追加時に文字を表示できます。サンプルコードではjson形式のリストで複数のマーカーを指定しています。jsonは外部ファイルから読み込むこともできるのでとても便利です！
// (4)マーカーリスト
var markerList = [
{ pos: [35.65860384361886, 139.70164418220523], name: "渋谷駅" },
{ pos: [35.67131255658154, 139.70271706581119], name: "原宿駅" },
];次に、マーカー全体を入れる空箱を作って、マーカーを一つずつ読み込みながら箱を広げ、最後に地図に追加します。
//(4)マーカー全体が入るボックスを作る
var bound = L.latLngBounds(markerList[0].pos, markerList[0].pos);
//(4)マーカーを追加
for (var num in markerList) {
var mk = markerList[num];
var popup = L.popup().setContent(mk.name);
L.marker(mk.pos, { title: mk.name }).bindPopup(popup).addTo(map);
//(4)マーカー全体が入るボックスを広げる
bound.extend(mk.pos);
}
//(4)マーカー全体が入るように地図範囲を設定
map.fitBounds(bound);
このようにすると、マーカー全部が地図に表示されます。なお、初期設定で中心地を指定しても、ここで指定した中心地（すべてのマーカーが表示されるように自動的に計算された中心地）が表示されるので注意が必要です。
ここまで作成できましたか？「いいね」ボタンを押してくださいね。
←前の記事を読む
Leafletで地図を作ろう#1
<おことわり>
本記事は2022年9月現在の記事です。ご紹介する内容に変更がある場合があります。サンプルコードを使用する際は皆さまのご判断でご使用願います。当方は一切の保障をいたしませんのでご了承ください。