汎用的な地図表示（Leaflet）

全国ロケ地ガイド
Leafletの使い方
汎用的な地図表示（Leaflet）

プログラムの概要とデモ

　今までのサンプルプログラムを組み合わせた、Leafletを使った汎用的な地図表示プログラムです。地図の移動・拡大縮小や地図切替や十字カーソルの表示やURL欄への表示などの機能が、すべて組み込まれていますので、この地図をベースに地図アプリを作成することができます。

デモを実行
HTMLソースを表示
leaflet_opacityプラグイン（自作プラグインのzipファイル）
leaflet_urlプラグイン（自作プラグインのzipファイル）

ソースの説明

HTMLの<head>タグのソース

　leaflet_opacityプラグインとleaflet_urlプラグインを利用していますので、HTMLの<head>タグに、LeafletのJavaScriptのソースファイルとCSSファイルを参照するための指定を行う必要があります。プラグインは、上記リンクからダウンロードできます。プラグインは、Leafletを拡張していますので、必ず、Leafletの後に指定する必要があります。

<link rel="stylesheet" href="js/leaflet.css" />
<link rel="stylesheet" href="js/leaflet_opacity.css" />
<link rel="stylesheet" href="js/leaflet_url.css" />
<script src="js/leaflet.js"></script>
<script src="js/leaflet_opacity.js"></script>
<script src="js/leaflet_url.js"></script>

HTMLの<body>タグのソース

　Leafletを利用する場合、HTMLの<body>タグには、地図を表示するためのdivタグを作成するだけです。 divタグには、idを設定し、このidをleafletに渡します。

<div id="map_container"></div>

全画面表示する場合のCSSのソース

　divタグに、widthやheightスタイルを使ってサイズ指定をすれば、その範囲内に地図が表示されます。地図を全画面に表示したい場合は、下記の様にスタイルを設定します。

#map_container {
	position: absolute;
	top:0; left:0; right:0; bottom:0;
}

JavaScriptのソース

　地図を表示するためには、HTML読込後に下記のソースを実行する必要があります。私は、<body>タグのonloadイベントに登録した関数で実行しています。
　最初に、LeafletのMapクラスで地図を作成し、TileLayerクラスで、表示する地図を指定します。 setViewメソッドでは、地図の中心位置の緯度経度とズームレベルを指定します。
　サンプルプログラムでは、地理院地図で日本全体を表示するように設定しています。

var baseMap = [ // ベースマップの定義
	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>", minZoom: 2, maxZoom: 18}),
	L.tileLayer("https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png",{
		attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html'"
		+ " target='_blank'>地理院淡色地図</a>", minZoom: 2, maxZoom: 18}),
	L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",{
		attribution: "<a href='https://www.openstreetmap.org/copyright'"
		+ " target='_blank'>OpenStreetMap</a>", minZoom: 2, maxZoom: 19}),
	L.tileLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}",{
		attribution: "<a href='http://www.esrij.com/'"
		+ " target='_blank'>EsriWorldTopoMap</a>", minZoom: 2, maxZoom: 19})
];

var overMap = [ // オーバーレイマップの定義
	L.tileLayer("https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg",{
		attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html'"
		+ " target='_blank'>地理院最新写真</a>", minZoom: 2, maxZoom: 18}),
	L.tileLayer("https://cyberjapandata.gsi.go.jp/xyz/gazo1/{z}/{x}/{y}.jpg",{
		attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html'"
		+ " target='_blank'>1970年代写真</a>", minZoom: 10, maxZoom: 17}),
	L.tileLayer("https://cyberjapandata.gsi.go.jp/xyz/ort_old10/{z}/{x}/{y}.png",{
		attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html'"
		+ " target='_blank'>1960年代写真</a>", minZoom: 2, maxZoom: 17}),
	L.tileLayer("https://cyberjapandata.gsi.go.jp/xyz/relief/{z}/{x}/{y}.png",{
		attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html'"
		+ " target='_blank'>色別標高図</a>", minZoom: 5, maxZoom: 16, opacity: 0.2}),
	L.tileLayer("https://cyberjapandata.gsi.go.jp/xyz/hillshademap/{z}/{x}/{y}.png",{
		attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html'"
		+ " target='_blank'>陰影起伏図</a>", minZoom: 5, maxZoom: 16, opacity: 0.2})
];

var baseCtl = { // ベースマップ切替ボタンの定義
	"地理院標準地図":	baseMap[0],
	"地理院淡色地図":	baseMap[1],
	"OpenStreetMap":	baseMap[2],
	"EsriWorldTopoMap":	baseMap[3]
};

var overCtl = { // オーバーレイマップ切替ボタンの定義
	"地理院最新写真":	overMap[0],
	"1970年頃写真":		overMap[1],
	"1960年頃写真":		overMap[2],
	"色別標高図":		overMap[3],
	"陰影起伏図":		overMap[4]
};

function init() {
	let map = L.map('map_container', { zoomControl: false });
	map.setView([37,136.5], 6); // 日本を表示
	baseMap[0].addTo(map);

	L.control.scale({imperial:false, position:'bottomright'}).addTo(map); // 目盛表示
	L.control.zoom({position:'bottomright'}).addTo(map); // ズーム制御
	L.control.opacityLayers(baseCtl, overCtl, {collapsed:true}).addTo(map); // 透過付マップ切替

	let cross = L.divIcon({ // CSSを使ったDivIconを作成
		className: 'cross',
		bgPos: [18, 18]
	});
	let crossMark = L.marker(map.getCenter(), { // マーカとして登録
		icon: cross, zIndexOffset: 100, interactive: false
	}).addTo(map);
	map.on('move', function() { // mousemoveイベントでマーカを移動
		crossMark.setLatLng(map.getCenter());
	});

	let url = L.urlHandler(map); // リンク書換機能の追加
	if (typeof url._zoom != 'undefined') { // 位置情報付URL
		map.setView([url._lat, url._lng], url._zoom);
	}
}