leaflet-draw-toolbar
Version:
Leaflet.toolbar for Leaflet.draw.
47 lines (41 loc) • 2.02 kB
HTML
<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="../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>
<style>
html, body, #map { margin: 0; height: 100%; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map').setView([41.7896,-87.5996], 15),
drawnItems = new L.FeatureGroup().addTo(map);
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.Toolbar2.DrawToolbar({
position: 'topleft'
}).addTo(map);
new L.Toolbar2.EditToolbar.Control({
position: 'topleft'
}).addTo(map, drawnItems);
map.on('draw:created', function(evt) {
var type = evt.layerType,
layer = evt.layer;
drawnItems.addLayer(layer);
});
</script>
</body>
</html>