Tarumi Blog2

以下のコードを呼び出し

[code]
new L.Draw.Marker(map, drawControl.options.marker).enable();
[/code]

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

[code]
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());
[/code]

参考Creating custom control button in leaflet

LeafLet DrawはLeaflet上でFeatureを登録編集するプラグイン

GITHUBのURL
[code]
https://github.com/Leaflet/Leaflet.draw
[/code]

基本的な使い方
githubよりSRC以下をダウンロードしてリンク
[code]
<script src="../lib/leafret.draw/src/Leaflet.draw.js"></script>
<script src="../lib/leafret.draw/src/Leaflet.Draw.Event.js"></script>

<script src="../lib/leafret.draw/src/Toolbar.js"></script>
<script src="../lib/leafret.draw/src/Tooltip.js"></script>

<script src="../lib/leafret.draw/src/ext/GeometryUtil.js"></script>
<script src="../lib/leafret.draw/src/ext/LatLngUtil.js"></script>
<script src="../lib/leafret.draw/src/ext/LineUtil.Intersect.js"></script>
<script src="../lib/leafret.draw/src/ext/Polygon.Intersect.js"></script>
<script src="../lib/leafret.draw/src/ext/Polyline.Intersect.js"></script>
<script src="../lib/leafret.draw/src/ext/TouchEvents.js"></script>
<script src="../lib/leafret.draw/src/draw/DrawToolbar.js"></script>
<script src="../lib/leafret.draw/src/draw/handler/Draw.Feature.js"></script>
<script src="../lib/leafret.draw/src/draw/handler/Draw.SimpleShape.js"></script>
<script src="../lib/leafret.draw/src/draw/handler/Draw.Polyline.js"></script>
<script src="../lib/leafret.draw/src/draw/handler/Draw.Marker.js"></script>
<script src="../lib/leafret.draw/src/draw/handler/Draw.Circle.js"></script>
<script src="../lib/leafret.draw/src/draw/handler/Draw.CircleMarker.js"></script>
<script src="../lib/leafret.draw/src/draw/handler/Draw.Polygon.js"></script>
<script src="../lib/leafret.draw/src/draw/handler/Draw.Rectangle.js"></script>
<script src="../lib/leafret.draw/src/edit/EditToolbar.js"></script>
<script src="../lib/leafret.draw/src/edit/handler/EditToolbar.Edit.js"></script>
<script src="../lib/leafret.draw/src/edit/handler/EditToolbar.Delete.js"></script>
<script src="../lib/leafret.draw/src/Control.Draw.js"></script>
<script src="../lib/leafret.draw/src/edit/handler/Edit.Poly.js"></script>
<script src="../lib/leafret.draw/src/edit/handler/Edit.SimpleShape.js"></script>
<script src="../lib/leafret.draw/src/edit/handler/Edit.Rectangle.js"></script>
<script src="../lib/leafret.draw/src/edit/handler/Edit.Marker.js"></script>
<script src="../lib/leafret.draw/src/edit/handler/Edit.CircleMarker.js"></script>
<script src="../lib/leafret.draw/src/edit/handler/Edit.Circle.js"></script>

<link rel="stylesheet" href="../lib/leafret.draw/src/leaflet.draw.css"/>

[/code]

以下のコードでツールバーが表示され、編集等が可能となる
[code]
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);

var drawControl = new L.Control.Draw({
edit: {
featureGroup: drawnItems
}
});
map.addControl(drawControl);

map.on(L.Draw.Event.CREATED, function (event) {
var layer = event.layer;
drawnItems.addLayer(layer);
});
[/code]

登録用ツールバーを消去
[code]
var drawControl = new L.Control.Draw({
draw : false,
edit: {
featureGroup: drawnItems
},
});
[/code]

編集削除ツールバーも消去
[code]
var drawControl = new L.Control.Draw({
draw : false,
edit: {
featureGroup: drawnItems,
edit: false,
remove: false
},
});
[/code]

消去を再表示はできない？

一旦、コントロールそのものを削除して再登録だな。

削除のコード
[code]
map.removeControl(drawControl);
[/code]