Leaflet

オープンソースのJavaScriptライブラリ
モバイルフレンドリーなインタラクティブマップ用

← チュートリアル

オーバーレイ

Leaflet APIには3種類のオーバーレイがあります。

このチュートリアルでは、これらのオーバーレイの使い方を学びます。

ImageOverlay

L.ImageOverlayは、マップの特定の範囲に単一の画像を読み込んで表示するために使用されます。

画像オーバーレイL.ImageOverlayを追加するには、これを使用します。

var imageOverlay = L.imageOverlay(imageUrl, latLngBounds, options);

マップの作成

まず、Leafletマップを作成し、通常どおり背景L.TileLayerを追加します。

var map = L.map('map').setView([37.8, -96], 4);

var osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
	maxZoom: 19,
	attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);

複数のオプションを持つ画像オーバーレイを作成してみましょう。

var imageUrl = 'https://maps.lib.utexas.edu/maps/historical/newark_nj_1922.jpg';
var errorOverlayUrl = 'https://cdn-icons-png.flaticon.com/512/110/110686.png';
var altText = 'Image of Newark, N.J. in 1922. Source: The University of Texas at Austin, UT Libraries Map Collection.';
var latLngBounds = L.latLngBounds([[40.799311, -74.118464], [40.68202047785919, -74.33]]);

var imageOverlay = L.imageOverlay(imageUrl, latLngBounds, {
	opacity: 0.8,
	errorOverlayUrl: errorOverlayUrl,
	alt: altText,
	interactive: true
}).addTo(map);

ImageOverlayによって覆われている領域を確認したい場合は、同じL.LatLngBoundsを持つL.Rectangleをマップに追加できます。

L.rectangle(latLngBounds).addTo(map);
map.fitBounds(latLngBounds);

L.ImageOverlayの他のオプションについては、ドキュメントを参照してください。

この例をスタンドアロンでご覧ください。

VideoOverlay

ウェブページを作成する際にビデオを使用するのは、<video> HTML要素が利用可能になるまでは難しい作業でした。

現在では、次のHTMLコードを使用できます。

<video width="500" controls>
	<source src="https://www.mapbox.com/bites/00188/patricia_nasa.webm" type="video/webm">
	<source src="https://www.mapbox.com/bites/00188/patricia_nasa.mp4" type="video/mp4">
</video>

このビデオを表示するには

このようにしてウェブページにビデオを表示できる場合、Leafletはマップ内にビデオを表示できます。ビデオはマップに合うように準備されていることが重要です。ビデオは「北を上」にした向きになっており、その比率はマップに合う必要があります。そうでない場合、場違いに見えます。

マップの作成

まず、Leafletマップを作成し、通常どおり背景L.TileLayerを追加します。

var map = L.map('map').setView([37.8, -96], 4);

var osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
	maxZoom: 19,
	attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);

ビデオオーバーレイの追加

ビデオオーバーレイの追加は、画像オーバーレイの追加と非常に似ています。

ビデオオーバーレイの場合は、単に

var videoUrls = [
	'https://www.mapbox.com/bites/00188/patricia_nasa.webm',
	'https://www.mapbox.com/bites/00188/patricia_nasa.mp4'
];
var errorOverlayUrl = 'https://cdn-icons-png.flaticon.com/512/110/110686.png';
var latLngBounds = L.latLngBounds([[32, -130], [13, -100]]);

var videoOverlay = L.videoOverlay(videoUrls, latLngBounds, {
	opacity: 0.8,
	errorOverlayUrl: errorOverlayUrl,
	interactive: true,
	autoplay: true,
	muted: true,
	playsInline: true
}).addTo(map);

そして、このようにして、マップにビデオが表示されます。

この例をスタンドアロンでご覧ください。

L.videoOverlayの他のオプションについては、ドキュメントを参照してください。

ビデオオーバーレイは他のLeafletレイヤーと同様に動作します。追加したり削除したり、レイヤーコントロールを使用してユーザーに複数のビデオから選択させたりできます。

ビデオを少し制御する

APIドキュメントを読むと、L.VideoOverlayクラスにはplay()メソッドまたはpause()メソッドがないことに気付くでしょう。

そのため、ビデオオーバーレイのgetElement()メソッドが役立ちます。これはオーバーレイのHTMLVideoElement（HTMLMediaElementを継承）を返し、これにはplay()やpause()などのメソッドがあります。

videoOverlay.getElement().pause();

これにより、カスタムインターフェースを構築できます。たとえば、読み込み後にこのビデオオーバーレイを再生/一時停止するためのL.Controlの小さなサブクラスを構築できます。

videoOverlay.on('load', function () {
	var MyPauseControl = L.Control.extend({
		onAdd: function() {
			var button = L.DomUtil.create('button');
			button.title = 'Pause';
			button.innerHTML = '<span aria-hidden="true">⏸</span>';
			L.DomEvent.on(button, 'click', function () {
				videoOverlay.getElement().pause();
			});
			return button;
		}
	});
	var MyPlayControl = L.Control.extend({
		onAdd: function() {
			var button = L.DomUtil.create('button');
			button.title = 'Play';
			button.innerHTML = '<span aria-hidden="true">▶️</span>';
			L.DomEvent.on(button, 'click', function () {
				videoOverlay.getElement().play();
			});
			return button;
		}
	});

	var pauseControl = (new MyPauseControl()).addTo(map);
	var playControl = (new MyPlayControl()).addTo(map);
});
この例をスタンドアロンでご覧ください。

SVGOverlay

L.SVGOverlayは、マップの特定の範囲にSVGファイルを読み込み、表示し、DOMアクセスを提供するために使用されます。

SVGオーバーレイL.SVGOverlayを追加するには、これを使用します。

var svgOverlay = L.svgOverlay(SVGElement, svgElementBounds, options);

これは、SVG要素とそれが結び付けられている地理的な範囲が与えられた画像オーバーレイオブジェクトをインスタンス化します。適切にズームインおよびズームアウトするには、SVG要素にviewBox属性が必要です。

SVG要素の作成

SVG要素を作成しましょう。

var svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svgElement.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
svgElement.setAttribute('viewBox', '0 0 200 200');
svgElement.innerHTML = '<rect width="200" height="200"/><rect x="75" y="23" width="50" height="50" style="fill:red"/><rect x="75" y="123" width="50" height="50" style="fill:#0013ff"/>';

または、HTMLコードでSVG要素を作成することもできます。

<svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><rect width="200" height="200"/><rect x="75" y="23" width="50" height="50" style="fill:red"/><rect x="75" y="123" width="50" height="50" style="fill:#0013ff"/></svg>

そして、querySelectorを使用してこのSVG要素を選択します。

var svgElement = document.querySelector('#svg');

SVGオーバーレイの追加

ImageOverlayやVideoOverlayと同様に、必要なオプションを使用してSVGOverlayを作成します。

var latLngBounds = L.latLngBounds([[32, -130], [13, -100]]);
map.fitBounds(latLngBounds);

var svgOverlay = L.svgOverlay(svgElement, latLngBounds, {
	opacity: 0.7,
	interactive: true
}).addTo(map);

SVGOverlayには独自のオプションはありませんが、ImageOverlay、インタラクティブレイヤー、レイヤーからさまざまなオプションを継承します。詳細については、L.SVGOverlayのドキュメントを確認してください。

この例をスタンドアロンでご覧ください。