← チュートリアル

このチュートリアルでは、Leafletのクラス継承の理論を読んでいることを前提としています。

Leafletでは、「レイヤー」はマップと一緒に移動するものです。これとは対照的に、「コントロール」はマップコンテナに対して静的な位置にあるHTML要素であり、「ハンドラー」はマップの動作を変更する目に見えないコードの一部です。

ハンドラー

マップハンドラーはLeaflet 1.0の新機能であり、ブラウザからのDOMイベント（click、dblclick、mousewheelなど）を処理してマップの状態を変更する機能があります。

ハンドラーは比較的シンプルです。 addHooks()メソッド（ハンドラーがマップで有効になったときに実行されます）と、removeHooks()メソッド（ハンドラーが無効になったときに実行されます）が必要です。ハンドラーのスケルトンは次のとおりです。

L.CustomHandler = L.Handler.extend({
	addHooks: function() {
		L.DomEvent.on(document, 'eventname', this._doSomething, this);
	},

	removeHooks: function() {
		L.DomEvent.off(document, 'eventname', this._doSomething, this);
	},

	_doSomething: function(event) { … }
});

deviceorientationイベントを通して、モバイルデバイスが傾いたときにマップをパンするためのシンプルなハンドラーで説明できます。

L.TiltHandler = L.Handler.extend({
	addHooks: function() {
		L.DomEvent.on(window, 'deviceorientation', this._tilt, this);
	},

	removeHooks: function() {
		L.DomEvent.off(window, 'deviceorientation', this._tilt, this);
	},

	_tilt: function(ev) {
		// Treat Gamma angle as horizontal pan (1 degree = 1 pixel) and Beta angle as vertical pan
		this._map.panBy( L.point( ev.gamma, ev.beta ) );
	}
});

ハンドラーはmap.addHandler('tilt', L.TiltHandler)を使用してマップにアタッチできます。これにより、L.TiltHandlerのインスタンスがmap.tiltとして保存されます。ただし、addInitHook構文を使用してすべてのマップにハンドラーをアタッチする方が一般的です。

L.Map.addInitHook('addHandler', 'tilt', L.TiltHandler);

これで、map.tilt.enable()を実行することでハンドラーを有効にでき、map.tilt.disable()で無効にできます。

さらに、マップにハンドラーと同じ名前のプロパティがあり、そのオプションがtrueの場合、そのハンドラーはデフォルトで有効になります。そのため、このハンドラーはデフォルトで有効になります。

var map = L.map('mapDiv', { tilt: true });

この例を見るには、deviceorientationイベントをサポートするモバイルブラウザが必要です。それでも、このイベントは特に不安定で仕様が不明確なので、注意してください。

イベントの種類によっては、マップハンドラーはdocument、window、またはアタッチされているL.Mapのコンテナにイベントリスナーをアタッチできます。

コントロール

コントロールは既に知っているはずです。左上のズームコントロール、左下のスケール、右上のレイヤースイッチャーなどです。L.Controlの中心は、マップコンテナ内の静的な位置にあるHTML要素です。

コントロールを作成するには、L.Controlから継承し、onAdd()とonRemove()を実装します。これらのメソッドはL.Layerの対応物と同様の方法で動作します（コントロールがマップに追加または削除されるたびに実行されます）。ただし、onAdd()はコントロールを表すHTMLElementのインスタンスを返す必要があります。要素のマップへの追加と削除は自動的に行われます。

カスタムコントロールの最も簡単な例は、画像だけのウォーターマークです。

L.Control.Watermark = L.Control.extend({
	onAdd: function(map) {
		var img = L.DomUtil.create('img');

		img.src = '../../docs/images/logo.png';
		img.style.width = '200px';

		return img;
	},

	onRemove: function(map) {
		// Nothing to do here
	}
});

L.control.watermark = function(opts) {
	return new L.Control.Watermark(opts);
}

L.control.watermark({ position: 'bottomleft' }).addTo(map);

カスタムコントロールにクリック可能なボタンなどのインタラクティブな要素がある場合は、onAdd()内でL.DomEvent.on()を使用し、onRemove()内でL.DomEvent.off()を使用することを忘れないでください。

カスタムコントロールが複数のHTML要素で構成されている場合（2つのボタンを持つL.Control.Zoomなど）、要素全体の階層を作成し、最上位のコンテナを返す必要があります。

プラグインの公開

ここまで理解していれば、Leafletプラグインを作成する準備ができました！ただし、命名とプラグインの公開に関するヒントとベストプラクティスが含まれているPLUGIN-GUIDE.mdファイルを読むことを確認してください。