leaflet-editable
Version:
Make geometries editable in Leaflet
149 lines (133 loc) • 4.7 kB
HTML
<html>
<head>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width,height=device-height, user-scalable=no" />
<title>Leaflet.Editable demo</title>
<link rel="stylesheet" href="https://npmcdn.com/leaflet@1.2.0/dist/leaflet.css" />
<script src="https://npmcdn.com/leaflet@1.2.0/dist/leaflet.js"></script>
<script src="https://npmcdn.com/leaflet.path.drag/src/Path.Drag.js"></script>
<script src="../src/Leaflet.Editable.js"></script>
<style type='text/css'>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; right: 0; left: 0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script type="text/javascript">
var startPoint = [43.1249, 1.254];
var map = L.map('map', {editable: true}).setView(startPoint, 16),
tilelayer = L.tileLayer('http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {maxZoom: 20, attribution: 'Data \u00a9 <a href="http://www.openstreetmap.org/copyright"> OpenStreetMap Contributors </a> Tiles \u00a9 HOT'}).addTo(map);
L.NewPolygonControl = L.Control.extend({
options: {
position: 'topleft'
},
onAdd: function (map) {
var container = L.DomUtil.create('div', 'leaflet-control leaflet-bar'),
link = L.DomUtil.create('a', '', container);
link.href = '#';
link.title = 'Create a new polygon';
link.innerHTML = '▱';
L.DomEvent.on(link, 'click', L.DomEvent.stop)
.on(link, 'click', function () {
map.editTools.startPolygon();
});
container.style.display = 'block';
map.editTools.on('editable:enabled', function (e) {
container.style.display = 'none';
});
map.editTools.on('editable:disable', function (e) {
container.style.display = 'block';
});
return container;
}
});
L.AddPolygonShapeControl = L.Control.extend({
options: {
position: 'topleft'
},
onAdd: function (map) {
var container = L.DomUtil.create('div', 'leaflet-control leaflet-bar'),
link = L.DomUtil.create('a', '', container);
link.href = '#';
link.title = 'Create a new polygon';
link.innerHTML = '▱▱';
L.DomEvent.on(link, 'click', L.DomEvent.stop)
.on(link, 'click', function () {
if (!map.editTools.currentPolygon) return;
map.editTools.currentPolygon.editor.newShape();
});
container.style.display = 'none';
map.editTools.on('editable:enabled', function (e) {
container.style.display = 'block';
});
map.editTools.on('editable:disable', function (e) {
container.style.display = 'none';
});
return container;
}
});
map.addControl(new L.NewPolygonControl());
map.addControl(new L.AddPolygonShapeControl());
map.on('layeradd', function (e) {
if (e.layer instanceof L.Polygon) e.layer.on('dblclick', L.DomEvent.stop).on('dblclick', e.layer.toggleEdit);
});
map.on('layerremove', function (e) {
if (e.layer instanceof L.Polygon) e.layer.off('dblclick', L.DomEvent.stop).off('dblclick', e.layer.toggleEdit);
});
map.editTools.on('editable:enable', function (e) {
if (this.currentPolygon) this.currentPolygon.disableEdit();
this.currentPolygon = e.layer;
this.fire('editable:enabled');
});
map.editTools.on('editable:disable', function (e) {
delete this.currentPolygon;
})
var multi = L.polygon([
[
[
[43.1239, 1.244],
[43.123, 1.253],
[43.1252, 1.255],
[43.1250, 1.251],
[43.1239, 1.244]
],
[
[43.124, 1.246],
[43.1236, 1.248],
[43.12475, 1.250]
],
[
[43.124, 1.251],
[43.1236, 1.253],
[43.12475, 1.254]
],
],
[
[
[43.1269, 1.246],
[43.126, 1.252],
[43.1282, 1.255],
[43.1280, 1.245],
]
]
]).addTo(map);
multi.enableEdit();
var poly = L.polygon([
[
[43.1239, 1.259],
[43.123, 1.263],
[43.1252, 1.265],
[43.1250, 1.261]
],
[
[43.124, 1.263],
[43.1236, 1.261],
[43.12475, 1.262]
]
]).addTo(map);
poly.enableEdit();
</script>
</body>
</html>