Leaflet · jacobtoye · Oct 6, 2014 · Sep 10, 2014 · Sep 11, 2014 · Sep 16, 2014
diff --git a/build/deps.js b/build/deps.js
@@ -22,6 +22,7 @@ var deps = {
 
 	EditHandlers: {
 		src: [
+			'edit/handler/Edit.Marker.js',
 			'edit/handler/Edit.Poly.js',
 			'edit/handler/Edit.SimpleShape.js',
 			'edit/handler/Edit.Rectangle.js',

diff --git a/dist/leaflet.draw-src.js b/dist/leaflet.draw-src.js
@@ -782,6 +782,12 @@ L.Draw.SimpleShape = L.Draw.Feature.extend({
 		this._isDrawing = false;
 	},
 
+	_getTooltipText: function () {
+		return {
+			text: this._endLabelText
+		};
+	},
+
 	_onMouseDown: function (e) {
 		this._isDrawing = true;
 		this._startLatLng = e.latlng;
@@ -796,7 +802,7 @@ L.Draw.SimpleShape = L.Draw.Feature.extend({
 
 		this._tooltip.updatePosition(latlng);
 		if (this._isDrawing) {
-			this._tooltip.updateContent({ text: this._endLabelText });
+			this._tooltip.updateContent(this._getTooltipText());
 			this._drawShape(latlng);
 		}
 	},
@@ -828,7 +834,8 @@ L.Draw.Rectangle = L.Draw.SimpleShape.extend({
 			fillColor: null, //same as color by default
 			fillOpacity: 0.2,
 			clickable: true
-		}
+		},
+		metric: true // Whether to use the metric meaurement system or imperial
 	},
 
 	initialize: function (map, options) {
@@ -852,6 +859,23 @@ L.Draw.Rectangle = L.Draw.SimpleShape.extend({
 	_fireCreatedEvent: function () {
 		var rectangle = new L.Rectangle(this._shape.getBounds(), this.options.shapeOptions);
 		L.Draw.SimpleShape.prototype._fireCreatedEvent.call(this, rectangle);
+	},
+
+	_getTooltipText: function () {
+		var tooltipText = L.Draw.SimpleShape.prototype._getTooltipText.call(this),
+			shape = this._shape,
+			latLngs, area, subtext;
+
+		if (shape) {
+			latLngs = this._shape.getLatLngs();
+			area = L.GeometryUtil.geodesicArea(latLngs);
+			subtext = L.GeometryUtil.readableArea(area, this.options.metric);
+		}
+
+		return {
+			text: tooltipText.text,
+			subtext: subtext
+		};
 	}
 });
 
@@ -1673,7 +1697,7 @@ L.GeometryUtil = L.extend(L.GeometryUtil || {}, {
 				areaStr = area.toFixed(2) + ' m&sup2;';
 			}
 		} else {
-			area *= 0.836127; // Square yards in 1 meter
+			area /= 0.836127; // Square yards in 1 meter
 
 			if (area >= 3097600) { //3097600 square yards in 1 square mile
 				areaStr = (area / 3097600).toFixed(2) + ' mi&sup2;';

diff --git a/dist/leaflet.draw.js b/dist/leaflet.draw.js
diff --git a/examples/full.html b/examples/full.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Leaflet.draw vector editing handlers</title>
+
+	<script src="libs/leaflet-src.js"></script>
+	<link rel="stylesheet" href="libs/leaflet.css" />
+
+	<script src="../src/Leaflet.draw.js"></script>
+	<link rel="stylesheet" href="../dist/leaflet.draw.css" />
+
+	<script src="../src/Toolbar.js"></script>
+	<script src="../src/Tooltip.js"></script>
+
+	<script src="../src/ext/GeometryUtil.js"></script>
+	<script src="../src/ext/LatLngUtil.js"></script>
+	<script src="../src/ext/LineUtil.Intersect.js"></script>
+	<script src="../src/ext/Polygon.Intersect.js"></script>
+	<script src="../src/ext/Polyline.Intersect.js"></script>
+
+
+	<script src="../src/draw/DrawToolbar.js"></script>
+	<script src="../src/draw/handler/Draw.Feature.js"></script>
+	<script src="../src/draw/handler/Draw.SimpleShape.js"></script>
+	<script src="../src/draw/handler/Draw.Polyline.js"></script>
+	<script src="../src/draw/handler/Draw.Circle.js"></script>
+	<script src="../src/draw/handler/Draw.Marker.js"></script>
+	<script src="../src/draw/handler/Draw.Polygon.js"></script>
+	<script src="../src/draw/handler/Draw.Rectangle.js"></script>
+
+
+	<script src="../src/edit/EditToolbar.js"></script>
+	<script src="../src/edit/handler/EditToolbar.Edit.js"></script>
+	<script src="../src/edit/handler/EditToolbar.Delete.js"></script>
+
+	<script src="../src/Control.Draw.js"></script>
+
+	<script src="../src/edit/handler/Edit.Poly.js"></script>
+	<script src="../src/edit/handler/Edit.SimpleShape.js"></script>
+	<script src="../src/edit/handler/Edit.Circle.js"></script>
+	<script src="../src/edit/handler/Edit.Rectangle.js"></script>
+	<script src="../src/edit/handler/Edit.Marker.js"></script>
+</head>
+<body>
+	<div id="map" style="width: 800px; height: 600px; border: 1px solid #ccc"></div>
+
+	<script>
+		var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+			osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+			osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
+			map = new L.Map('map', {layers: [osm], center: new L.LatLng(51.505, -0.04), zoom: 13}),
+			drawnItems = L.featureGroup().addTo(map);
+
+		map.addControl(new L.Control.Draw({
+			edit: { featureGroup: drawnItems }
+		}));
+
+		map.on('draw:created', function(event) {
+			var layer = event.layer;
+
+			drawnItems.addLayer(layer);
+		});
+
+	</script>
+</body>
+</html>
diff --git a/spec/suites/EditSpec.js b/spec/suites/EditSpec.js
@@ -0,0 +1,71 @@
+describe("L.Edit", function () {
+	var map;
+
+	beforeEach(function () {
+		map = new L.Map(document.createElement('div')).setView([0, 0], 15);
+	});
+
+	describe("L.Edit.Marker", function () {
+		var marker;
+
+		beforeEach(function () {
+			marker = new L.Marker(new L.LatLng(1, 2)).addTo(map);
+			marker.editing.enable();
+		});
+
+		it("Is activated correctly when editing.enable() is called.", function () {});
+	});
+
+	describe("L.Edit.Circle", function () {
+		var circle;
+
+		beforeEach(function () {
+			circle = new L.Circle(new L.LatLng(1, 2), 5).addTo(map);
+			circle.editing.enable();
+		});
+
+		it("Is activated correctly when editing.enable() is called.", function () {});
+
+		it("Moves the circle to the correct latlng", function () {
+			var newLatLng = new L.LatLng(3, 5);
+
+			circle.editing._move(newLatLng);
+			expect(circle.getLatLng()).to.eql(newLatLng);
+		});
+	});
+
+	describe("L.Edit.Poly", function () {
+		var edit,
+			drawnItems,
+			poly;
+
+		beforeEach(function () {
+			drawnItems = new L.FeatureGroup().addTo(map);
+			edit = new L.EditToolbar.Edit(map, {
+				featureGroup: drawnItems,
+				selectedPathOptions: L.EditToolbar.prototype.options.edit.selectedPathOptions
+			});
+			poly = new L.Polyline(L.latLng(41, -87), L.latLng(42, -88));
+		});
+
+		it("Should change the style of the polyline during editing mode.", function () {
+			var originalOptions = L.extend({}, poly.options);
+
+			drawnItems.addLayer(poly);
+			edit.enable();
+
+			expect(poly.editing.enabled()).to.equal(true);
+			expect(poly.options).not.to.eql(originalOptions);
+		});
+
+		it("Should revert to original styles when editing is toggled.", function () {
+			var originalOptions = L.extend({maintainColor: false }, poly.options);
+
+			drawnItems.addLayer(poly);
+			edit.enable();
+			edit.disable();
+
+			expect(poly.options).to.eql(originalOptions);
+		});
+	});
+});
diff --git a/src/edit/handler/Edit.Marker.js b/src/edit/handler/Edit.Marker.js
@@ -0,0 +1,75 @@
+L.Edit = L.Edit || {};
+
+L.Edit.Marker = L.Handler.extend({
+	initialize: function (marker, options) {
+		this._marker = marker;
+		L.setOptions(this, options);
+	},
+
+	addHooks: function () {
+		var marker = this._marker;
+
+		marker.dragging.enable();
+		marker.on('dragend', this._onDragEnd, marker);
+		this._toggleMarkerHighlight();
+	},
+
+	removeHooks: function () {
+		var marker = this._marker;
+
+		marker.dragging.disable();
+		marker.off('dragend', this._onDragEnd, marker);
+		this._toggleMarkerHighlight();
+	},
+
+	_onDragEnd: function (e) {
+		var layer = e.target;
+		layer.edited = true;
+	},
+
+	_toggleMarkerHighlight: function () {
+
+		// Don't do anything if this layer is a marker but doesn't have an icon. Markers
+		// should usually have icons. If using Leaflet.draw with Leafler.markercluster there
+		// is a chance that a marker doesn't.
+		if (!this._icon) {
+			return;
+		}
+
+		// This is quite naughty, but I don't see another way of doing it. (short of setting a new icon)
+		var icon = this._icon;
+
+		icon.style.display = 'none';
+
+		if (L.DomUtil.hasClass(icon, 'leaflet-edit-marker-selected')) {
+			L.DomUtil.removeClass(icon, 'leaflet-edit-marker-selected');
+			// Offset as the border will make the icon move.
+			this._offsetMarker(icon, -4);
+
+		} else {
+			L.DomUtil.addClass(icon, 'leaflet-edit-marker-selected');
+			// Offset as the border will make the icon move.
+			this._offsetMarker(icon, 4);
+		}
+
+		icon.style.display = '';
+	},
+
+	_offsetMarker: function (icon, offset) {
+		var iconMarginTop = parseInt(icon.style.marginTop, 10) - offset,
+			iconMarginLeft = parseInt(icon.style.marginLeft, 10) - offset;
+
+		icon.style.marginTop = iconMarginTop + 'px';
+		icon.style.marginLeft = iconMarginLeft + 'px';
+	}
+});
+
+L.Marker.addInitHook(function () {
+	if (L.Edit.Marker) {
+		this.editing = new L.Edit.Marker(this);
+
+		if (this.options.editable) {
+			this.editing.enable();
+		}
+	}
+});
diff --git a/src/edit/handler/Edit.Poly.js b/src/edit/handler/Edit.Poly.js
@@ -18,6 +18,14 @@ L.Edit.Poly = L.Handler.extend({
 	},
 
 	addHooks: function () {
+		var poly = this._poly;
+
+		if (!(poly instanceof L.Polygon)) {
+			poly.options.editing.fill = false;
+		}
+
+		poly.setStyle(poly.options.editing);
+
 		if (this._poly._map) {
 			if (!this._markerGroup) {
 				this._initMarkers();
@@ -27,8 +35,12 @@ L.Edit.Poly = L.Handler.extend({
 	},
 
 	removeHooks: function () {
-		if (this._poly._map) {
-			this._poly._map.removeLayer(this._markerGroup);
+		var poly = this._poly;
+
+		poly.setStyle(poly.options.original);
+
+		if (poly._map) {
+			poly._map.removeLayer(this._markerGroup);
 			delete this._markerGroup;
 			delete this._markers;
 		}

diff --git a/src/edit/handler/Edit.SimpleShape.js b/src/edit/handler/Edit.SimpleShape.js
@@ -18,8 +18,12 @@ L.Edit.SimpleShape = L.Handler.extend({
 	},
 
 	addHooks: function () {
-		if (this._shape._map) {
-			this._map = this._shape._map;
+		var shape = this._shape;
+
+		shape.setStyle(shape.options.editing);
+
+		if (shape._map) {
+			this._map = shape._map;
 
 			if (!this._markerGroup) {
 				this._initMarkers();
@@ -29,7 +33,11 @@ L.Edit.SimpleShape = L.Handler.extend({
 	},
 
 	removeHooks: function () {
-		if (this._shape._map) {
+		var shape = this._shape;
+
+		shape.setStyle(shape.options.original);
+
+		if (shape._map) {
 			this._unbindMarker(this._moveMarker);
 
 			for (var i = 0, l = this._resizeMarkers.length; i < l; i++) {