22 - カスタムコントロールの作成

学習内容: L.Controlを拡張して独自のUIコントロールを作成します。

ポイント:

重要: コントロール内の操作が地図に影響しないよう、disableClickPropagation() と disableScrollPropagation() を使用してください。

// カスタムコントロールを定義
const MyControl = L.Control.extend({
    options: {
        position: 'topright'
    },

    onAdd: function(map) {
        // コンテナDOM要素を作成
        const container = L.DomUtil.create('div', 'my-control');

        // クリックイベントの伝播を停止
        L.DomEvent.disableClickPropagation(container);

        // ボタンを追加
        const button = L.DomUtil.create('button', '', container);
        button.innerHTML = 'Click me';

        L.DomEvent.on(button, 'click', function() {
            alert('Button clicked!');
        });

        return container;
    },

    onRemove: function(map) {
        // クリーンアップ処理
    }
});

// コントロールを追加
new MyControl().addTo(map);