leaflet-draw-toolbar
Version:
Leaflet.toolbar for Leaflet.draw.
77 lines (71 loc) • 3.18 kB
HTML
<!--
This example demonstrates the interoperability of Leaflet.draw with
leaflet-draw-toolbar by including toolbars from both libraries on the same
page. The drawing toolbar is from Leaflet.draw, while the editing toolbar
is from Leaflet.toolbar / leaflet-draw-toolbar.
-->
<html>
<head>
<link rel="stylesheet" type="text/css" href="../node_modules/leaflet/dist/leaflet.css" />
<link rel="stylesheet" type="text/css" href="../node_modules/leaflet-draw/dist/leaflet.draw.css" />
<link rel="stylesheet" type="text/css" href="../node_modules/leaflet-toolbar/dist/leaflet.toolbar.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css"/>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"/>
<link rel="stylesheet" href="../dist/leaflet.draw-toolbar.css"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="../node_modules/leaflet/dist/leaflet-src.js"></script>
<script src="../node_modules/leaflet-toolbar/dist/leaflet.toolbar-src.js"></script>
<script src="../node_modules/leaflet-draw/dist/leaflet.draw-src.js"></script>
<script src="../dist/leaflet.draw-toolbar.js"></script>
<script src="ColorPicker.js"></script>
<style>
html, body, #map { margin: 0; height: 100%; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<style>
.leaflet-toolbar-icon .fa { color: #000; }
.leaflet-color-swatch { background-color: #fff; }
</style>
<script>
var map = L.map('map').setView([41.7896,-87.5996], 15),
drawnItems = new L.FeatureGroup().addTo(map),
editActions = [
L.Toolbar2.EditAction.Popup.Edit,
L.Toolbar2.EditAction.Popup.Delete,
L.Toolbar2.Action.extendOptions({
toolbarIcon: {
className: 'leaflet-color-picker',
html: '<span class="fa fa-eyedropper"></span>'
},
subToolbar: new L.Toolbar2({ actions: [
L.ColorPicker.extendOptions({ color: '#db1d0f' }),
L.ColorPicker.extendOptions({ color: '#025100' }),
L.ColorPicker.extendOptions({ color: '#ffff00' }),
L.ColorPicker.extendOptions({ color: '#0000ff' })
]})
})
];
L.tileLayer("http://tile.stamen.com/terrain/{z}/{x}/{y}.jpg", {
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>.'
}).addTo(map);
new L.Control.Draw({
position: 'topleft',
}).addTo(map);
map.on('draw:created', function(evt) {
var type = evt.layerType,
layer = evt.layer;
drawnItems.addLayer(layer);
layer.on('click', function(event) {
new L.Toolbar2.EditToolbar.Popup(event.latlng, {
actions: editActions
}).addTo(map, layer);
});
});
</script>
</body>
</html>