Leafletにユーザーコントロールを追加

作者:

ユーザーコントロール：ourCustomControl を作成してmapに登録。
ちなみにユーザーコントロールのクリックイベントが発生するとMAPにもイベントが伝搬してしまうので、
クリックイベントではe.stopPropagation();を読んでMAPにイベントだ伝搬することを停止。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var ourCustomControl = L.Control.extend({
    options: {
        position: 'topleft'
        //control position - allowed: 'topleft', 'topright', 'bottomleft', 'bottomright'
    },
    onAdd: function (map) {
        var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-custom');
        container.style.backgroundColor = 'white';
        container.style.width = '30px';
        container.style.height = '30px';
        container.onclick = function(e){
            e.stopPropagation();
            console.log('buttonClicked');
            //drawControl.options.draw = true;
            new L.Draw.Marker(map, drawControl.options.marker).enable();
        }
        return container;
    },
});
 
map.addControl(new ourCustomControl());

参考Creating custom control button in leaflet