update

public/src/Tooltip.js

+L.Draw = L.Draw || {};
+/**
+ * @class L.Draw.Tooltip
+ * @aka Tooltip
+ *
+ * The tooltip class — it is used to display the tooltip while drawing
+ * This will be depreciated
+ *
+ * @example
+ *
+ * ```js
+ *    var tooltip = L.Draw.Tooltip();
+ * ```
+ *
+ */
+L.Draw.Tooltip = L.Class.extend({
+
+	// @section Methods for modifying draw state
+
+	// @method initialize(map): void
+	// Tooltip constructor
+	initialize: function (map) {
+		this._map = map;
+		this._popupPane = map._panes.popupPane;
+		this._visible = false;
+
+		this._container = map.options.drawControlTooltips ?
+			L.DomUtil.create('div', 'leaflet-draw-tooltip', this._popupPane) : null;
+		this._singleLineLabel = false;
+
+		this._map.on('mouseout', this._onMouseOut, this);
+	},
+
+	// @method dispose(): void
+	// Remove Tooltip DOM and unbind events
+	dispose: function () {
+		this._map.off('mouseout', this._onMouseOut, this);
+
+		if (this._container) {
+			this._popupPane.removeChild(this._container);
+			this._container = null;
+		}
+	},
+
+	// @method updateContent(labelText): this
+	// Changes the tooltip text to string in function call
+	updateContent: function (labelText) {
+		if (!this._container) {
+			return this;
+		}
+		labelText.subtext = labelText.subtext || '';
+
+		// update the vertical position (only if changed)
+		if (labelText.subtext.length === 0 && !this._singleLineLabel) {
+			L.DomUtil.addClass(this._container, 'leaflet-draw-tooltip-single');
+			this._singleLineLabel = true;
+		}
+		else if (labelText.subtext.length > 0 && this._singleLineLabel) {
+			L.DomUtil.removeClass(this._container, 'leaflet-draw-tooltip-single');
+			this._singleLineLabel = false;
+		}
+
+		this._container.innerHTML =
+			(labelText.subtext.length > 0 ?
+				'<span class="leaflet-draw-tooltip-subtext">' + labelText.subtext + '</span>' + '<br />' : '') +
+			'<span>' + labelText.text + '</span>';
+
+		if (!labelText.text && !labelText.subtext) {
+			this._visible = false;
+			this._container.style.visibility = 'hidden';
+		} else {
+			this._visible = true;
+			this._container.style.visibility = 'inherit';
+		}
+
+		return this;
+	},
+
+	// @method updatePosition(latlng): this
+	// Changes the location of the tooltip
+	updatePosition: function (latlng) {
+		var pos = this._map.latLngToLayerPoint(latlng),
+			tooltipContainer = this._container;
+
+		if (this._container) {
+			if (this._visible) {
+				tooltipContainer.style.visibility = 'inherit';
+			}
+			L.DomUtil.setPosition(tooltipContainer, pos);
+		}
+
+		return this;
+	},
+
+	// @method showAsError(): this
+	// Applies error class to tooltip
+	showAsError: function () {
+		if (this._container) {
+			L.DomUtil.addClass(this._container, 'leaflet-error-draw-tooltip');
+		}
+		return this;
+	},
+
+	// @method removeError(): this
+	// Removes the error class from the tooltip
+	removeError: function () {
+		if (this._container) {
+			L.DomUtil.removeClass(this._container, 'leaflet-error-draw-tooltip');
+		}
+		return this;
+	},
+
+	_onMouseOut: function () {
+		if (this._container) {
+			this._container.style.visibility = 'hidden';
+		}
+	}
+});

public/src/copyright.js

+/*
+ Leaflet.draw {VERSION}, a plugin that adds drawing and editing tools to Leaflet powered maps.
+ (c) 2012-2017, Jacob Toye, Jon West, Smartrak, Leaflet
+
+ https://github.com/Leaflet/Leaflet.draw
+ http://leafletjs.com
+ */

public/src/draw/DrawToolbar.js

+/**
+ * @class L.DrawToolbar
+ * @aka Toolbar
+ */
+L.DrawToolbar = L.Toolbar.extend({
+
+	statics: {
+		TYPE: 'draw'
+	},
+
+	options: {
+		polyline: {},
+		polygon: {},
+		rectangle: {},
+		circle: {},
+		marker: {},
+		circlemarker: {}
+	},
+
+	// @method initialize(): void
+	initialize: function (options) {
+		// Ensure that the options are merged correctly since L.extend is only shallow
+		for (var type in this.options) {
+			if (this.options.hasOwnProperty(type)) {
+				if (options[type]) {
+					options[type] = L.extend({}, this.options[type], options[type]);
+				}
+			}
+		}
+
+		this._toolbarClass = 'leaflet-draw-draw';
+		L.Toolbar.prototype.initialize.call(this, options);
+	},
+
+	// @method getModeHandlers(): object
+	// Get mode handlers information
+	getModeHandlers: function (map) {
+		return [
+			{
+				enabled: this.options.polyline,
+				handler: new L.Draw.Polyline(map, this.options.polyline),
+				title: L.drawLocal.draw.toolbar.buttons.polyline
+			},
+			{
+				enabled: this.options.polygon,
+				handler: new L.Draw.Polygon(map, this.options.polygon),
+				title: L.drawLocal.draw.toolbar.buttons.polygon
+			},
+			{
+				enabled: this.options.rectangle,
+				handler: new L.Draw.Rectangle(map, this.options.rectangle),
+				title: L.drawLocal.draw.toolbar.buttons.rectangle
+			},
+			{
+				enabled: this.options.circle,
+				handler: new L.Draw.Circle(map, this.options.circle),
+				title: L.drawLocal.draw.toolbar.buttons.circle
+			},
+			{
+				enabled: this.options.marker,
+				handler: new L.Draw.Marker(map, this.options.marker),
+				title: L.drawLocal.draw.toolbar.buttons.marker
+			},
+			{
+				enabled: this.options.circlemarker,
+				handler: new L.Draw.CircleMarker(map, this.options.circlemarker),
+				title: L.drawLocal.draw.toolbar.buttons.circlemarker
+			}
+		];
+	},
+
+	// @method getActions(): object
+	// Get action information
+	getActions: function (handler) {
+		return [
+			{
+				enabled: handler.completeShape,
+				title: L.drawLocal.draw.toolbar.finish.title,
+				text: L.drawLocal.draw.toolbar.finish.text,
+				callback: handler.completeShape,
+				context: handler
+			},
+			{
+				enabled: handler.deleteLastVertex,
+				title: L.drawLocal.draw.toolbar.undo.title,
+				text: L.drawLocal.draw.toolbar.undo.text,
+				callback: handler.deleteLastVertex,
+				context: handler
+			},
+			{
+				title: L.drawLocal.draw.toolbar.actions.title,
+				text: L.drawLocal.draw.toolbar.actions.text,
+				callback: this.disable,
+				context: this
+			}
+		];
+	},
+
+	// @method setOptions(): void
+	// Sets the options to the toolbar
+	setOptions: function (options) {
+		L.setOptions(this, options);
+
+		for (var type in this._modes) {
+			if (this._modes.hasOwnProperty(type) && options.hasOwnProperty(type)) {
+				this._modes[type].handler.setOptions(options[type]);
+			}
+		}
+	}
+});

public/src/draw/handler/Draw.Circle.js

+/**
+ * @class L.Draw.Circle
+ * @aka Draw.Circle
+ * @inherits L.Draw.SimpleShape
+ */
+L.Draw.Circle = L.Draw.SimpleShape.extend({
+	statics: {
+		TYPE: 'circle'
+	},
+
+	options: {
+		shapeOptions: {
+			stroke: true,
+			color: '#3388ff',
+			weight: 4,
+			opacity: 0.5,
+			fill: true,
+			fillColor: null, //same as color by default
+			fillOpacity: 0.2,
+			clickable: true
+		},
+		showRadius: true,
+		metric: true, // Whether to use the metric measurement system or imperial
+		feet: true, // When not metric, use feet instead of yards for display
+		nautic: false // When not metric, not feet use nautic mile for display
+	},
+
+	// @method initialize(): void
+	initialize: function (map, options) {
+		// Save the type so super can fire, need to do this as cannot do this.TYPE :(
+		this.type = L.Draw.Circle.TYPE;
+
+		this._initialLabelText = L.drawLocal.draw.handlers.circle.tooltip.start;
+
+		L.Draw.SimpleShape.prototype.initialize.call(this, map, options);
+	},
+
+	_drawShape: function (latlng) {
+		// Calculate the distance based on the version
+		if (L.GeometryUtil.isVersion07x()) {
+			var distance = this._startLatLng.distanceTo(latlng);
+		} else {
+			var distance = this._map.distance(this._startLatLng, latlng);
+		}
+
+		if (!this._shape) {
+			this._shape = new L.Circle(this._startLatLng, distance, this.options.shapeOptions);
+			this._map.addLayer(this._shape);
+		} else {
+			this._shape.setRadius(distance);
+		}
+	},
+
+	_fireCreatedEvent: function () {
+		var circle = new L.Circle(this._startLatLng, this._shape.getRadius(), this.options.shapeOptions);
+		L.Draw.SimpleShape.prototype._fireCreatedEvent.call(this, circle);
+	},
+
+	_onMouseMove: function (e) {
+		var latlng = e.latlng,
+			showRadius = this.options.showRadius,
+			useMetric = this.options.metric,
+			radius;
+
+		this._tooltip.updatePosition(latlng);
+		if (this._isDrawing) {
+			this._drawShape(latlng);
+
+			// Get the new radius (rounded to 1 dp)
+			radius = this._shape.getRadius().toFixed(1);
+
+			var subtext = '';
+			if (showRadius) {
+				subtext = L.drawLocal.draw.handlers.circle.radius + ': ' +
+					L.GeometryUtil.readableDistance(radius, useMetric, this.options.feet, this.options.nautic);
+			}
+			this._tooltip.updateContent({
+				text: this._endLabelText,
+				subtext: subtext
+			});
+		}
+	}
+});

public/src/draw/handler/Draw.CircleMarker.js

+/**
+ * @class L.Draw.CircleMarker
+ * @aka Draw.CircleMarker
+ * @inherits L.Draw.Marker
+ */
+L.Draw.CircleMarker = L.Draw.Marker.extend({
+	statics: {
+		TYPE: 'circlemarker'
+	},
+
+	options: {
+		stroke: true,
+		color: '#3388ff',
+		weight: 4,
+		opacity: 0.5,
+		fill: true,
+		fillColor: null, //same as color by default
+		fillOpacity: 0.2,
+		clickable: true,
+		zIndexOffset: 2000 // This should be > than the highest z-index any markers
+	},
+
+	// @method initialize(): void
+	initialize: function (map, options) {
+		// Save the type so super can fire, need to do this as cannot do this.TYPE :(
+		this.type = L.Draw.CircleMarker.TYPE;
+
+		this._initialLabelText = L.drawLocal.draw.handlers.circlemarker.tooltip.start;
+
+		L.Draw.Feature.prototype.initialize.call(this, map, options);
+	},
+
+
+	_fireCreatedEvent: function () {
+		var circleMarker = new L.CircleMarker(this._marker.getLatLng(), this.options);
+		L.Draw.Feature.prototype._fireCreatedEvent.call(this, circleMarker);
+	},
+
+	_createMarker: function (latlng) {
+		return new L.CircleMarker(latlng, this.options);
+	}
+});

public/src/draw/handler/Draw.Feature.js

+L.Draw = L.Draw || {};
+
+/**
+ * @class L.Draw.Feature
+ * @aka Draw.Feature
+ */
+L.Draw.Feature = L.Handler.extend({
+
+	// @method initialize(): void
+	initialize: function (map, options) {
+		this._map = map;
+		this._container = map._container;
+		this._overlayPane = map._panes.overlayPane;
+		this._popupPane = map._panes.popupPane;
+
+		// Merge default shapeOptions options with custom shapeOptions
+		if (options && options.shapeOptions) {
+			options.shapeOptions = L.Util.extend({}, this.options.shapeOptions, options.shapeOptions);
+		}
+		L.setOptions(this, options);
+
+		var version = L.version.split('.');
+		//If Version is >= 1.2.0
+		if (parseInt(version[0], 10) === 1 && parseInt(version[1], 10) >= 2) {
+			L.Draw.Feature.include(L.Evented.prototype);
+		} else {
+			L.Draw.Feature.include(L.Mixin.Events);
+		}
+	},
+
+	// @method enable(): void
+	// Enables this handler
+	enable: function () {
+		if (this._enabled) {
+			return;
+		}
+
+		L.Handler.prototype.enable.call(this);
+
+		this.fire('enabled', {handler: this.type});
+
+		this._map.fire(L.Draw.Event.DRAWSTART, {layerType: this.type});
+	},
+
+	// @method disable(): void
+	disable: function () {
+		if (!this._enabled) {
+			return;
+		}
+
+		L.Handler.prototype.disable.call(this);
+
+		this._map.fire(L.Draw.Event.DRAWSTOP, {layerType: this.type});
+
+		this.fire('disabled', {handler: this.type});
+	},
+
+	// @method addHooks(): void
+	// Add's event listeners to this handler
+	addHooks: function () {
+		var map = this._map;
+
+		if (map) {
+			L.DomUtil.disableTextSelection();
+
+			map.getContainer().focus();
+
+			this._tooltip = new L.Draw.Tooltip(this._map);
+
+			L.DomEvent.on(this._container, 'keyup', this._cancelDrawing, this);
+		}
+	},
+
+	// @method removeHooks(): void
+	// Removes event listeners from this handler
+	removeHooks: function () {
+		if (this._map) {
+			L.DomUtil.enableTextSelection();
+
+			this._tooltip.dispose();
+			this._tooltip = null;
+
+			L.DomEvent.off(this._container, 'keyup', this._cancelDrawing, this);
+		}
+	},
+
+	// @method setOptions(object): void
+	// Sets new options to this handler
+	setOptions: function (options) {
+		L.setOptions(this, options);
+	},
+
+	_fireCreatedEvent: function (layer) {
+		this._map.fire(L.Draw.Event.CREATED, {layer: layer, layerType: this.type});
+	},
+
+	// Cancel drawing when the escape key is pressed
+	_cancelDrawing: function (e) {
+		if (e.keyCode === 27) {
+			this._map.fire('draw:canceled', {layerType: this.type});
+			this.disable();
+		}
+	}
+});

public/src/draw/handler/Draw.Marker.js

+/**
+ * @class L.Draw.Marker
+ * @aka Draw.Marker
+ * @inherits L.Draw.Feature
+ */
+L.Draw.Marker = L.Draw.Feature.extend({
+	statics: {
+		TYPE: 'marker'
+	},
+
+	options: {
+		icon: new L.Icon.Default(),
+		repeatMode: false,
+		zIndexOffset: 2000 // This should be > than the highest z-index any markers
+	},
+
+	// @method initialize(): void
+	initialize: function (map, options) {
+		// Save the type so super can fire, need to do this as cannot do this.TYPE :(
+		this.type = L.Draw.Marker.TYPE;
+
+		this._initialLabelText = L.drawLocal.draw.handlers.marker.tooltip.start;
+
+		L.Draw.Feature.prototype.initialize.call(this, map, options);
+	},
+
+	// @method addHooks(): void
+	// Add listener hooks to this handler.
+	addHooks: function () {
+		L.Draw.Feature.prototype.addHooks.call(this);
+
+		if (this._map) {
+			this._tooltip.updateContent({text: this._initialLabelText});
+
+			// Same mouseMarker as in Draw.Polyline
+			if (!this._mouseMarker) {
+				this._mouseMarker = L.marker(this._map.getCenter(), {
+					icon: L.divIcon({
+						className: 'leaflet-mouse-marker',
+						iconAnchor: [20, 20],
+						iconSize: [40, 40]
+					}),
+					opacity: 0,
+					zIndexOffset: this.options.zIndexOffset
+				});
+			}
+
+			this._mouseMarker
+				.on('click', this._onClick, this)
+				.addTo(this._map);
+
+			this._map.on('mousemove', this._onMouseMove, this);
+			this._map.on('click', this._onTouch, this);
+		}
+	},
+
+	// @method removeHooks(): void
+	// Remove listener hooks from this handler.
+	removeHooks: function () {
+		L.Draw.Feature.prototype.removeHooks.call(this);
+
+		if (this._map) {
+			this._map
+				.off('click', this._onClick, this)
+				.off('click', this._onTouch, this);
+			if (this._marker) {
+				this._marker.off('click', this._onClick, this);
+				this._map
+					.removeLayer(this._marker);
+				delete this._marker;
+			}
+
+			this._mouseMarker.off('click', this._onClick, this);
+			this._map.removeLayer(this._mouseMarker);
+			delete this._mouseMarker;
+
+			this._map.off('mousemove', this._onMouseMove, this);
+		}
+	},
+
+	_onMouseMove: function (e) {
+		var latlng = e.latlng;
+
+		this._tooltip.updatePosition(latlng);
+		this._mouseMarker.setLatLng(latlng);
+
+		if (!this._marker) {
+			this._marker = this._createMarker(latlng);
+			// Bind to both marker and map to make sure we get the click event.
+			this._marker.on('click', this._onClick, this);
+			this._map
+				.on('click', this._onClick, this)
+				.addLayer(this._marker);
+		}
+		else {
+			latlng = this._mouseMarker.getLatLng();
+			this._marker.setLatLng(latlng);
+		}
+	},
+
+	_createMarker: function (latlng) {
+		return new L.Marker(latlng, {
+			icon: this.options.icon,
+			zIndexOffset: this.options.zIndexOffset
+		});
+	},
+
+	_onClick: function () {
+		this._fireCreatedEvent();
+
+		this.disable();
+		if (this.options.repeatMode) {
+			this.enable();
+		}
+	},
+
+	_onTouch: function (e) {
+		// called on click & tap, only really does any thing on tap
+		this._onMouseMove(e); // creates & places marker
+		this._onClick(); // permanently places marker & ends interaction
+	},
+
+	_fireCreatedEvent: function () {
+		var marker = new L.Marker.Touch(this._marker.getLatLng(), {icon: this.options.icon});
+		L.Draw.Feature.prototype._fireCreatedEvent.call(this, marker);
+	}
+});

public/src/draw/handler/Draw.Polygon.js

+/**
+ * @class L.Draw.Polygon
+ * @aka Draw.Polygon
+ * @inherits L.Draw.Polyline
+ */
+L.Draw.Polygon = L.Draw.Polyline.extend({
+	statics: {
+		TYPE: 'polygon'
+	},
+
+	Poly: L.Polygon,
+
+	options: {
+		showArea: false,
+		showLength: false,
+		shapeOptions: {
+			stroke: true,
+			color: '#3388ff',
+			weight: 4,
+			opacity: 0.5,
+			fill: true,
+			fillColor: null, //same as color by default
+			fillOpacity: 0.2,
+			clickable: true
+		},
+		// Whether to use the metric measurement system (truthy) or not (falsy).
+		// Also defines the units to use for the metric system as an array of
+		// strings (e.g. `['ha', 'm']`).
+		metric: true,
+		feet: true, // When not metric, to use feet instead of yards for display.
+		nautic: false, // When not metric, not feet use nautic mile for display
+		// Defines the precision for each type of unit (e.g. {km: 2, ft: 0}
+		precision: {}
+	},
+
+	// @method initialize(): void
+	initialize: function (map, options) {
+		L.Draw.Polyline.prototype.initialize.call(this, map, options);
+
+		// Save the type so super can fire, need to do this as cannot do this.TYPE :(
+		this.type = L.Draw.Polygon.TYPE;
+	},
+
+	_updateFinishHandler: function () {
+		var markerCount = this._markers.length;
+
+		// The first marker should have a click handler to close the polygon
+		if (markerCount === 1) {
+			this._markers[0].on('click', this._finishShape, this);
+		}
+
+		// Add and update the double click handler
+		if (markerCount > 2) {
+			this._markers[markerCount - 1].on('dblclick', this._finishShape, this);
+			// Only need to remove handler if has been added before
+			if (markerCount > 3) {
+				this._markers[markerCount - 2].off('dblclick', this._finishShape, this);
+			}
+		}
+	},
+
+	_getTooltipText: function () {
+		var text, subtext;
+
+		if (this._markers.length === 0) {
+			text = L.drawLocal.draw.handlers.polygon.tooltip.start;
+		} else if (this._markers.length < 3) {
+			text = L.drawLocal.draw.handlers.polygon.tooltip.cont;
+			subtext = this._getMeasurementString();
+		} else {
+			text = L.drawLocal.draw.handlers.polygon.tooltip.end;
+			subtext = this._getMeasurementString();
+		}
+
+		return {
+			text: text,
+			subtext: subtext
+		};
+	},
+
+	_getMeasurementString: function () {
+		var area = this._area,
+			measurementString = '';
+
+
+		if (!area && !this.options.showLength) {
+			return null;
+		}
+
+		if (this.options.showLength) {
+			measurementString = L.Draw.Polyline.prototype._getMeasurementString.call(this);
+		}
+
+		if (area) {
+			measurementString += '<br>' + L.GeometryUtil.readableArea(area, this.options.metric, this.options.precision);
+		}
+
+		return measurementString;
+	},
+
+	_shapeIsValid: function () {
+		return this._markers.length >= 3;
+	},
+
+	_vertexChanged: function (latlng, added) {
+		var latLngs;
+
+		// Check to see if we should show the area
+		if (!this.options.allowIntersection && this.options.showArea) {
+			latLngs = this._poly.getLatLngs();
+
+			this._area = L.GeometryUtil.geodesicArea(latLngs);
+		}
+
+		L.Draw.Polyline.prototype._vertexChanged.call(this, latlng, added);
+	},
+
+	_cleanUpShape: function () {
+		var markerCount = this._markers.length;
+
+		if (markerCount > 0) {
+			this._markers[0].off('click', this._finishShape, this);
+
+			if (markerCount > 2) {
+				this._markers[markerCount - 1].off('dblclick', this._finishShape, this);
+			}
+		}
+	}
+});