You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
4774 lines
122 KiB
4774 lines
122 KiB
/* |
|
Leaflet.draw 1.0.4, 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 |
|
*/ |
|
(function (window, document, undefined) {/** |
|
* Leaflet.draw assumes that you have already included the Leaflet library. |
|
*/ |
|
L.drawVersion = "1.0.4"; |
|
/** |
|
* @class L.Draw |
|
* @aka Draw |
|
* |
|
* |
|
* To add the draw toolbar set the option drawControl: true in the map options. |
|
* |
|
* @example |
|
* ```js |
|
* var map = L.map('map', {drawControl: true}).setView([51.505, -0.09], 13); |
|
* |
|
* L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { |
|
* attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' |
|
* }).addTo(map); |
|
* ``` |
|
* |
|
* ### Adding the edit toolbar |
|
* To use the edit toolbar you must initialise the Leaflet.draw control and manually add it to the map. |
|
* |
|
* ```js |
|
* var map = L.map('map').setView([51.505, -0.09], 13); |
|
* |
|
* L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { |
|
* attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' |
|
* }).addTo(map); |
|
* |
|
* // FeatureGroup is to store editable layers |
|
* var drawnItems = new L.FeatureGroup(); |
|
* map.addLayer(drawnItems); |
|
* |
|
* var drawControl = new L.Control.Draw({ |
|
* edit: { |
|
* featureGroup: drawnItems |
|
* } |
|
* }); |
|
* map.addControl(drawControl); |
|
* ``` |
|
* |
|
* The key here is the featureGroup option. This tells the plugin which FeatureGroup contains the layers that |
|
* should be editable. The featureGroup can contain 0 or more features with geometry types Point, LineString, and Polygon. |
|
* Leaflet.draw does not work with multigeometry features such as MultiPoint, MultiLineString, MultiPolygon, |
|
* or GeometryCollection. If you need to add multigeometry features to the draw plugin, convert them to a |
|
* FeatureCollection of non-multigeometries (Points, LineStrings, or Polygons). |
|
*/ |
|
L.Draw = {}; |
|
|
|
/** |
|
* @class L.drawLocal |
|
* @aka L.drawLocal |
|
* |
|
* The core toolbar class of the API — it is used to create the toolbar ui |
|
* |
|
* @example |
|
* ```js |
|
* var modifiedDraw = L.drawLocal.extend({ |
|
* draw: { |
|
* toolbar: { |
|
* buttons: { |
|
* polygon: 'Draw an awesome polygon' |
|
* } |
|
* } |
|
* } |
|
* }); |
|
* ``` |
|
* |
|
* The default state for the control is the draw toolbar just below the zoom control. |
|
* This will allow map users to draw vectors and markers. |
|
* **Please note the edit toolbar is not enabled by default.** |
|
*/ |
|
L.drawLocal = { |
|
// format: { |
|
// numeric: { |
|
// delimiters: { |
|
// thousands: ',', |
|
// decimal: '.' |
|
// } |
|
// } |
|
// }, |
|
draw: { |
|
toolbar: { |
|
// #TODO: this should be reorganized where actions are nested in actions |
|
// ex: actions.undo or actions.cancel |
|
actions: { |
|
title: 'Cancel drawing', |
|
text: 'Cancel' |
|
}, |
|
finish: { |
|
title: 'Finish drawing', |
|
text: 'Finish' |
|
}, |
|
undo: { |
|
title: 'Delete last point drawn', |
|
text: 'Delete last point' |
|
}, |
|
buttons: { |
|
polyline: 'Draw a polyline', |
|
polygon: 'Draw a polygon', |
|
rectangle: 'Draw a rectangle', |
|
circle: 'Draw a circle', |
|
marker: 'Draw a marker', |
|
circlemarker: 'Draw a circlemarker' |
|
} |
|
}, |
|
handlers: { |
|
circle: { |
|
tooltip: { |
|
start: 'Click and drag to draw circle.' |
|
}, |
|
radius: 'Radius' |
|
}, |
|
circlemarker: { |
|
tooltip: { |
|
start: 'Click map to place circle marker.' |
|
} |
|
}, |
|
marker: { |
|
tooltip: { |
|
start: 'Click map to place marker.' |
|
} |
|
}, |
|
polygon: { |
|
tooltip: { |
|
start: 'Click to start drawing shape.', |
|
cont: 'Click to continue drawing shape.', |
|
end: 'Click first point to close this shape.' |
|
} |
|
}, |
|
polyline: { |
|
error: '<strong>Error:</strong> shape edges cannot cross!', |
|
tooltip: { |
|
start: 'Click to start drawing line.', |
|
cont: 'Click to continue drawing line.', |
|
end: 'Click last point to finish line.' |
|
} |
|
}, |
|
rectangle: { |
|
tooltip: { |
|
start: 'Click and drag to draw rectangle.' |
|
} |
|
}, |
|
simpleshape: { |
|
tooltip: { |
|
end: 'Release mouse to finish drawing.' |
|
} |
|
} |
|
} |
|
}, |
|
edit: { |
|
toolbar: { |
|
actions: { |
|
save: { |
|
title: 'Save changes', |
|
text: 'Save' |
|
}, |
|
cancel: { |
|
title: 'Cancel editing, discards all changes', |
|
text: 'Cancel' |
|
}, |
|
clearAll: { |
|
title: 'Clear all layers', |
|
text: 'Clear All' |
|
} |
|
}, |
|
buttons: { |
|
edit: 'Edit layers', |
|
editDisabled: 'No layers to edit', |
|
remove: 'Delete layers', |
|
removeDisabled: 'No layers to delete' |
|
} |
|
}, |
|
handlers: { |
|
edit: { |
|
tooltip: { |
|
text: 'Drag handles or markers to edit features.', |
|
subtext: 'Click cancel to undo changes.' |
|
} |
|
}, |
|
remove: { |
|
tooltip: { |
|
text: 'Click on a feature to remove.' |
|
} |
|
} |
|
} |
|
} |
|
}; |
|
|
|
|
|
|
|
/** |
|
* ### Events |
|
* Once you have successfully added the Leaflet.draw plugin to your map you will want to respond to the different |
|
* actions users can initiate. The following events will be triggered on the map: |
|
* |
|
* @class L.Draw.Event |
|
* @aka Draw.Event |
|
* |
|
* Use `L.Draw.Event.EVENTNAME` constants to ensure events are correct. |
|
* |
|
* @example |
|
* ```js |
|
* map.on(L.Draw.Event.CREATED; function (e) { |
|
* var type = e.layerType, |
|
* layer = e.layer; |
|
* |
|
* if (type === 'marker') { |
|
* // Do marker specific actions |
|
* } |
|
* |
|
* // Do whatever else you need to. (save to db; add to map etc) |
|
* map.addLayer(layer); |
|
*}); |
|
* ``` |
|
*/ |
|
L.Draw.Event = {}; |
|
/** |
|
* @event draw:created: PolyLine; Polygon; Rectangle; Circle; Marker | String |
|
* |
|
* Layer that was just created. |
|
* The type of layer this is. One of: `polyline`; `polygon`; `rectangle`; `circle`; `marker` |
|
* Triggered when a new vector or marker has been created. |
|
* |
|
*/ |
|
L.Draw.Event.CREATED = 'draw:created'; |
|
|
|
/** |
|
* @event draw:edited: LayerGroup |
|
* |
|
* List of all layers just edited on the map. |
|
* |
|
* |
|
* Triggered when layers in the FeatureGroup; initialised with the plugin; have been edited and saved. |
|
* |
|
* @example |
|
* ```js |
|
* map.on('draw:edited', function (e) { |
|
* var layers = e.layers; |
|
* layers.eachLayer(function (layer) { |
|
* //do whatever you want; most likely save back to db |
|
* }); |
|
* }); |
|
* ``` |
|
*/ |
|
L.Draw.Event.EDITED = 'draw:edited'; |
|
|
|
/** |
|
* @event draw:deleted: LayerGroup |
|
* |
|
* List of all layers just removed from the map. |
|
* |
|
* Triggered when layers have been removed (and saved) from the FeatureGroup. |
|
*/ |
|
L.Draw.Event.DELETED = 'draw:deleted'; |
|
|
|
/** |
|
* @event draw:drawstart: String |
|
* |
|
* The type of layer this is. One of:`polyline`; `polygon`; `rectangle`; `circle`; `marker` |
|
* |
|
* Triggered when the user has chosen to draw a particular vector or marker. |
|
*/ |
|
L.Draw.Event.DRAWSTART = 'draw:drawstart'; |
|
|
|
/** |
|
* @event draw:drawstop: String |
|
* |
|
* The type of layer this is. One of: `polyline`; `polygon`; `rectangle`; `circle`; `marker` |
|
* |
|
* Triggered when the user has finished a particular vector or marker. |
|
*/ |
|
|
|
L.Draw.Event.DRAWSTOP = 'draw:drawstop'; |
|
|
|
/** |
|
* @event draw:drawvertex: LayerGroup |
|
* |
|
* List of all layers just being added from the map. |
|
* |
|
* Triggered when a vertex is created on a polyline or polygon. |
|
*/ |
|
L.Draw.Event.DRAWVERTEX = 'draw:drawvertex'; |
|
|
|
/** |
|
* @event draw:editstart: String |
|
* |
|
* The type of edit this is. One of: `edit` |
|
* |
|
* Triggered when the user starts edit mode by clicking the edit tool button. |
|
*/ |
|
|
|
L.Draw.Event.EDITSTART = 'draw:editstart'; |
|
|
|
/** |
|
* @event draw:editmove: ILayer |
|
* |
|
* Layer that was just moved. |
|
* |
|
* Triggered as the user moves a rectangle; circle or marker. |
|
*/ |
|
L.Draw.Event.EDITMOVE = 'draw:editmove'; |
|
|
|
/** |
|
* @event draw:editresize: ILayer |
|
* |
|
* Layer that was just moved. |
|
* |
|
* Triggered as the user resizes a rectangle or circle. |
|
*/ |
|
L.Draw.Event.EDITRESIZE = 'draw:editresize'; |
|
|
|
/** |
|
* @event draw:editvertex: LayerGroup |
|
* |
|
* List of all layers just being edited from the map. |
|
* |
|
* Triggered when a vertex is edited on a polyline or polygon. |
|
*/ |
|
L.Draw.Event.EDITVERTEX = 'draw:editvertex'; |
|
|
|
/** |
|
* @event draw:editstop: String |
|
* |
|
* The type of edit this is. One of: `edit` |
|
* |
|
* Triggered when the user has finshed editing (edit mode) and saves edits. |
|
*/ |
|
L.Draw.Event.EDITSTOP = 'draw:editstop'; |
|
|
|
/** |
|
* @event draw:deletestart: String |
|
* |
|
* The type of edit this is. One of: `remove` |
|
* |
|
* Triggered when the user starts remove mode by clicking the remove tool button. |
|
*/ |
|
L.Draw.Event.DELETESTART = 'draw:deletestart'; |
|
|
|
/** |
|
* @event draw:deletestop: String |
|
* |
|
* The type of edit this is. One of: `remove` |
|
* |
|
* Triggered when the user has finished removing shapes (remove mode) and saves. |
|
*/ |
|
L.Draw.Event.DELETESTOP = 'draw:deletestop'; |
|
|
|
/** |
|
* @event draw:toolbaropened: String |
|
* |
|
* Triggered when a toolbar is opened. |
|
*/ |
|
L.Draw.Event.TOOLBAROPENED = 'draw:toolbaropened'; |
|
|
|
/** |
|
* @event draw:toolbarclosed: String |
|
* |
|
* Triggered when a toolbar is closed. |
|
*/ |
|
L.Draw.Event.TOOLBARCLOSED = 'draw:toolbarclosed'; |
|
|
|
/** |
|
* @event draw:markercontext: String |
|
* |
|
* Triggered when a marker is right clicked. |
|
*/ |
|
L.Draw.Event.MARKERCONTEXT = 'draw:markercontext'; |
|
|
|
|
|
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(); |
|
} |
|
} |
|
}); |
|
|
|
|
|
|
|
/** |
|
* @class L.Draw.Polyline |
|
* @aka Draw.Polyline |
|
* @inherits L.Draw.Feature |
|
*/ |
|
L.Draw.Polyline = L.Draw.Feature.extend({ |
|
statics: { |
|
TYPE: 'polyline' |
|
}, |
|
|
|
Poly: L.Polyline, |
|
|
|
options: { |
|
allowIntersection: true, |
|
repeatMode: false, |
|
drawError: { |
|
color: '#b00b00', |
|
timeout: 2500 |
|
}, |
|
icon: new L.DivIcon({ |
|
iconSize: new L.Point(8, 8), |
|
className: 'leaflet-div-icon leaflet-editing-icon' |
|
}), |
|
touchIcon: new L.DivIcon({ |
|
iconSize: new L.Point(20, 20), |
|
className: 'leaflet-div-icon leaflet-editing-icon leaflet-touch-icon' |
|
}), |
|
guidelineDistance: 20, |
|
maxGuideLineLength: 4000, |
|
shapeOptions: { |
|
stroke: true, |
|
color: '#3388ff', |
|
weight: 4, |
|
opacity: 0.5, |
|
fill: false, |
|
clickable: true |
|
}, |
|
metric: true, // Whether to use the metric measurement system or imperial |
|
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 |
|
showLength: true, // Whether to display distance in the tooltip |
|
zIndexOffset: 2000, // This should be > than the highest z-index any map layers |
|
factor: 1, // To change distance calculation |
|
maxPoints: 0 // Once this number of points are placed, finish shape |
|
}, |
|
|
|
// @method initialize(): void |
|
initialize: function (map, options) { |
|
// if touch, switch to touch icon |
|
if (L.Browser.touch) { |
|
this.options.icon = this.options.touchIcon; |
|
} |
|
|
|
// Need to set this here to ensure the correct message is used. |
|
this.options.drawError.message = L.drawLocal.draw.handlers.polyline.error; |
|
|
|
// Merge default drawError options with custom options |
|
if (options && options.drawError) { |
|
options.drawError = L.Util.extend({}, this.options.drawError, options.drawError); |
|
} |
|
|
|
// Save the type so super can fire, need to do this as cannot do this.TYPE :( |
|
this.type = L.Draw.Polyline.TYPE; |
|
|
|
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._markers = []; |
|
|
|
this._markerGroup = new L.LayerGroup(); |
|
this._map.addLayer(this._markerGroup); |
|
|
|
this._poly = new L.Polyline([], this.options.shapeOptions); |
|
|
|
this._tooltip.updateContent(this._getTooltipText()); |
|
|
|
// Make a transparent marker that will used to catch click events. These click |
|
// events will create the vertices. We need to do this so we can ensure that |
|
// we can create vertices over other map layers (markers, vector layers). We |
|
// also do not want to trigger any click handlers of objects we are clicking on |
|
// while drawing. |
|
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('mouseout', this._onMouseOut, this) |
|
.on('mousemove', this._onMouseMove, this) // Necessary to prevent 0.8 stutter |
|
.on('mousedown', this._onMouseDown, this) |
|
.on('mouseup', this._onMouseUp, this) // Necessary for 0.8 compatibility |
|
.addTo(this._map); |
|
|
|
this._map |
|
.on('mouseup', this._onMouseUp, this) // Necessary for 0.7 compatibility |
|
.on('mousemove', this._onMouseMove, this) |
|
.on('zoomlevelschange', this._onZoomEnd, this) |
|
.on('touchstart', this._onTouch, this) |
|
.on('zoomend', this._onZoomEnd, this); |
|
|
|
} |
|
}, |
|
|
|
// @method removeHooks(): void |
|
// Remove listener hooks from this handler. |
|
removeHooks: function () { |
|
L.Draw.Feature.prototype.removeHooks.call(this); |
|
|
|
this._clearHideErrorTimeout(); |
|
|
|
this._cleanUpShape(); |
|
|
|
// remove markers from map |
|
this._map.removeLayer(this._markerGroup); |
|
delete this._markerGroup; |
|
delete this._markers; |
|
|
|
this._map.removeLayer(this._poly); |
|
delete this._poly; |
|
|
|
this._mouseMarker |
|
.off('mousedown', this._onMouseDown, this) |
|
.off('mouseout', this._onMouseOut, this) |
|
.off('mouseup', this._onMouseUp, this) |
|
.off('mousemove', this._onMouseMove, this); |
|
this._map.removeLayer(this._mouseMarker); |
|
delete this._mouseMarker; |
|
|
|
// clean up DOM |
|
this._clearGuides(); |
|
|
|
this._map |
|
.off('mouseup', this._onMouseUp, this) |
|
.off('mousemove', this._onMouseMove, this) |
|
.off('zoomlevelschange', this._onZoomEnd, this) |
|
.off('zoomend', this._onZoomEnd, this) |
|
.off('touchstart', this._onTouch, this) |
|
.off('click', this._onTouch, this); |
|
}, |
|
|
|
// @method deleteLastVertex(): void |
|
// Remove the last vertex from the polyline, removes polyline from map if only one point exists. |
|
deleteLastVertex: function () { |
|
if (this._markers.length <= 1) { |
|
return; |
|
} |
|
|
|
var lastMarker = this._markers.pop(), |
|
poly = this._poly, |
|
// Replaces .spliceLatLngs() |
|
latlngs = poly.getLatLngs(), |
|
latlng = latlngs.splice(-1, 1)[0]; |
|
this._poly.setLatLngs(latlngs); |
|
|
|
this._markerGroup.removeLayer(lastMarker); |
|
|
|
if (poly.getLatLngs().length < 2) { |
|
this._map.removeLayer(poly); |
|
} |
|
|
|
this._vertexChanged(latlng, false); |
|
}, |
|
|
|
// @method addVertex(): void |
|
// Add a vertex to the end of the polyline |
|
addVertex: function (latlng) { |
|
var markersLength = this._markers.length; |
|
// markersLength must be greater than or equal to 2 before intersections can occur |
|
if (markersLength >= 2 && !this.options.allowIntersection && this._poly.newLatLngIntersects(latlng)) { |
|
this._showErrorTooltip(); |
|
return; |
|
} |
|
else if (this._errorShown) { |
|
this._hideErrorTooltip(); |
|
} |
|
|
|
this._markers.push(this._createMarker(latlng)); |
|
|
|
this._poly.addLatLng(latlng); |
|
|
|
if (this._poly.getLatLngs().length === 2) { |
|
this._map.addLayer(this._poly); |
|
} |
|
|
|
this._vertexChanged(latlng, true); |
|
}, |
|
|
|
// @method completeShape(): void |
|
// Closes the polyline between the first and last points |
|
completeShape: function () { |
|
if (this._markers.length <= 1 || !this._shapeIsValid()) { |
|
return; |
|
} |
|
|
|
this._fireCreatedEvent(); |
|
this.disable(); |
|
|
|
if (this.options.repeatMode) { |
|
this.enable(); |
|
} |
|
}, |
|
|
|
_finishShape: function () { |
|
var latlngs = this._poly._defaultShape ? this._poly._defaultShape() : this._poly.getLatLngs(); |
|
var intersects = this._poly.newLatLngIntersects(latlngs[latlngs.length - 1]); |
|
|
|
if ((!this.options.allowIntersection && intersects) || !this._shapeIsValid()) { |
|
this._showErrorTooltip(); |
|
return; |
|
} |
|
|
|
this._fireCreatedEvent(); |
|
this.disable(); |
|
if (this.options.repeatMode) { |
|
this.enable(); |
|
} |
|
}, |
|
|
|
// Called to verify the shape is valid when the user tries to finish it |
|
// Return false if the shape is not valid |
|
_shapeIsValid: function () { |
|
return true; |
|
}, |
|
|
|
_onZoomEnd: function () { |
|
if (this._markers !== null) { |
|
this._updateGuide(); |
|
} |
|
}, |
|
|
|
_onMouseMove: function (e) { |
|
var newPos = this._map.mouseEventToLayerPoint(e.originalEvent); |
|
var latlng = this._map.layerPointToLatLng(newPos); |
|
|
|
// Save latlng |
|
// should this be moved to _updateGuide() ? |
|
this._currentLatLng = latlng; |
|
|
|
this._updateTooltip(latlng); |
|
|
|
// Update the guide line |
|
this._updateGuide(newPos); |
|
|
|
// Update the mouse marker position |
|
this._mouseMarker.setLatLng(latlng); |
|
|
|
L.DomEvent.preventDefault(e.originalEvent); |
|
}, |
|
|
|
_vertexChanged: function (latlng, added) { |
|
this._map.fire(L.Draw.Event.DRAWVERTEX, {layers: this._markerGroup}); |
|
this._updateFinishHandler(); |
|
|
|
this._updateRunningMeasure(latlng, added); |
|
|
|
this._clearGuides(); |
|
|
|
this._updateTooltip(); |
|
}, |
|
|
|
_onMouseDown: function (e) { |
|
if (!this._clickHandled && !this._touchHandled && !this._disableMarkers) { |
|
this._onMouseMove(e); |
|
this._clickHandled = true; |
|
this._disableNewMarkers(); |
|
var originalEvent = e.originalEvent; |
|
var clientX = originalEvent.clientX; |
|
var clientY = originalEvent.clientY; |
|
this._startPoint.call(this, clientX, clientY); |
|
} |
|
}, |
|
|
|
_startPoint: function (clientX, clientY) { |
|
this._mouseDownOrigin = L.point(clientX, clientY); |
|
}, |
|
|
|
_onMouseUp: function (e) { |
|
var originalEvent = e.originalEvent; |
|
var clientX = originalEvent.clientX; |
|
var clientY = originalEvent.clientY; |
|
this._endPoint.call(this, clientX, clientY, e); |
|
this._clickHandled = null; |
|
}, |
|
|
|
_endPoint: function (clientX, clientY, e) { |
|
if (this._mouseDownOrigin) { |
|
var dragCheckDistance = L.point(clientX, clientY) |
|
.distanceTo(this._mouseDownOrigin); |
|
var lastPtDistance = this._calculateFinishDistance(e.latlng); |
|
if (this.options.maxPoints > 1 && this.options.maxPoints == this._markers.length + 1) { |
|
this.addVertex(e.latlng); |
|
this._finishShape(); |
|
} else if (lastPtDistance < 10 && L.Browser.touch) { |
|
this._finishShape(); |
|
} else if (Math.abs(dragCheckDistance) < 9 * (window.devicePixelRatio || 1)) { |
|
this.addVertex(e.latlng); |
|
} |
|
this._enableNewMarkers(); // after a short pause, enable new markers |
|
} |
|
this._mouseDownOrigin = null; |
|
}, |
|
|
|
// ontouch prevented by clickHandled flag because some browsers fire both click/touch events, |
|
// causing unwanted behavior |
|
_onTouch: function (e) { |
|
var originalEvent = e.originalEvent; |
|
var clientX; |
|
var clientY; |
|
if (originalEvent.touches && originalEvent.touches[0] && !this._clickHandled && !this._touchHandled && !this._disableMarkers) { |
|
clientX = originalEvent.touches[0].clientX; |
|
clientY = originalEvent.touches[0].clientY; |
|
this._disableNewMarkers(); |
|
this._touchHandled = true; |
|
this._startPoint.call(this, clientX, clientY); |
|
this._endPoint.call(this, clientX, clientY, e); |
|
this._touchHandled = null; |
|
} |
|
this._clickHandled = null; |
|
}, |
|
|
|
_onMouseOut: function () { |
|
if (this._tooltip) { |
|
this._tooltip._onMouseOut.call(this._tooltip); |
|
} |
|
}, |
|
|
|
// calculate if we are currently within close enough distance |
|
// of the closing point (first point for shapes, last point for lines) |
|
// this is semi-ugly code but the only reliable way i found to get the job done |
|
// note: calculating point.distanceTo between mouseDownOrigin and last marker did NOT work |
|
_calculateFinishDistance: function (potentialLatLng) { |
|
var lastPtDistance; |
|
if (this._markers.length > 0) { |
|
var finishMarker; |
|
if (this.type === L.Draw.Polyline.TYPE) { |
|
finishMarker = this._markers[this._markers.length - 1]; |
|
} else if (this.type === L.Draw.Polygon.TYPE) { |
|
finishMarker = this._markers[0]; |
|
} else { |
|
return Infinity; |
|
} |
|
var lastMarkerPoint = this._map.latLngToContainerPoint(finishMarker.getLatLng()), |
|
potentialMarker = new L.Marker(potentialLatLng, { |
|
icon: this.options.icon, |
|
zIndexOffset: this.options.zIndexOffset * 2 |
|
}); |
|
var potentialMarkerPint = this._map.latLngToContainerPoint(potentialMarker.getLatLng()); |
|
lastPtDistance = lastMarkerPoint.distanceTo(potentialMarkerPint); |
|
} else { |
|
lastPtDistance = Infinity; |
|
} |
|
return lastPtDistance; |
|
}, |
|
|
|
_updateFinishHandler: function () { |
|
var markerCount = this._markers.length; |
|
// The last marker should have a click handler to close the polyline |
|
if (markerCount > 1) { |
|
this._markers[markerCount - 1].on('click', this._finishShape, this); |
|
} |
|
|
|
// Remove the old marker click handler (as only the last point should close the polyline) |
|
if (markerCount > 2) { |
|
this._markers[markerCount - 2].off('click', this._finishShape, this); |
|
} |
|
}, |
|
|
|
_createMarker: function (latlng) { |
|
var marker = new L.Marker(latlng, { |
|
icon: this.options.icon, |
|
zIndexOffset: this.options.zIndexOffset * 2 |
|
}); |
|
|
|
this._markerGroup.addLayer(marker); |
|
|
|
return marker; |
|
}, |
|
|
|
_updateGuide: function (newPos) { |
|
var markerCount = this._markers ? this._markers.length : 0; |
|
|
|
if (markerCount > 0) { |
|
newPos = newPos || this._map.latLngToLayerPoint(this._currentLatLng); |
|
|
|
// draw the guide line |
|
this._clearGuides(); |
|
this._drawGuide( |
|
this._map.latLngToLayerPoint(this._markers[markerCount - 1].getLatLng()), |
|
newPos |
|
); |
|
} |
|
}, |
|
|
|
_updateTooltip: function (latLng) { |
|
var text = this._getTooltipText(); |
|
|
|
if (latLng) { |
|
this._tooltip.updatePosition(latLng); |
|
} |
|
|
|
if (!this._errorShown) { |
|
this._tooltip.updateContent(text); |
|
} |
|
}, |
|
|
|
_drawGuide: function (pointA, pointB) { |
|
var length = Math.floor(Math.sqrt(Math.pow((pointB.x - pointA.x), 2) + Math.pow((pointB.y - pointA.y), 2))), |
|
guidelineDistance = this.options.guidelineDistance, |
|
maxGuideLineLength = this.options.maxGuideLineLength, |
|
// Only draw a guideline with a max length |
|
i = length > maxGuideLineLength ? length - maxGuideLineLength : guidelineDistance, |
|
fraction, |
|
dashPoint, |
|
dash; |
|
|
|
//create the guides container if we haven't yet |
|
if (!this._guidesContainer) { |
|
this._guidesContainer = L.DomUtil.create('div', 'leaflet-draw-guides', this._overlayPane); |
|
} |
|
|
|
//draw a dash every GuildeLineDistance |
|
for (; i < length; i += this.options.guidelineDistance) { |
|
//work out fraction along line we are |
|
fraction = i / length; |
|
|
|
//calculate new x,y point |
|
dashPoint = { |
|
x: Math.floor((pointA.x * (1 - fraction)) + (fraction * pointB.x)), |
|
y: Math.floor((pointA.y * (1 - fraction)) + (fraction * pointB.y)) |
|
}; |
|
|
|
//add guide dash to guide container |
|
dash = L.DomUtil.create('div', 'leaflet-draw-guide-dash', this._guidesContainer); |
|
dash.style.backgroundColor = |
|
!this._errorShown ? this.options.shapeOptions.color : this.options.drawError.color; |
|
|
|
L.DomUtil.setPosition(dash, dashPoint); |
|
} |
|
}, |
|
|
|
_updateGuideColor: function (color) { |
|
if (this._guidesContainer) { |
|
for (var i = 0, l = this._guidesContainer.childNodes.length; i < l; i++) { |
|
this._guidesContainer.childNodes[i].style.backgroundColor = color; |
|
} |
|
} |
|
}, |
|
|
|
// removes all child elements (guide dashes) from the guides container |
|
_clearGuides: function () { |
|
if (this._guidesContainer) { |
|
while (this._guidesContainer.firstChild) { |
|
this._guidesContainer.removeChild(this._guidesContainer.firstChild); |
|
} |
|
} |
|
}, |
|
|
|
_getTooltipText: function () { |
|
var showLength = this.options.showLength, |
|
labelText, distanceStr; |
|
if (this._markers.length === 0) { |
|
labelText = { |
|
text: L.drawLocal.draw.handlers.polyline.tooltip.start |
|
}; |
|
} else { |
|
distanceStr = showLength ? this._getMeasurementString() : ''; |
|
|
|
if (this._markers.length === 1) { |
|
labelText = { |
|
text: L.drawLocal.draw.handlers.polyline.tooltip.cont, |
|
subtext: distanceStr |
|
}; |
|
} else { |
|
labelText = { |
|
text: L.drawLocal.draw.handlers.polyline.tooltip.end, |
|
subtext: distanceStr |
|
}; |
|
} |
|
} |
|
return labelText; |
|
}, |
|
|
|
_updateRunningMeasure: function (latlng, added) { |
|
var markersLength = this._markers.length, |
|
previousMarkerIndex, distance; |
|
|
|
if (this._markers.length === 1) { |
|
this._measurementRunningTotal = 0; |
|
} else { |
|
previousMarkerIndex = markersLength - (added ? 2 : 1); |
|
|
|
// Calculate the distance based on the version |
|
if (L.GeometryUtil.isVersion07x()) { |
|
distance = latlng.distanceTo(this._markers[previousMarkerIndex].getLatLng()) * (this.options.factor || 1); |
|
} else { |
|
distance = this._map.distance(latlng, this._markers[previousMarkerIndex].getLatLng()) * (this.options.factor || 1); |
|
} |
|
|
|
this._measurementRunningTotal += distance * (added ? 1 : -1); |
|
} |
|
}, |
|
|
|
_getMeasurementString: function () { |
|
var currentLatLng = this._currentLatLng, |
|
previousLatLng = this._markers[this._markers.length - 1].getLatLng(), |
|
distance; |
|
|
|
// Calculate the distance from the last fixed point to the mouse position based on the version |
|
if (L.GeometryUtil.isVersion07x()) { |
|
distance = previousLatLng && currentLatLng && currentLatLng.distanceTo ? this._measurementRunningTotal + currentLatLng.distanceTo(previousLatLng) * (this.options.factor || 1) : this._measurementRunningTotal || 0; |
|
} else { |
|
distance = previousLatLng && currentLatLng ? this._measurementRunningTotal + this._map.distance(currentLatLng, previousLatLng) * (this.options.factor || 1) : this._measurementRunningTotal || 0; |
|
} |
|
|
|
return L.GeometryUtil.readableDistance(distance, this.options.metric, this.options.feet, this.options.nautic, this.options.precision); |
|
}, |
|
|
|
_showErrorTooltip: function () { |
|
this._errorShown = true; |
|
|
|
// Update tooltip |
|
this._tooltip |
|
.showAsError() |
|
.updateContent({text: this.options.drawError.message}); |
|
|
|
// Update shape |
|
this._updateGuideColor(this.options.drawError.color); |
|
this._poly.setStyle({color: this.options.drawError.color}); |
|
|
|
// Hide the error after 2 seconds |
|
this._clearHideErrorTimeout(); |
|
this._hideErrorTimeout = setTimeout(L.Util.bind(this._hideErrorTooltip, this), this.options.drawError.timeout); |
|
}, |
|
|
|
_hideErrorTooltip: function () { |
|
this._errorShown = false; |
|
|
|
this._clearHideErrorTimeout(); |
|
|
|
// Revert tooltip |
|
this._tooltip |
|
.removeError() |
|
.updateContent(this._getTooltipText()); |
|
|
|
// Revert shape |
|
this._updateGuideColor(this.options.shapeOptions.color); |
|
this._poly.setStyle({color: this.options.shapeOptions.color}); |
|
}, |
|
|
|
_clearHideErrorTimeout: function () { |
|
if (this._hideErrorTimeout) { |
|
clearTimeout(this._hideErrorTimeout); |
|
this._hideErrorTimeout = null; |
|
} |
|
}, |
|
|
|
// disable new markers temporarily; |
|
// this is to prevent duplicated touch/click events in some browsers |
|
_disableNewMarkers: function () { |
|
this._disableMarkers = true; |
|
}, |
|
|
|
// see _disableNewMarkers |
|
_enableNewMarkers: function () { |
|
setTimeout(function () { |
|
this._disableMarkers = false; |
|
}.bind(this), 50); |
|
}, |
|
|
|
_cleanUpShape: function () { |
|
if (this._markers.length > 1) { |
|
this._markers[this._markers.length - 1].off('click', this._finishShape, this); |
|
} |
|
}, |
|
|
|
_fireCreatedEvent: function () { |
|
var poly = new this.Poly(this._poly.getLatLngs(), this.options.shapeOptions); |
|
L.Draw.Feature.prototype._fireCreatedEvent.call(this, poly); |
|
} |
|
}); |
|
|
|
|
|
|
|
/** |
|
* @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); |
|
} |
|
} |
|
} |
|
}); |
|
|
|
|
|
|
|
L.SimpleShape = {}; |
|
/** |
|
* @class L.Draw.SimpleShape |
|
* @aka Draw.SimpleShape |
|
* @inherits L.Draw.Feature |
|
*/ |
|
L.Draw.SimpleShape = L.Draw.Feature.extend({ |
|
options: { |
|
repeatMode: false |
|
}, |
|
|
|
// @method initialize(): void |
|
initialize: function (map, options) { |
|
this._endLabelText = L.drawLocal.draw.handlers.simpleshape.tooltip.end; |
|
|
|
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._mapDraggable = this._map.dragging.enabled(); |
|
|
|
if (this._mapDraggable) { |
|
this._map.dragging.disable(); |
|
} |
|
|
|
//TODO refactor: move cursor to styles |
|
this._container.style.cursor = 'crosshair'; |
|
|
|
this._tooltip.updateContent({text: this._initialLabelText}); |
|
|
|
this._map |
|
.on('mousedown', this._onMouseDown, this) |
|
.on('mousemove', this._onMouseMove, this) |
|
.on('touchstart', this._onMouseDown, this) |
|
.on('touchmove', this._onMouseMove, this); |
|
|
|
// we should prevent default, otherwise default behavior (scrolling) will fire, |
|
// and that will cause document.touchend to fire and will stop the drawing |
|
// (circle, rectangle) in touch mode. |
|
// (update): we have to send passive now to prevent scroll, because by default it is {passive: true} now, which means, |
|
// handler can't event.preventDefault |
|
// check the news https://developers.google.com/web/updates/2016/06/passive-event-listeners |
|
document.addEventListener('touchstart', L.DomEvent.preventDefault, {passive: false}); |
|
} |
|
}, |
|
|
|
// @method removeHooks(): void |
|
// Remove listener hooks from this handler. |
|
removeHooks: function () { |
|
L.Draw.Feature.prototype.removeHooks.call(this); |
|
if (this._map) { |
|
if (this._mapDraggable) { |
|
this._map.dragging.enable(); |
|
} |
|
|
|
//TODO refactor: move cursor to styles |
|
this._container.style.cursor = ''; |
|
|
|
this._map |
|
.off('mousedown', this._onMouseDown, this) |
|
.off('mousemove', this._onMouseMove, this) |
|
.off('touchstart', this._onMouseDown, this) |
|
.off('touchmove', this._onMouseMove, this); |
|
|
|
L.DomEvent.off(document, 'mouseup', this._onMouseUp, this); |
|
L.DomEvent.off(document, 'touchend', this._onMouseUp, this); |
|
|
|
document.removeEventListener('touchstart', L.DomEvent.preventDefault); |
|
|
|
// If the box element doesn't exist they must not have moved the mouse, so don't need to destroy/return |
|
if (this._shape) { |
|
this._map.removeLayer(this._shape); |
|
delete this._shape; |
|
} |
|
} |
|
this._isDrawing = false; |
|
}, |
|
|
|
_getTooltipText: function () { |
|
return { |
|
text: this._endLabelText |
|
}; |
|
}, |
|
|
|
_onMouseDown: function (e) { |
|
this._isDrawing = true; |
|
this._startLatLng = e.latlng; |
|
|
|
L.DomEvent |
|
.on(document, 'mouseup', this._onMouseUp, this) |
|
.on(document, 'touchend', this._onMouseUp, this) |
|
.preventDefault(e.originalEvent); |
|
}, |
|
|
|
_onMouseMove: function (e) { |
|
var latlng = e.latlng; |
|
|
|
this._tooltip.updatePosition(latlng); |
|
if (this._isDrawing) { |
|
this._tooltip.updateContent(this._getTooltipText()); |
|
this._drawShape(latlng); |
|
} |
|
}, |
|
|
|
_onMouseUp: function () { |
|
if (this._shape) { |
|
this._fireCreatedEvent(); |
|
} |
|
|
|
this.disable(); |
|
if (this.options.repeatMode) { |
|
this.enable(); |
|
} |
|
} |
|
}); |
|
|
|
|
|
|
|
/** |
|
* @class L.Draw.Rectangle |
|
* @aka Draw.Rectangle |
|
* @inherits L.Draw.SimpleShape |
|
*/ |
|
L.Draw.Rectangle = L.Draw.SimpleShape.extend({ |
|
statics: { |
|
TYPE: 'rectangle' |
|
}, |
|
|
|
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 |
|
}, |
|
showArea: true, //Whether to show the area in the tooltip |
|
metric: true // Whether to use the metric measurement system or imperial |
|
}, |
|
|
|
// @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.Rectangle.TYPE; |
|
|
|
this._initialLabelText = L.drawLocal.draw.handlers.rectangle.tooltip.start; |
|
|
|
L.Draw.SimpleShape.prototype.initialize.call(this, map, options); |
|
}, |
|
|
|
// @method disable(): void |
|
disable: function () { |
|
if (!this._enabled) { |
|
return; |
|
} |
|
|
|
this._isCurrentlyTwoClickDrawing = false; |
|
L.Draw.SimpleShape.prototype.disable.call(this); |
|
}, |
|
|
|
_onMouseUp: function (e) { |
|
if (!this._shape && !this._isCurrentlyTwoClickDrawing) { |
|
this._isCurrentlyTwoClickDrawing = true; |
|
return; |
|
} |
|
|
|
// Make sure closing click is on map |
|
if (this._isCurrentlyTwoClickDrawing && !_hasAncestor(e.target, 'leaflet-pane')) { |
|
return; |
|
} |
|
|
|
L.Draw.SimpleShape.prototype._onMouseUp.call(this); |
|
}, |
|
|
|
_drawShape: function (latlng) { |
|
if (!this._shape) { |
|
this._shape = new L.Rectangle(new L.LatLngBounds(this._startLatLng, latlng), this.options.shapeOptions); |
|
this._map.addLayer(this._shape); |
|
} else { |
|
this._shape.setBounds(new L.LatLngBounds(this._startLatLng, latlng)); |
|
} |
|
}, |
|
|
|
_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, |
|
showArea = this.options.showArea, |
|
latLngs, area, subtext; |
|
|
|
if (shape) { |
|
latLngs = this._shape._defaultShape ? this._shape._defaultShape() : this._shape.getLatLngs(); |
|
area = L.GeometryUtil.geodesicArea(latLngs); |
|
subtext = showArea ? L.GeometryUtil.readableArea(area, this.options.metric) : ''; |
|
} |
|
|
|
return { |
|
text: tooltipText.text, |
|
subtext: subtext |
|
}; |
|
} |
|
}); |
|
|
|
function _hasAncestor(el, cls) { |
|
while ((el = el.parentElement) && !el.classList.contains(cls)) { |
|
; |
|
} |
|
return el; |
|
} |
|
|
|
|
|
|
|
/** |
|
* @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); |
|
} |
|
}); |
|
|
|
|
|
|
|
/** |
|
* @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); |
|
} |
|
}); |
|
|
|
|
|
|
|
/** |
|
* @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 |
|
}); |
|
} |
|
} |
|
}); |
|
|
|
|
|
|
|
L.Edit = L.Edit || {}; |
|
|
|
/** |
|
* @class L.Edit.Marker |
|
* @aka Edit.Marker |
|
*/ |
|
L.Edit.Marker = L.Handler.extend({ |
|
// @method initialize(): void |
|
initialize: function (marker, options) { |
|
this._marker = marker; |
|
L.setOptions(this, options); |
|
}, |
|
|
|
// @method addHooks(): void |
|
// Add listener hooks to this handler |
|
addHooks: function () { |
|
var marker = this._marker; |
|
|
|
marker.dragging.enable(); |
|
marker.on('dragend', this._onDragEnd, marker); |
|
this._toggleMarkerHighlight(); |
|
}, |
|
|
|
// @method removeHooks(): void |
|
// Remove listener hooks from this handler |
|
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; |
|
this._map.fire(L.Draw.Event.EDITMOVE, {layer: layer}); |
|
}, |
|
|
|
_toggleMarkerHighlight: function () { |
|
var icon = this._marker._icon; |
|
|
|
// 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 Leaflet.markercluster there |
|
// is a chance that a marker doesn't. |
|
if (!icon) { |
|
return; |
|
} |
|
|
|
// This is quite naughty, but I don't see another way of doing it. (short of setting a new 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(); |
|
} |
|
} |
|
}); |
|
|
|
|
|
|
|
L.Edit = L.Edit || {}; |
|
|
|
/** |
|
* @class L.Edit.Polyline |
|
* @aka L.Edit.Poly |
|
* @aka Edit.Poly |
|
*/ |
|
L.Edit.Poly = L.Handler.extend({ |
|
// @method initialize(): void |
|
initialize: function (poly) { |
|
|
|
this.latlngs = [poly._latlngs]; |
|
if (poly._holes) { |
|
this.latlngs = this.latlngs.concat(poly._holes); |
|
} |
|
|
|
this._poly = poly; |
|
|
|
this._poly.on('revert-edited', this._updateLatLngs, this); |
|
}, |
|
|
|
// Compatibility method to normalize Poly* objects |
|
// between 0.7.x and 1.0+ |
|
_defaultShape: function () { |
|
if (!L.Polyline._flat) { |
|
return this._poly._latlngs; |
|
} |
|
return L.Polyline._flat(this._poly._latlngs) ? this._poly._latlngs : this._poly._latlngs[0]; |
|
}, |
|
|
|
_eachVertexHandler: function (callback) { |
|
for (var i = 0; i < this._verticesHandlers.length; i++) { |
|
callback(this._verticesHandlers[i]); |
|
} |
|
}, |
|
|
|
// @method addHooks(): void |
|
// Add listener hooks to this handler |
|
addHooks: function () { |
|
this._initHandlers(); |
|
this._eachVertexHandler(function (handler) { |
|
handler.addHooks(); |
|
}); |
|
}, |
|
|
|
// @method removeHooks(): void |
|
// Remove listener hooks from this handler |
|
removeHooks: function () { |
|
this._eachVertexHandler(function (handler) { |
|
handler.removeHooks(); |
|
}); |
|
}, |
|
|
|
// @method updateMarkers(): void |
|
// Fire an update for each vertex handler |
|
updateMarkers: function () { |
|
this._eachVertexHandler(function (handler) { |
|
handler.updateMarkers(); |
|
}); |
|
}, |
|
|
|
_initHandlers: function () { |
|
this._verticesHandlers = []; |
|
for (var i = 0; i < this.latlngs.length; i++) { |
|
this._verticesHandlers.push(new L.Edit.PolyVerticesEdit(this._poly, this.latlngs[i], this._poly.options.poly)); |
|
} |
|
}, |
|
|
|
_updateLatLngs: function (e) { |
|
this.latlngs = [e.layer._latlngs]; |
|
if (e.layer._holes) { |
|
this.latlngs = this.latlngs.concat(e.layer._holes); |
|
} |
|
} |
|
|
|
}); |
|
|
|
/** |
|
* @class L.Edit.PolyVerticesEdit |
|
* @aka Edit.PolyVerticesEdit |
|
*/ |
|
L.Edit.PolyVerticesEdit = L.Handler.extend({ |
|
options: { |
|
icon: new L.DivIcon({ |
|
iconSize: new L.Point(8, 8), |
|
className: 'leaflet-div-icon leaflet-editing-icon' |
|
}), |
|
touchIcon: new L.DivIcon({ |
|
iconSize: new L.Point(20, 20), |
|
className: 'leaflet-div-icon leaflet-editing-icon leaflet-touch-icon' |
|
}), |
|
drawError: { |
|
color: '#b00b00', |
|
timeout: 1000 |
|
} |
|
|
|
|
|
}, |
|
|
|
// @method intialize(): void |
|
initialize: function (poly, latlngs, options) { |
|
// if touch, switch to touch icon |
|
if (L.Browser.touch) { |
|
this.options.icon = this.options.touchIcon; |
|
} |
|
this._poly = poly; |
|
|
|
if (options && options.drawError) { |
|
options.drawError = L.Util.extend({}, this.options.drawError, options.drawError); |
|
} |
|
|
|
this._latlngs = latlngs; |
|
|
|
L.setOptions(this, options); |
|
}, |
|
|
|
// Compatibility method to normalize Poly* objects |
|
// between 0.7.x and 1.0+ |
|
_defaultShape: function () { |
|
if (!L.Polyline._flat) { |
|
return this._latlngs; |
|
} |
|
return L.Polyline._flat(this._latlngs) ? this._latlngs : this._latlngs[0]; |
|
}, |
|
|
|
// @method addHooks(): void |
|
// Add listener hooks to this handler. |
|
addHooks: function () { |
|
var poly = this._poly; |
|
var path = poly._path; |
|
|
|
if (!(poly instanceof L.Polygon)) { |
|
poly.options.fill = false; |
|
if (poly.options.editing) { |
|
poly.options.editing.fill = false; |
|
} |
|
} |
|
|
|
if (path) { |
|
if (poly.options.editing && poly.options.editing.className) { |
|
if (poly.options.original.className) { |
|
poly.options.original.className.split(' ').forEach(function (className) { |
|
L.DomUtil.removeClass(path, className); |
|
}); |
|
} |
|
poly.options.editing.className.split(' ').forEach(function (className) { |
|
L.DomUtil.addClass(path, className); |
|
}); |
|
} |
|
} |
|
|
|
poly.setStyle(poly.options.editing); |
|
|
|
if (this._poly._map) { |
|
|
|
this._map = this._poly._map; // Set map |
|
|
|
if (!this._markerGroup) { |
|
this._initMarkers(); |
|
} |
|
this._poly._map.addLayer(this._markerGroup); |
|
} |
|
}, |
|
|
|
// @method removeHooks(): void |
|
// Remove listener hooks from this handler. |
|
removeHooks: function () { |
|
var poly = this._poly; |
|
var path = poly._path; |
|
|
|
if (path) { |
|
if (poly.options.editing && poly.options.editing.className) { |
|
poly.options.editing.className.split(' ').forEach(function (className) { |
|
L.DomUtil.removeClass(path, className); |
|
}); |
|
if (poly.options.original.className) { |
|
poly.options.original.className.split(' ').forEach(function (className) { |
|
L.DomUtil.addClass(path, className); |
|
}); |
|
} |
|
} |
|
} |
|
|
|
poly.setStyle(poly.options.original); |
|
|
|
if (poly._map) { |
|
poly._map.removeLayer(this._markerGroup); |
|
delete this._markerGroup; |
|
delete this._markers; |
|
} |
|
}, |
|
|
|
// @method updateMarkers(): void |
|
// Clear markers and update their location |
|
updateMarkers: function () { |
|
this._markerGroup.clearLayers(); |
|
this._initMarkers(); |
|
}, |
|
|
|
_initMarkers: function () { |
|
if (!this._markerGroup) { |
|
this._markerGroup = new L.LayerGroup(); |
|
} |
|
this._markers = []; |
|
|
|
var latlngs = this._defaultShape(), |
|
i, j, len, marker; |
|
|
|
for (i = 0, len = latlngs.length; i < len; i++) { |
|
|
|
marker = this._createMarker(latlngs[i], i); |
|
marker.on('click', this._onMarkerClick, this); |
|
marker.on('contextmenu', this._onContextMenu, this); |
|
this._markers.push(marker); |
|
} |
|
|
|
var markerLeft, markerRight; |
|
|
|
for (i = 0, j = len - 1; i < len; j = i++) { |
|
if (i === 0 && !(L.Polygon && (this._poly instanceof L.Polygon))) { |
|
continue; |
|
} |
|
|
|
markerLeft = this._markers[j]; |
|
markerRight = this._markers[i]; |
|
|
|
this._createMiddleMarker(markerLeft, markerRight); |
|
this._updatePrevNext(markerLeft, markerRight); |
|
} |
|
}, |
|
|
|
_createMarker: function (latlng, index) { |
|
// Extending L.Marker in TouchEvents.js to include touch. |
|
var marker = new L.Marker.Touch(latlng, { |
|
draggable: true, |
|
icon: this.options.icon, |
|
}); |
|
|
|
marker._origLatLng = latlng; |
|
marker._index = index; |
|
|
|
marker |
|
.on('dragstart', this._onMarkerDragStart, this) |
|
.on('drag', this._onMarkerDrag, this) |
|
.on('dragend', this._fireEdit, this) |
|
.on('touchmove', this._onTouchMove, this) |
|
.on('touchend', this._fireEdit, this) |
|
.on('MSPointerMove', this._onTouchMove, this) |
|
.on('MSPointerUp', this._fireEdit, this); |
|
|
|
this._markerGroup.addLayer(marker); |
|
|
|
return marker; |
|
}, |
|
|
|
_onMarkerDragStart: function () { |
|
this._poly.fire('editstart'); |
|
}, |
|
|
|
_spliceLatLngs: function () { |
|
var latlngs = this._defaultShape(); |
|
var removed = [].splice.apply(latlngs, arguments); |
|
this._poly._convertLatLngs(latlngs, true); |
|
this._poly.redraw(); |
|
return removed; |
|
}, |
|
|
|
_removeMarker: function (marker) { |
|
var i = marker._index; |
|
|
|
this._markerGroup.removeLayer(marker); |
|
this._markers.splice(i, 1); |
|
this._spliceLatLngs(i, 1); |
|
this._updateIndexes(i, -1); |
|
|
|
marker |
|
.off('dragstart', this._onMarkerDragStart, this) |
|
.off('drag', this._onMarkerDrag, this) |
|
.off('dragend', this._fireEdit, this) |
|
.off('touchmove', this._onMarkerDrag, this) |
|
.off('touchend', this._fireEdit, this) |
|
.off('click', this._onMarkerClick, this) |
|
.off('MSPointerMove', this._onTouchMove, this) |
|
.off('MSPointerUp', this._fireEdit, this); |
|
}, |
|
|
|
_fireEdit: function () { |
|
this._poly.edited = true; |
|
this._poly.fire('edit'); |
|
this._poly._map.fire(L.Draw.Event.EDITVERTEX, {layers: this._markerGroup, poly: this._poly}); |
|
}, |
|
|
|
_onMarkerDrag: function (e) { |
|
var marker = e.target; |
|
var poly = this._poly; |
|
|
|
var oldOrigLatLng = L.LatLngUtil.cloneLatLng(marker._origLatLng); |
|
L.extend(marker._origLatLng, marker._latlng); |
|
if (poly.options.poly) { |
|
var tooltip = poly._map._editTooltip; // Access the tooltip |
|
|
|
// If we don't allow intersections and the polygon intersects |
|
if (!poly.options.poly.allowIntersection && poly.intersects()) { |
|
L.extend(marker._origLatLng, oldOrigLatLng); |
|
marker.setLatLng(oldOrigLatLng); |
|
var originalColor = poly.options.color; |
|
poly.setStyle({color: this.options.drawError.color}); |
|
if (tooltip) { |
|
tooltip.updateContent({ |
|
text: L.drawLocal.draw.handlers.polyline.error |
|
}); |
|
} |
|
|
|
// Reset everything back to normal after a second |
|
setTimeout(function () { |
|
poly.setStyle({color: originalColor}); |
|
if (tooltip) { |
|
tooltip.updateContent({ |
|
text: L.drawLocal.edit.handlers.edit.tooltip.text, |
|
subtext: L.drawLocal.edit.handlers.edit.tooltip.subtext |
|
}); |
|
} |
|
}, 1000); |
|
} |
|
} |
|
|
|
if (marker._middleLeft) { |
|
marker._middleLeft.setLatLng(this._getMiddleLatLng(marker._prev, marker)); |
|
} |
|
if (marker._middleRight) { |
|
marker._middleRight.setLatLng(this._getMiddleLatLng(marker, marker._next)); |
|
} |
|
|
|
//refresh the bounds when draging |
|
this._poly._bounds._southWest = L.latLng(Infinity, Infinity); |
|
this._poly._bounds._northEast = L.latLng(-Infinity, -Infinity); |
|
var latlngs = this._poly.getLatLngs(); |
|
this._poly._convertLatLngs(latlngs, true); |
|
this._poly.redraw(); |
|
this._poly.fire('editdrag'); |
|
}, |
|
|
|
_onMarkerClick: function (e) { |
|
|
|
var minPoints = L.Polygon && (this._poly instanceof L.Polygon) ? 4 : 3, |
|
marker = e.target; |
|
|
|
// If removing this point would create an invalid polyline/polygon don't remove |
|
if (this._defaultShape().length < minPoints) { |
|
return; |
|
} |
|
|
|
// remove the marker |
|
this._removeMarker(marker); |
|
|
|
// update prev/next links of adjacent markers |
|
this._updatePrevNext(marker._prev, marker._next); |
|
|
|
// remove ghost markers near the removed marker |
|
if (marker._middleLeft) { |
|
this._markerGroup.removeLayer(marker._middleLeft); |
|
} |
|
if (marker._middleRight) { |
|
this._markerGroup.removeLayer(marker._middleRight); |
|
} |
|
|
|
// create a ghost marker in place of the removed one |
|
if (marker._prev && marker._next) { |
|
this._createMiddleMarker(marker._prev, marker._next); |
|
|
|
} else if (!marker._prev) { |
|
marker._next._middleLeft = null; |
|
|
|
} else if (!marker._next) { |
|
marker._prev._middleRight = null; |
|
} |
|
|
|
this._fireEdit(); |
|
}, |
|
|
|
_onContextMenu: function (e) { |
|
var marker = e.target; |
|
var poly = this._poly; |
|
this._poly._map.fire(L.Draw.Event.MARKERCONTEXT, {marker: marker, layers: this._markerGroup, poly: this._poly}); |
|
L.DomEvent.stopPropagation; |
|
}, |
|
|
|
_onTouchMove: function (e) { |
|
|
|
var layerPoint = this._map.mouseEventToLayerPoint(e.originalEvent.touches[0]), |
|
latlng = this._map.layerPointToLatLng(layerPoint), |
|
marker = e.target; |
|
|
|
L.extend(marker._origLatLng, latlng); |
|
|
|
if (marker._middleLeft) { |
|
marker._middleLeft.setLatLng(this._getMiddleLatLng(marker._prev, marker)); |
|
} |
|
if (marker._middleRight) { |
|
marker._middleRight.setLatLng(this._getMiddleLatLng(marker, marker._next)); |
|
} |
|
|
|
this._poly.redraw(); |
|
this.updateMarkers(); |
|
}, |
|
|
|
_updateIndexes: function (index, delta) { |
|
this._markerGroup.eachLayer(function (marker) { |
|
if (marker._index > index) { |
|
marker._index += delta; |
|
} |
|
}); |
|
}, |
|
|
|
_createMiddleMarker: function (marker1, marker2) { |
|
var latlng = this._getMiddleLatLng(marker1, marker2), |
|
marker = this._createMarker(latlng), |
|
onClick, |
|
onDragStart, |
|
onDragEnd; |
|
|
|
marker.setOpacity(0.6); |
|
|
|
marker1._middleRight = marker2._middleLeft = marker; |
|
|
|
onDragStart = function () { |
|
marker.off('touchmove', onDragStart, this); |
|
var i = marker2._index; |
|
|
|
marker._index = i; |
|
|
|
marker |
|
.off('click', onClick, this) |
|
.on('click', this._onMarkerClick, this); |
|
|
|
latlng.lat = marker.getLatLng().lat; |
|
latlng.lng = marker.getLatLng().lng; |
|
this._spliceLatLngs(i, 0, latlng); |
|
this._markers.splice(i, 0, marker); |
|
|
|
marker.setOpacity(1); |
|
|
|
this._updateIndexes(i, 1); |
|
marker2._index++; |
|
this._updatePrevNext(marker1, marker); |
|
this._updatePrevNext(marker, marker2); |
|
|
|
this._poly.fire('editstart'); |
|
}; |
|
|
|
onDragEnd = function () { |
|
marker.off('dragstart', onDragStart, this); |
|
marker.off('dragend', onDragEnd, this); |
|
marker.off('touchmove', onDragStart, this); |
|
|
|
this._createMiddleMarker(marker1, marker); |
|
this._createMiddleMarker(marker, marker2); |
|
}; |
|
|
|
onClick = function () { |
|
onDragStart.call(this); |
|
onDragEnd.call(this); |
|
this._fireEdit(); |
|
}; |
|
|
|
marker |
|
.on('click', onClick, this) |
|
.on('dragstart', onDragStart, this) |
|
.on('dragend', onDragEnd, this) |
|
.on('touchmove', onDragStart, this); |
|
|
|
this._markerGroup.addLayer(marker); |
|
}, |
|
|
|
_updatePrevNext: function (marker1, marker2) { |
|
if (marker1) { |
|
marker1._next = marker2; |
|
} |
|
if (marker2) { |
|
marker2._prev = marker1; |
|
} |
|
}, |
|
|
|
_getMiddleLatLng: function (marker1, marker2) { |
|
var map = this._poly._map, |
|
p1 = map.project(marker1.getLatLng()), |
|
p2 = map.project(marker2.getLatLng()); |
|
|
|
return map.unproject(p1._add(p2)._divideBy(2)); |
|
} |
|
}); |
|
|
|
L.Polyline.addInitHook(function () { |
|
|
|
// Check to see if handler has already been initialized. This is to support versions of Leaflet that still have L.Handler.PolyEdit |
|
if (this.editing) { |
|
return; |
|
} |
|
|
|
if (L.Edit.Poly) { |
|
|
|
this.editing = new L.Edit.Poly(this); |
|
|
|
if (this.options.editable) { |
|
this.editing.enable(); |
|
} |
|
} |
|
|
|
this.on('add', function () { |
|
if (this.editing && this.editing.enabled()) { |
|
this.editing.addHooks(); |
|
} |
|
}); |
|
|
|
this.on('remove', function () { |
|
if (this.editing && this.editing.enabled()) { |
|
this.editing.removeHooks(); |
|
} |
|
}); |
|
}); |
|
|
|
|
|
|
|
L.Edit = L.Edit || {}; |
|
/** |
|
* @class L.Edit.SimpleShape |
|
* @aka Edit.SimpleShape |
|
*/ |
|
L.Edit.SimpleShape = L.Handler.extend({ |
|
options: { |
|
moveIcon: new L.DivIcon({ |
|
iconSize: new L.Point(8, 8), |
|
className: 'leaflet-div-icon leaflet-editing-icon leaflet-edit-move' |
|
}), |
|
resizeIcon: new L.DivIcon({ |
|
iconSize: new L.Point(8, 8), |
|
className: 'leaflet-div-icon leaflet-editing-icon leaflet-edit-resize' |
|
}), |
|
touchMoveIcon: new L.DivIcon({ |
|
iconSize: new L.Point(20, 20), |
|
className: 'leaflet-div-icon leaflet-editing-icon leaflet-edit-move leaflet-touch-icon' |
|
}), |
|
touchResizeIcon: new L.DivIcon({ |
|
iconSize: new L.Point(20, 20), |
|
className: 'leaflet-div-icon leaflet-editing-icon leaflet-edit-resize leaflet-touch-icon' |
|
}), |
|
}, |
|
|
|
// @method intialize(): void |
|
initialize: function (shape, options) { |
|
// if touch, switch to touch icon |
|
if (L.Browser.touch) { |
|
this.options.moveIcon = this.options.touchMoveIcon; |
|
this.options.resizeIcon = this.options.touchResizeIcon; |
|
} |
|
|
|
this._shape = shape; |
|
L.Util.setOptions(this, options); |
|
}, |
|
|
|
// @method addHooks(): void |
|
// Add listener hooks to this handler |
|
addHooks: function () { |
|
var shape = this._shape; |
|
if (this._shape._map) { |
|
this._map = this._shape._map; |
|
shape.setStyle(shape.options.editing); |
|
|
|
if (shape._map) { |
|
this._map = shape._map; |
|
if (!this._markerGroup) { |
|
this._initMarkers(); |
|
} |
|
this._map.addLayer(this._markerGroup); |
|
} |
|
} |
|
}, |
|
|
|
// @method removeHooks(): void |
|
// Remove listener hooks from this handler |
|
removeHooks: function () { |
|
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++) { |
|
this._unbindMarker(this._resizeMarkers[i]); |
|
} |
|
this._resizeMarkers = null; |
|
|
|
this._map.removeLayer(this._markerGroup); |
|
delete this._markerGroup; |
|
} |
|
|
|
this._map = null; |
|
}, |
|
|
|
// @method updateMarkers(): void |
|
// Remove the edit markers from this layer |
|
updateMarkers: function () { |
|
this._markerGroup.clearLayers(); |
|
this._initMarkers(); |
|
}, |
|
|
|
_initMarkers: function () { |
|
if (!this._markerGroup) { |
|
this._markerGroup = new L.LayerGroup(); |
|
} |
|
|
|
// Create center marker |
|
this._createMoveMarker(); |
|
|
|
// Create edge marker |
|
this._createResizeMarker(); |
|
}, |
|
|
|
_createMoveMarker: function () { |
|
// Children override |
|
}, |
|
|
|
_createResizeMarker: function () { |
|
// Children override |
|
}, |
|
|
|
_createMarker: function (latlng, icon) { |
|
// Extending L.Marker in TouchEvents.js to include touch. |
|
var marker = new L.Marker.Touch(latlng, { |
|
draggable: true, |
|
icon: icon, |
|
zIndexOffset: 10 |
|
}); |
|
|
|
this._bindMarker(marker); |
|
|
|
this._markerGroup.addLayer(marker); |
|
|
|
return marker; |
|
}, |
|
|
|
_bindMarker: function (marker) { |
|
marker |
|
.on('dragstart', this._onMarkerDragStart, this) |
|
.on('drag', this._onMarkerDrag, this) |
|
.on('dragend', this._onMarkerDragEnd, this) |
|
.on('touchstart', this._onTouchStart, this) |
|
.on('touchmove', this._onTouchMove, this) |
|
.on('MSPointerMove', this._onTouchMove, this) |
|
.on('touchend', this._onTouchEnd, this) |
|
.on('MSPointerUp', this._onTouchEnd, this); |
|
}, |
|
|
|
_unbindMarker: function (marker) { |
|
marker |
|
.off('dragstart', this._onMarkerDragStart, this) |
|
.off('drag', this._onMarkerDrag, this) |
|
.off('dragend', this._onMarkerDragEnd, this) |
|
.off('touchstart', this._onTouchStart, this) |
|
.off('touchmove', this._onTouchMove, this) |
|
.off('MSPointerMove', this._onTouchMove, this) |
|
.off('touchend', this._onTouchEnd, this) |
|
.off('MSPointerUp', this._onTouchEnd, this); |
|
}, |
|
|
|
_onMarkerDragStart: function (e) { |
|
var marker = e.target; |
|
marker.setOpacity(0); |
|
|
|
this._shape.fire('editstart'); |
|
}, |
|
|
|
_fireEdit: function () { |
|
this._shape.edited = true; |
|
this._shape.fire('edit'); |
|
}, |
|
|
|
_onMarkerDrag: function (e) { |
|
var marker = e.target, |
|
latlng = marker.getLatLng(); |
|
|
|
if (marker === this._moveMarker) { |
|
this._move(latlng); |
|
} else { |
|
this._resize(latlng); |
|
} |
|
|
|
this._shape.redraw(); |
|
this._shape.fire('editdrag'); |
|
}, |
|
|
|
_onMarkerDragEnd: function (e) { |
|
var marker = e.target; |
|
marker.setOpacity(1); |
|
|
|
this._fireEdit(); |
|
}, |
|
|
|
_onTouchStart: function (e) { |
|
L.Edit.SimpleShape.prototype._onMarkerDragStart.call(this, e); |
|
|
|
if (typeof(this._getCorners) === 'function') { |
|
// Save a reference to the opposite point |
|
var corners = this._getCorners(), |
|
marker = e.target, |
|
currentCornerIndex = marker._cornerIndex; |
|
|
|
marker.setOpacity(0); |
|
|
|
// Copyed from Edit.Rectangle.js line 23 _onMarkerDragStart() |
|
// Latlng is null otherwise. |
|
this._oppositeCorner = corners[(currentCornerIndex + 2) % 4]; |
|
this._toggleCornerMarkers(0, currentCornerIndex); |
|
} |
|
|
|
this._shape.fire('editstart'); |
|
}, |
|
|
|
_onTouchMove: function (e) { |
|
var layerPoint = this._map.mouseEventToLayerPoint(e.originalEvent.touches[0]), |
|
latlng = this._map.layerPointToLatLng(layerPoint), |
|
marker = e.target; |
|
|
|
if (marker === this._moveMarker) { |
|
this._move(latlng); |
|
} else { |
|
this._resize(latlng); |
|
} |
|
|
|
this._shape.redraw(); |
|
|
|
// prevent touchcancel in IOS |
|
// e.preventDefault(); |
|
return false; |
|
}, |
|
|
|
_onTouchEnd: function (e) { |
|
var marker = e.target; |
|
marker.setOpacity(1); |
|
this.updateMarkers(); |
|
this._fireEdit(); |
|
}, |
|
|
|
_move: function () { |
|
// Children override |
|
}, |
|
|
|
_resize: function () { |
|
// Children override |
|
} |
|
}); |
|
|
|
|
|
|
|
L.Edit = L.Edit || {}; |
|
/** |
|
* @class L.Edit.Rectangle |
|
* @aka Edit.Rectangle |
|
* @inherits L.Edit.SimpleShape |
|
*/ |
|
L.Edit.Rectangle = L.Edit.SimpleShape.extend({ |
|
_createMoveMarker: function () { |
|
var bounds = this._shape.getBounds(), |
|
center = bounds.getCenter(); |
|
|
|
this._moveMarker = this._createMarker(center, this.options.moveIcon); |
|
}, |
|
|
|
_createResizeMarker: function () { |
|
var corners = this._getCorners(); |
|
|
|
this._resizeMarkers = []; |
|
|
|
for (var i = 0, l = corners.length; i < l; i++) { |
|
this._resizeMarkers.push(this._createMarker(corners[i], this.options.resizeIcon)); |
|
// Monkey in the corner index as we will need to know this for dragging |
|
this._resizeMarkers[i]._cornerIndex = i; |
|
} |
|
}, |
|
|
|
_onMarkerDragStart: function (e) { |
|
L.Edit.SimpleShape.prototype._onMarkerDragStart.call(this, e); |
|
|
|
// Save a reference to the opposite point |
|
var corners = this._getCorners(), |
|
marker = e.target, |
|
currentCornerIndex = marker._cornerIndex; |
|
|
|
this._oppositeCorner = corners[(currentCornerIndex + 2) % 4]; |
|
|
|
this._toggleCornerMarkers(0, currentCornerIndex); |
|
}, |
|
|
|
_onMarkerDragEnd: function (e) { |
|
var marker = e.target, |
|
bounds, center; |
|
|
|
// Reset move marker position to the center |
|
if (marker === this._moveMarker) { |
|
bounds = this._shape.getBounds(); |
|
center = bounds.getCenter(); |
|
|
|
marker.setLatLng(center); |
|
} |
|
|
|
this._toggleCornerMarkers(1); |
|
|
|
this._repositionCornerMarkers(); |
|
|
|
L.Edit.SimpleShape.prototype._onMarkerDragEnd.call(this, e); |
|
}, |
|
|
|
_move: function (newCenter) { |
|
var latlngs = this._shape._defaultShape ? this._shape._defaultShape() : this._shape.getLatLngs(), |
|
bounds = this._shape.getBounds(), |
|
center = bounds.getCenter(), |
|
offset, newLatLngs = []; |
|
|
|
// Offset the latlngs to the new center |
|
for (var i = 0, l = latlngs.length; i < l; i++) { |
|
offset = [latlngs[i].lat - center.lat, latlngs[i].lng - center.lng]; |
|
newLatLngs.push([newCenter.lat + offset[0], newCenter.lng + offset[1]]); |
|
} |
|
|
|
this._shape.setLatLngs(newLatLngs); |
|
|
|
// Reposition the resize markers |
|
this._repositionCornerMarkers(); |
|
|
|
this._map.fire(L.Draw.Event.EDITMOVE, {layer: this._shape}); |
|
}, |
|
|
|
_resize: function (latlng) { |
|
var bounds; |
|
|
|
// Update the shape based on the current position of this corner and the opposite point |
|
this._shape.setBounds(L.latLngBounds(latlng, this._oppositeCorner)); |
|
|
|
// Reposition the move marker |
|
bounds = this._shape.getBounds(); |
|
this._moveMarker.setLatLng(bounds.getCenter()); |
|
|
|
this._map.fire(L.Draw.Event.EDITRESIZE, {layer: this._shape}); |
|
}, |
|
|
|
_getCorners: function () { |
|
var bounds = this._shape.getBounds(), |
|
nw = bounds.getNorthWest(), |
|
ne = bounds.getNorthEast(), |
|
se = bounds.getSouthEast(), |
|
sw = bounds.getSouthWest(); |
|
|
|
return [nw, ne, se, sw]; |
|
}, |
|
|
|
_toggleCornerMarkers: function (opacity) { |
|
for (var i = 0, l = this._resizeMarkers.length; i < l; i++) { |
|
this._resizeMarkers[i].setOpacity(opacity); |
|
} |
|
}, |
|
|
|
_repositionCornerMarkers: function () { |
|
var corners = this._getCorners(); |
|
|
|
for (var i = 0, l = this._resizeMarkers.length; i < l; i++) { |
|
this._resizeMarkers[i].setLatLng(corners[i]); |
|
} |
|
} |
|
}); |
|
|
|
L.Rectangle.addInitHook(function () { |
|
if (L.Edit.Rectangle) { |
|
this.editing = new L.Edit.Rectangle(this); |
|
|
|
if (this.options.editable) { |
|
this.editing.enable(); |
|
} |
|
} |
|
}); |
|
|
|
|
|
|
|
L.Edit = L.Edit || {}; |
|
/** |
|
* @class L.Edit.CircleMarker |
|
* @aka Edit.Circle |
|
* @inherits L.Edit.SimpleShape |
|
*/ |
|
L.Edit.CircleMarker = L.Edit.SimpleShape.extend({ |
|
_createMoveMarker: function () { |
|
var center = this._shape.getLatLng(); |
|
|
|
this._moveMarker = this._createMarker(center, this.options.moveIcon); |
|
}, |
|
|
|
_createResizeMarker: function () { |
|
// To avoid an undefined check in L.Edit.SimpleShape.removeHooks |
|
this._resizeMarkers = []; |
|
}, |
|
|
|
_move: function (latlng) { |
|
if (this._resizeMarkers.length) { |
|
var resizemarkerPoint = this._getResizeMarkerPoint(latlng); |
|
// Move the resize marker |
|
this._resizeMarkers[0].setLatLng(resizemarkerPoint); |
|
} |
|
|
|
// Move the circle |
|
this._shape.setLatLng(latlng); |
|
|
|
this._map.fire(L.Draw.Event.EDITMOVE, {layer: this._shape}); |
|
}, |
|
}); |
|
|
|
L.CircleMarker.addInitHook(function () { |
|
if (L.Edit.CircleMarker) { |
|
this.editing = new L.Edit.CircleMarker(this); |
|
|
|
if (this.options.editable) { |
|
this.editing.enable(); |
|
} |
|
} |
|
|
|
this.on('add', function () { |
|
if (this.editing && this.editing.enabled()) { |
|
this.editing.addHooks(); |
|
} |
|
}); |
|
|
|
this.on('remove', function () { |
|
if (this.editing && this.editing.enabled()) { |
|
this.editing.removeHooks(); |
|
} |
|
}); |
|
}); |
|
|
|
|
|
|
|
L.Edit = L.Edit || {}; |
|
/** |
|
* @class L.Edit.Circle |
|
* @aka Edit.Circle |
|
* @inherits L.Edit.CircleMarker |
|
*/ |
|
L.Edit.Circle = L.Edit.CircleMarker.extend({ |
|
|
|
_createResizeMarker: function () { |
|
var center = this._shape.getLatLng(), |
|
resizemarkerPoint = this._getResizeMarkerPoint(center); |
|
|
|
this._resizeMarkers = []; |
|
this._resizeMarkers.push(this._createMarker(resizemarkerPoint, this.options.resizeIcon)); |
|
}, |
|
|
|
_getResizeMarkerPoint: function (latlng) { |
|
// From L.shape.getBounds() |
|
var delta = this._shape._radius * Math.cos(Math.PI / 4), |
|
point = this._map.project(latlng); |
|
return this._map.unproject([point.x + delta, point.y - delta]); |
|
}, |
|
|
|
_resize: function (latlng) { |
|
var moveLatLng = this._moveMarker.getLatLng(); |
|
|
|
// Calculate the radius based on the version |
|
if (L.GeometryUtil.isVersion07x()) { |
|
radius = moveLatLng.distanceTo(latlng); |
|
} else { |
|
radius = this._map.distance(moveLatLng, latlng); |
|
} |
|
this._shape.setRadius(radius); |
|
|
|
if (this._map.editTooltip) { |
|
this._map._editTooltip.updateContent({ |
|
text: L.drawLocal.edit.handlers.edit.tooltip.subtext + '<br />' + L.drawLocal.edit.handlers.edit.tooltip.text, |
|
subtext: L.drawLocal.draw.handlers.circle.radius + ': ' + |
|
L.GeometryUtil.readableDistance(radius, true, this.options.feet, this.options.nautic) |
|
}); |
|
} |
|
|
|
this._shape.setRadius(radius); |
|
|
|
this._map.fire(L.Draw.Event.EDITRESIZE, {layer: this._shape}); |
|
} |
|
}); |
|
|
|
L.Circle.addInitHook(function () { |
|
if (L.Edit.Circle) { |
|
this.editing = new L.Edit.Circle(this); |
|
|
|
if (this.options.editable) { |
|
this.editing.enable(); |
|
} |
|
} |
|
}); |
|
|
|
|
|
|
|
L.Map.mergeOptions({ |
|
touchExtend: true |
|
}); |
|
|
|
/** |
|
* @class L.Map.TouchExtend |
|
* @aka TouchExtend |
|
*/ |
|
L.Map.TouchExtend = L.Handler.extend({ |
|
|
|
// @method initialize(): void |
|
// Sets TouchExtend private accessor variables |
|
initialize: function (map) { |
|
this._map = map; |
|
this._container = map._container; |
|
this._pane = map._panes.overlayPane; |
|
}, |
|
|
|
// @method addHooks(): void |
|
// Adds dom listener events to the map container |
|
addHooks: function () { |
|
L.DomEvent.on(this._container, 'touchstart', this._onTouchStart, this); |
|
L.DomEvent.on(this._container, 'touchend', this._onTouchEnd, this); |
|
L.DomEvent.on(this._container, 'touchmove', this._onTouchMove, this); |
|
if (this._detectIE()) { |
|
L.DomEvent.on(this._container, 'MSPointerDown', this._onTouchStart, this); |
|
L.DomEvent.on(this._container, 'MSPointerUp', this._onTouchEnd, this); |
|
L.DomEvent.on(this._container, 'MSPointerMove', this._onTouchMove, this); |
|
L.DomEvent.on(this._container, 'MSPointerCancel', this._onTouchCancel, this); |
|
|
|
} else { |
|
L.DomEvent.on(this._container, 'touchcancel', this._onTouchCancel, this); |
|
L.DomEvent.on(this._container, 'touchleave', this._onTouchLeave, this); |
|
} |
|
}, |
|
|
|
// @method removeHooks(): void |
|
// Removes dom listener events from the map container |
|
removeHooks: function () { |
|
L.DomEvent.off(this._container, 'touchstart', this._onTouchStart, this); |
|
L.DomEvent.off(this._container, 'touchend', this._onTouchEnd, this); |
|
L.DomEvent.off(this._container, 'touchmove', this._onTouchMove, this); |
|
if (this._detectIE()) { |
|
L.DomEvent.off(this._container, 'MSPointerDown', this._onTouchStart, this); |
|
L.DomEvent.off(this._container, 'MSPointerUp', this._onTouchEnd, this); |
|
L.DomEvent.off(this._container, 'MSPointerMove', this._onTouchMove, this); |
|
L.DomEvent.off(this._container, 'MSPointerCancel', this._onTouchCancel, this); |
|
} else { |
|
L.DomEvent.off(this._container, 'touchcancel', this._onTouchCancel, this); |
|
L.DomEvent.off(this._container, 'touchleave', this._onTouchLeave, this); |
|
} |
|
}, |
|
|
|
_touchEvent: function (e, type) { |
|
// #TODO: fix the pageX error that is do a bug in Android where a single touch triggers two click events |
|
// _filterClick is what leaflet uses as a workaround. |
|
// This is a problem with more things than just android. Another problem is touchEnd has no touches in |
|
// its touch list. |
|
var touchEvent = {}; |
|
if (typeof e.touches !== 'undefined') { |
|
if (!e.touches.length) { |
|
return; |
|
} |
|
touchEvent = e.touches[0]; |
|
} else if (e.pointerType === 'touch') { |
|
touchEvent = e; |
|
if (!this._filterClick(e)) { |
|
return; |
|
} |
|
} else { |
|
return; |
|
} |
|
|
|
var containerPoint = this._map.mouseEventToContainerPoint(touchEvent), |
|
layerPoint = this._map.mouseEventToLayerPoint(touchEvent), |
|
latlng = this._map.layerPointToLatLng(layerPoint); |
|
|
|
this._map.fire(type, { |
|
latlng: latlng, |
|
layerPoint: layerPoint, |
|
containerPoint: containerPoint, |
|
pageX: touchEvent.pageX, |
|
pageY: touchEvent.pageY, |
|
originalEvent: e |
|
}); |
|
}, |
|
|
|
/** Borrowed from Leaflet and modified for bool ops **/ |
|
_filterClick: function (e) { |
|
var timeStamp = (e.timeStamp || e.originalEvent.timeStamp), |
|
elapsed = L.DomEvent._lastClick && (timeStamp - L.DomEvent._lastClick); |
|
|
|
// are they closer together than 500ms yet more than 100ms? |
|
// Android typically triggers them ~300ms apart while multiple listeners |
|
// on the same event should be triggered far faster; |
|
// or check if click is simulated on the element, and if it is, reject any non-simulated events |
|
if ((elapsed && elapsed > 100 && elapsed < 500) || (e.target._simulatedClick && !e._simulated)) { |
|
L.DomEvent.stop(e); |
|
return false; |
|
} |
|
L.DomEvent._lastClick = timeStamp; |
|
return true; |
|
}, |
|
|
|
_onTouchStart: function (e) { |
|
if (!this._map._loaded) { |
|
return; |
|
} |
|
|
|
var type = 'touchstart'; |
|
this._touchEvent(e, type); |
|
|
|
}, |
|
|
|
_onTouchEnd: function (e) { |
|
if (!this._map._loaded) { |
|
return; |
|
} |
|
|
|
var type = 'touchend'; |
|
this._touchEvent(e, type); |
|
}, |
|
|
|
_onTouchCancel: function (e) { |
|
if (!this._map._loaded) { |
|
return; |
|
} |
|
|
|
var type = 'touchcancel'; |
|
if (this._detectIE()) { |
|
type = 'pointercancel'; |
|
} |
|
this._touchEvent(e, type); |
|
}, |
|
|
|
_onTouchLeave: function (e) { |
|
if (!this._map._loaded) { |
|
return; |
|
} |
|
|
|
var type = 'touchleave'; |
|
this._touchEvent(e, type); |
|
}, |
|
|
|
_onTouchMove: function (e) { |
|
if (!this._map._loaded) { |
|
return; |
|
} |
|
|
|
var type = 'touchmove'; |
|
this._touchEvent(e, type); |
|
}, |
|
|
|
_detectIE: function () { |
|
var ua = window.navigator.userAgent; |
|
|
|
var msie = ua.indexOf('MSIE '); |
|
if (msie > 0) { |
|
// IE 10 or older => return version number |
|
return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10); |
|
} |
|
|
|
var trident = ua.indexOf('Trident/'); |
|
if (trident > 0) { |
|
// IE 11 => return version number |
|
var rv = ua.indexOf('rv:'); |
|
return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10); |
|
} |
|
|
|
var edge = ua.indexOf('Edge/'); |
|
if (edge > 0) { |
|
// IE 12 => return version number |
|
return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10); |
|
} |
|
|
|
// other browser |
|
return false; |
|
} |
|
}); |
|
|
|
L.Map.addInitHook('addHandler', 'touchExtend', L.Map.TouchExtend); |
|
|
|
|
|
/** |
|
* @class L.Marker.Touch |
|
* @aka Marker.Touch |
|
* |
|
* This isn't full Touch support. This is just to get markers to also support dom touch events after creation |
|
* #TODO: find a better way of getting markers to support touch. |
|
*/ |
|
L.Marker.Touch = L.Marker.extend({ |
|
|
|
_initInteraction: function () { |
|
if (!this.addInteractiveTarget) { |
|
// 0.7.x support |
|
return this._initInteractionLegacy(); |
|
} |
|
// TODO this may need be updated to re-add touch events for 1.0+ |
|
return L.Marker.prototype._initInteraction.apply(this); |
|
}, |
|
|
|
// This is an exact copy of https://github.com/Leaflet/Leaflet/blob/v0.7/src/layer/marker/Marker.js |
|
// with the addition of the touch events |
|
_initInteractionLegacy: function () { |
|
|
|
if (!this.options.clickable) { |
|
return; |
|
} |
|
|
|
// TODO refactor into something shared with Map/Path/etc. to DRY it up |
|
|
|
var icon = this._icon, |
|
events = ['dblclick', |
|
'mousedown', |
|
'mouseover', |
|
'mouseout', |
|
'contextmenu', |
|
'touchstart', |
|
'touchend', |
|
'touchmove']; |
|
if (this._detectIE) { |
|
events.concat(['MSPointerDown', |
|
'MSPointerUp', |
|
'MSPointerMove', |
|
'MSPointerCancel']); |
|
} else { |
|
events.concat(['touchcancel']); |
|
} |
|
|
|
L.DomUtil.addClass(icon, 'leaflet-clickable'); |
|
L.DomEvent.on(icon, 'click', this._onMouseClick, this); |
|
L.DomEvent.on(icon, 'keypress', this._onKeyPress, this); |
|
|
|
for (var i = 0; i < events.length; i++) { |
|
L.DomEvent.on(icon, events[i], this._fireMouseEvent, this); |
|
} |
|
|
|
if (L.Handler.MarkerDrag) { |
|
this.dragging = new L.Handler.MarkerDrag(this); |
|
|
|
if (this.options.draggable) { |
|
this.dragging.enable(); |
|
} |
|
} |
|
}, |
|
|
|
_detectIE: function () { |
|
var ua = window.navigator.userAgent; |
|
|
|
var msie = ua.indexOf('MSIE '); |
|
if (msie > 0) { |
|
// IE 10 or older => return version number |
|
return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10); |
|
} |
|
|
|
var trident = ua.indexOf('Trident/'); |
|
if (trident > 0) { |
|
// IE 11 => return version number |
|
var rv = ua.indexOf('rv:'); |
|
return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10); |
|
} |
|
|
|
var edge = ua.indexOf('Edge/'); |
|
if (edge > 0) { |
|
// IE 12 => return version number |
|
return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10); |
|
} |
|
|
|
// other browser |
|
return false; |
|
} |
|
}); |
|
|
|
|
|
|
|
/** |
|
* @class L.LatLngUtil |
|
* @aka LatLngUtil |
|
*/ |
|
L.LatLngUtil = { |
|
// Clones a LatLngs[], returns [][] |
|
|
|
// @method cloneLatLngs(LatLngs[]): L.LatLngs[] |
|
// Clone the latLng point or points or nested points and return an array with those points |
|
cloneLatLngs: function (latlngs) { |
|
var clone = []; |
|
for (var i = 0, l = latlngs.length; i < l; i++) { |
|
// Check for nested array (Polyline/Polygon) |
|
if (Array.isArray(latlngs[i])) { |
|
clone.push(L.LatLngUtil.cloneLatLngs(latlngs[i])); |
|
} else { |
|
clone.push(this.cloneLatLng(latlngs[i])); |
|
} |
|
} |
|
return clone; |
|
}, |
|
|
|
// @method cloneLatLng(LatLng): L.LatLng |
|
// Clone the latLng and return a new LatLng object. |
|
cloneLatLng: function (latlng) { |
|
return L.latLng(latlng.lat, latlng.lng); |
|
} |
|
}; |
|
|
|
|
|
|
|
(function () { |
|
|
|
var defaultPrecision = { |
|
km: 2, |
|
ha: 2, |
|
m: 0, |
|
mi: 2, |
|
ac: 2, |
|
yd: 0, |
|
ft: 0, |
|
nm: 2 |
|
}; |
|
|
|
|
|
/** |
|
* @class L.GeometryUtil |
|
* @aka GeometryUtil |
|
*/ |
|
L.GeometryUtil = L.extend(L.GeometryUtil || {}, { |
|
// Ported from the OpenLayers implementation. See https://github.com/openlayers/openlayers/blob/master/lib/OpenLayers/Geometry/LinearRing.js#L270 |
|
|
|
// @method geodesicArea(): number |
|
geodesicArea: function (latLngs) { |
|
var pointsCount = latLngs.length, |
|
area = 0.0, |
|
d2r = Math.PI / 180, |
|
p1, p2; |
|
|
|
if (pointsCount > 2) { |
|
for (var i = 0; i < pointsCount; i++) { |
|
p1 = latLngs[i]; |
|
p2 = latLngs[(i + 1) % pointsCount]; |
|
area += ((p2.lng - p1.lng) * d2r) * |
|
(2 + Math.sin(p1.lat * d2r) + Math.sin(p2.lat * d2r)); |
|
} |
|
area = area * 6378137.0 * 6378137.0 / 2.0; |
|
} |
|
|
|
return Math.abs(area); |
|
}, |
|
|
|
// @method formattedNumber(n, precision): string |
|
// Returns n in specified number format (if defined) and precision |
|
formattedNumber: function (n, precision) { |
|
var formatted = parseFloat(n).toFixed(precision), |
|
format = L.drawLocal.format && L.drawLocal.format.numeric, |
|
delimiters = format && format.delimiters, |
|
thousands = delimiters && delimiters.thousands, |
|
decimal = delimiters && delimiters.decimal; |
|
|
|
if (thousands || decimal) { |
|
var splitValue = formatted.split('.'); |
|
formatted = thousands ? splitValue[0].replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1' + thousands) : splitValue[0]; |
|
decimal = decimal || '.'; |
|
if (splitValue.length > 1) { |
|
formatted = formatted + decimal + splitValue[1]; |
|
} |
|
} |
|
|
|
return formatted; |
|
}, |
|
|
|
// @method readableArea(area, isMetric, precision): string |
|
// Returns a readable area string in yards or metric. |
|
// The value will be rounded as defined by the precision option object. |
|
readableArea: function (area, isMetric, precision) { |
|
var areaStr, |
|
units, |
|
precision = L.Util.extend({}, defaultPrecision, precision); |
|
|
|
if (isMetric) { |
|
units = ['ha', 'm']; |
|
type = typeof isMetric; |
|
if (type === 'string') { |
|
units = [isMetric]; |
|
} else if (type !== 'boolean') { |
|
units = isMetric; |
|
} |
|
|
|
if (area >= 1000000 && units.indexOf('km') !== -1) { |
|
areaStr = L.GeometryUtil.formattedNumber(area * 0.000001, precision['km']) + ' km²'; |
|
} else if (area >= 10000 && units.indexOf('ha') !== -1) { |
|
areaStr = L.GeometryUtil.formattedNumber(area * 0.0001, precision['ha']) + ' ha'; |
|
} else { |
|
areaStr = L.GeometryUtil.formattedNumber(area, precision['m']) + ' m²'; |
|
} |
|
} else { |
|
area /= 0.836127; // Square yards in 1 meter |
|
|
|
if (area >= 3097600) { //3097600 square yards in 1 square mile |
|
areaStr = L.GeometryUtil.formattedNumber(area / 3097600, precision['mi']) + ' mi²'; |
|
} else if (area >= 4840) { //4840 square yards in 1 acre |
|
areaStr = L.GeometryUtil.formattedNumber(area / 4840, precision['ac']) + ' acres'; |
|
} else { |
|
areaStr = L.GeometryUtil.formattedNumber(area, precision['yd']) + ' yd²'; |
|
} |
|
} |
|
|
|
return areaStr; |
|
}, |
|
|
|
// @method readableDistance(distance, units): string |
|
// Converts a metric distance to one of [ feet, nauticalMile, metric or yards ] string |
|
// |
|
// @alternative |
|
// @method readableDistance(distance, isMetric, useFeet, isNauticalMile, precision): string |
|
// Converts metric distance to distance string. |
|
// The value will be rounded as defined by the precision option object. |
|
readableDistance: function (distance, isMetric, isFeet, isNauticalMile, precision) { |
|
var distanceStr, |
|
units, |
|
precision = L.Util.extend({}, defaultPrecision, precision); |
|
|
|
if (isMetric) { |
|
units = typeof isMetric == 'string' ? isMetric : 'metric'; |
|
} else if (isFeet) { |
|
units = 'feet'; |
|
} else if (isNauticalMile) { |
|
units = 'nauticalMile'; |
|
} else { |
|
units = 'yards'; |
|
} |
|
|
|
switch (units) { |
|
case 'metric': |
|
// show metres when distance is < 1km, then show km |
|
if (distance > 1000) { |
|
distanceStr = L.GeometryUtil.formattedNumber(distance / 1000, precision['km']) + ' km'; |
|
} else { |
|
distanceStr = L.GeometryUtil.formattedNumber(distance, precision['m']) + ' m'; |
|
} |
|
break; |
|
case 'feet': |
|
distance *= 1.09361 * 3; |
|
distanceStr = L.GeometryUtil.formattedNumber(distance, precision['ft']) + ' ft'; |
|
|
|
break; |
|
case 'nauticalMile': |
|
distance *= 0.53996; |
|
distanceStr = L.GeometryUtil.formattedNumber(distance / 1000, precision['nm']) + ' nm'; |
|
break; |
|
case 'yards': |
|
default: |
|
distance *= 1.09361; |
|
|
|
if (distance > 1760) { |
|
distanceStr = L.GeometryUtil.formattedNumber(distance / 1760, precision['mi']) + ' miles'; |
|
} else { |
|
distanceStr = L.GeometryUtil.formattedNumber(distance, precision['yd']) + ' yd'; |
|
} |
|
break; |
|
} |
|
return distanceStr; |
|
}, |
|
|
|
// @method isVersion07x(): boolean |
|
// Returns true if the Leaflet version is 0.7.x, false otherwise. |
|
isVersion07x: function () { |
|
var version = L.version.split('.'); |
|
//If Version is == 0.7.* |
|
return parseInt(version[0], 10) === 0 && parseInt(version[1], 10) === 7; |
|
}, |
|
}); |
|
|
|
})(); |
|
|
|
|
|
|
|
/** |
|
* @class L.LineUtil |
|
* @aka Util |
|
* @aka L.Utils |
|
*/ |
|
L.Util.extend(L.LineUtil, { |
|
|
|
// @method segmentsIntersect(): boolean |
|
// Checks to see if two line segments intersect. Does not handle degenerate cases. |
|
// http://compgeom.cs.uiuc.edu/~jeffe/teaching/373/notes/x06-sweepline.pdf |
|
segmentsIntersect: function (/*Point*/ p, /*Point*/ p1, /*Point*/ p2, /*Point*/ p3) { |
|
return this._checkCounterclockwise(p, p2, p3) !== |
|
this._checkCounterclockwise(p1, p2, p3) && |
|
this._checkCounterclockwise(p, p1, p2) !== |
|
this._checkCounterclockwise(p, p1, p3); |
|
}, |
|
|
|
// check to see if points are in counterclockwise order |
|
_checkCounterclockwise: function (/*Point*/ p, /*Point*/ p1, /*Point*/ p2) { |
|
return (p2.y - p.y) * (p1.x - p.x) > (p1.y - p.y) * (p2.x - p.x); |
|
} |
|
}); |
|
|
|
|
|
|
|
/** |
|
* @class L.Polyline |
|
* @aka Polyline |
|
*/ |
|
L.Polyline.include({ |
|
|
|
// @method intersects(): boolean |
|
// Check to see if this polyline has any linesegments that intersect. |
|
// NOTE: does not support detecting intersection for degenerate cases. |
|
intersects: function () { |
|
var points = this._getProjectedPoints(), |
|
len = points ? points.length : 0, |
|
i, p, p1; |
|
|
|
if (this._tooFewPointsForIntersection()) { |
|
return false; |
|
} |
|
|
|
for (i = len - 1; i >= 3; i--) { |
|
p = points[i - 1]; |
|
p1 = points[i]; |
|
|
|
|
|
if (this._lineSegmentsIntersectsRange(p, p1, i - 2)) { |
|
return true; |
|
} |
|
} |
|
|
|
return false; |
|
}, |
|
|
|
// @method newLatLngIntersects(): boolean |
|
// Check for intersection if new latlng was added to this polyline. |
|
// NOTE: does not support detecting intersection for degenerate cases. |
|
newLatLngIntersects: function (latlng, skipFirst) { |
|
// Cannot check a polyline for intersecting lats/lngs when not added to the map |
|
if (!this._map) { |
|
return false; |
|
} |
|
|
|
return this.newPointIntersects(this._map.latLngToLayerPoint(latlng), skipFirst); |
|
}, |
|
|
|
// @method newPointIntersects(): boolean |
|
// Check for intersection if new point was added to this polyline. |
|
// newPoint must be a layer point. |
|
// NOTE: does not support detecting intersection for degenerate cases. |
|
newPointIntersects: function (newPoint, skipFirst) { |
|
var points = this._getProjectedPoints(), |
|
len = points ? points.length : 0, |
|
lastPoint = points ? points[len - 1] : null, |
|
// The previous previous line segment. Previous line segment doesn't need testing. |
|
maxIndex = len - 2; |
|
|
|
if (this._tooFewPointsForIntersection(1)) { |
|
return false; |
|
} |
|
|
|
return this._lineSegmentsIntersectsRange(lastPoint, newPoint, maxIndex, skipFirst ? 1 : 0); |
|
}, |
|
|
|
// Polylines with 2 sides can only intersect in cases where points are collinear (we don't support detecting these). |
|
// Cannot have intersection when < 3 line segments (< 4 points) |
|
_tooFewPointsForIntersection: function (extraPoints) { |
|
var points = this._getProjectedPoints(), |
|
len = points ? points.length : 0; |
|
// Increment length by extraPoints if present |
|
len += extraPoints || 0; |
|
|
|
return !points || len <= 3; |
|
}, |
|
|
|
// Checks a line segment intersections with any line segments before its predecessor. |
|
// Don't need to check the predecessor as will never intersect. |
|
_lineSegmentsIntersectsRange: function (p, p1, maxIndex, minIndex) { |
|
var points = this._getProjectedPoints(), |
|
p2, p3; |
|
|
|
minIndex = minIndex || 0; |
|
|
|
// Check all previous line segments (beside the immediately previous) for intersections |
|
for (var j = maxIndex; j > minIndex; j--) { |
|
p2 = points[j - 1]; |
|
p3 = points[j]; |
|
|
|
if (L.LineUtil.segmentsIntersect(p, p1, p2, p3)) { |
|
return true; |
|
} |
|
} |
|
|
|
return false; |
|
}, |
|
|
|
_getProjectedPoints: function () { |
|
if (!this._defaultShape) { |
|
return this._originalPoints; |
|
} |
|
var points = [], |
|
_shape = this._defaultShape(); |
|
|
|
for (var i = 0; i < _shape.length; i++) { |
|
points.push(this._map.latLngToLayerPoint(_shape[i])); |
|
} |
|
return points; |
|
} |
|
}); |
|
|
|
|
|
|
|
/** |
|
* @class L.Polygon |
|
* @aka Polygon |
|
*/ |
|
L.Polygon.include({ |
|
|
|
// @method intersects(): boolean |
|
// Checks a polygon for any intersecting line segments. Ignores holes. |
|
intersects: function () { |
|
var polylineIntersects, |
|
points = this._getProjectedPoints(), |
|
len, firstPoint, lastPoint, maxIndex; |
|
|
|
if (this._tooFewPointsForIntersection()) { |
|
return false; |
|
} |
|
|
|
polylineIntersects = L.Polyline.prototype.intersects.call(this); |
|
|
|
// If already found an intersection don't need to check for any more. |
|
if (polylineIntersects) { |
|
return true; |
|
} |
|
|
|
len = points.length; |
|
firstPoint = points[0]; |
|
lastPoint = points[len - 1]; |
|
maxIndex = len - 2; |
|
|
|
// Check the line segment between last and first point. Don't need to check the first line segment (minIndex = 1) |
|
return this._lineSegmentsIntersectsRange(lastPoint, firstPoint, maxIndex, 1); |
|
} |
|
}); |
|
|
|
|
|
|
|
/** |
|
* @class L.Control.Draw |
|
* @aka L.Draw |
|
*/ |
|
L.Control.Draw = L.Control.extend({ |
|
|
|
// Options |
|
options: { |
|
position: 'topleft', |
|
draw: {}, |
|
edit: false |
|
}, |
|
|
|
// @method initialize(): void |
|
// Initializes draw control, toolbars from the options |
|
initialize: function (options) { |
|
if (L.version < '0.7') { |
|
throw new Error('Leaflet.draw 0.2.3+ requires Leaflet 0.7.0+. Download latest from https://github.com/Leaflet/Leaflet/'); |
|
} |
|
|
|
L.Control.prototype.initialize.call(this, options); |
|
|
|
var toolbar; |
|
|
|
this._toolbars = {}; |
|
|
|
// Initialize toolbars |
|
if (L.DrawToolbar && this.options.draw) { |
|
toolbar = new L.DrawToolbar(this.options.draw); |
|
|
|
this._toolbars[L.DrawToolbar.TYPE] = toolbar; |
|
|
|
// Listen for when toolbar is enabled |
|
this._toolbars[L.DrawToolbar.TYPE].on('enable', this._toolbarEnabled, this); |
|
} |
|
|
|
if (L.EditToolbar && this.options.edit) { |
|
toolbar = new L.EditToolbar(this.options.edit); |
|
|
|
this._toolbars[L.EditToolbar.TYPE] = toolbar; |
|
|
|
// Listen for when toolbar is enabled |
|
this._toolbars[L.EditToolbar.TYPE].on('enable', this._toolbarEnabled, this); |
|
} |
|
L.toolbar = this; //set global var for editing the toolbar |
|
}, |
|
|
|
// @method onAdd(): container |
|
// Adds the toolbar container to the map |
|
onAdd: function (map) { |
|
var container = L.DomUtil.create('div', 'leaflet-draw'), |
|
addedTopClass = false, |
|
topClassName = 'leaflet-draw-toolbar-top', |
|
toolbarContainer; |
|
|
|
for (var toolbarId in this._toolbars) { |
|
if (this._toolbars.hasOwnProperty(toolbarId)) { |
|
toolbarContainer = this._toolbars[toolbarId].addToolbar(map); |
|
|
|
if (toolbarContainer) { |
|
// Add class to the first toolbar to remove the margin |
|
if (!addedTopClass) { |
|
if (!L.DomUtil.hasClass(toolbarContainer, topClassName)) { |
|
L.DomUtil.addClass(toolbarContainer.childNodes[0], topClassName); |
|
} |
|
addedTopClass = true; |
|
} |
|
|
|
container.appendChild(toolbarContainer); |
|
} |
|
} |
|
} |
|
|
|
return container; |
|
}, |
|
|
|
// @method onRemove(): void |
|
// Removes the toolbars from the map toolbar container |
|
onRemove: function () { |
|
for (var toolbarId in this._toolbars) { |
|
if (this._toolbars.hasOwnProperty(toolbarId)) { |
|
this._toolbars[toolbarId].removeToolbar(); |
|
} |
|
} |
|
}, |
|
|
|
// @method setDrawingOptions(options): void |
|
// Sets options to all toolbar instances |
|
setDrawingOptions: function (options) { |
|
for (var toolbarId in this._toolbars) { |
|
if (this._toolbars[toolbarId] instanceof L.DrawToolbar) { |
|
this._toolbars[toolbarId].setOptions(options); |
|
} |
|
} |
|
}, |
|
|
|
_toolbarEnabled: function (e) { |
|
var enabledToolbar = e.target; |
|
|
|
for (var toolbarId in this._toolbars) { |
|
if (this._toolbars[toolbarId] !== enabledToolbar) { |
|
this._toolbars[toolbarId].disable(); |
|
} |
|
} |
|
} |
|
}); |
|
|
|
L.Map.mergeOptions({ |
|
drawControlTooltips: true, |
|
drawControl: false |
|
}); |
|
|
|
L.Map.addInitHook(function () { |
|
if (this.options.drawControl) { |
|
this.drawControl = new L.Control.Draw(); |
|
this.addControl(this.drawControl); |
|
} |
|
}); |
|
|
|
|
|
|
|
/** |
|
* @class L.Draw.Toolbar |
|
* @aka Toolbar |
|
* |
|
* The toolbar class of the API — it is used to create the ui |
|
* This will be depreciated |
|
* |
|
* @example |
|
* |
|
* ```js |
|
* var toolbar = L.Toolbar(); |
|
* toolbar.addToolbar(map); |
|
* ``` |
|
* |
|
* ### Disabling a toolbar |
|
* |
|
* If you do not want a particular toolbar in your app you can turn it off by setting the toolbar to false. |
|
* |
|
* ```js |
|
* var drawControl = new L.Control.Draw({ |
|
* draw: false, |
|
* edit: { |
|
* featureGroup: editableLayers |
|
* } |
|
* }); |
|
* ``` |
|
* |
|
* ### Disabling a toolbar item |
|
* |
|
* If you want to turn off a particular toolbar item, set it to false. The following disables drawing polygons and |
|
* markers. It also turns off the ability to edit layers. |
|
* |
|
* ```js |
|
* var drawControl = new L.Control.Draw({ |
|
* draw: { |
|
* polygon: false, |
|
* marker: false |
|
* }, |
|
* edit: { |
|
* featureGroup: editableLayers, |
|
* edit: false |
|
* } |
|
* }); |
|
* ``` |
|
*/ |
|
L.Toolbar = L.Class.extend({ |
|
// @section Methods for modifying the toolbar |
|
|
|
// @method initialize(options): void |
|
// Toolbar constructor |
|
initialize: function (options) { |
|
L.setOptions(this, options); |
|
|
|
this._modes = {}; |
|
this._actionButtons = []; |
|
this._activeMode = null; |
|
|
|
var version = L.version.split('.'); |
|
//If Version is >= 1.2.0 |
|
if (parseInt(version[0], 10) === 1 && parseInt(version[1], 10) >= 2) { |
|
L.Toolbar.include(L.Evented.prototype); |
|
} else { |
|
L.Toolbar.include(L.Mixin.Events); |
|
} |
|
}, |
|
|
|
// @method enabled(): boolean |
|
// Gets a true/false of whether the toolbar is enabled |
|
enabled: function () { |
|
return this._activeMode !== null; |
|
}, |
|
|
|
// @method disable(): void |
|
// Disables the toolbar |
|
disable: function () { |
|
if (!this.enabled()) { |
|
return; |
|
} |
|
|
|
this._activeMode.handler.disable(); |
|
}, |
|
|
|
// @method addToolbar(map): L.DomUtil |
|
// Adds the toolbar to the map and returns the toolbar dom element |
|
addToolbar: function (map) { |
|
var container = L.DomUtil.create('div', 'leaflet-draw-section'), |
|
buttonIndex = 0, |
|
buttonClassPrefix = this._toolbarClass || '', |
|
modeHandlers = this.getModeHandlers(map), |
|
i; |
|
|
|
this._toolbarContainer = L.DomUtil.create('div', 'leaflet-draw-toolbar leaflet-bar'); |
|
this._map = map; |
|
|
|
for (i = 0; i < modeHandlers.length; i++) { |
|
if (modeHandlers[i].enabled) { |
|
this._initModeHandler( |
|
modeHandlers[i].handler, |
|
this._toolbarContainer, |
|
buttonIndex++, |
|
buttonClassPrefix, |
|
modeHandlers[i].title |
|
); |
|
} |
|
} |
|
|
|
// if no buttons were added, do not add the toolbar |
|
if (!buttonIndex) { |
|
return; |
|
} |
|
|
|
// Save button index of the last button, -1 as we would have ++ after the last button |
|
this._lastButtonIndex = --buttonIndex; |
|
|
|
// Create empty actions part of the toolbar |
|
this._actionsContainer = L.DomUtil.create('ul', 'leaflet-draw-actions'); |
|
|
|
// Add draw and cancel containers to the control container |
|
container.appendChild(this._toolbarContainer); |
|
container.appendChild(this._actionsContainer); |
|
|
|
return container; |
|
}, |
|
|
|
// @method removeToolbar(): void |
|
// Removes the toolbar and drops the handler event listeners |
|
removeToolbar: function () { |
|
// Dispose each handler |
|
for (var handlerId in this._modes) { |
|
if (this._modes.hasOwnProperty(handlerId)) { |
|
// Unbind handler button |
|
this._disposeButton( |
|
this._modes[handlerId].button, |
|
this._modes[handlerId].handler.enable, |
|
this._modes[handlerId].handler |
|
); |
|
|
|
// Make sure is disabled |
|
this._modes[handlerId].handler.disable(); |
|
|
|
// Unbind handler |
|
this._modes[handlerId].handler |
|
.off('enabled', this._handlerActivated, this) |
|
.off('disabled', this._handlerDeactivated, this); |
|
} |
|
} |
|
this._modes = {}; |
|
|
|
// Dispose the actions toolbar |
|
for (var i = 0, l = this._actionButtons.length; i < l; i++) { |
|
this._disposeButton( |
|
this._actionButtons[i].button, |
|
this._actionButtons[i].callback, |
|
this |
|
); |
|
} |
|
this._actionButtons = []; |
|
this._actionsContainer = null; |
|
}, |
|
|
|
_initModeHandler: function (handler, container, buttonIndex, classNamePredix, buttonTitle) { |
|
var type = handler.type; |
|
|
|
this._modes[type] = {}; |
|
|
|
this._modes[type].handler = handler; |
|
|
|
this._modes[type].button = this._createButton({ |
|
type: type, |
|
title: buttonTitle, |
|
className: classNamePredix + '-' + type, |
|
container: container, |
|
callback: this._modes[type].handler.enable, |
|
context: this._modes[type].handler |
|
}); |
|
|
|
this._modes[type].buttonIndex = buttonIndex; |
|
|
|
this._modes[type].handler |
|
.on('enabled', this._handlerActivated, this) |
|
.on('disabled', this._handlerDeactivated, this); |
|
}, |
|
|
|
/* Detect iOS based on browser User Agent, based on: |
|
* http://stackoverflow.com/a/9039885 */ |
|
_detectIOS: function () { |
|
var iOS = (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream); |
|
return iOS; |
|
}, |
|
|
|
_createButton: function (options) { |
|
|
|
var link = L.DomUtil.create('a', options.className || '', options.container); |
|
// Screen reader tag |
|
var sr = L.DomUtil.create('span', 'sr-only', options.container); |
|
|
|
link.href = '#'; |
|
link.appendChild(sr); |
|
|
|
if (options.title) { |
|
link.title = options.title; |
|
sr.innerHTML = options.title; |
|
} |
|
|
|
if (options.text) { |
|
link.innerHTML = options.text; |
|
sr.innerHTML = options.text; |
|
} |
|
|
|
/* iOS does not use click events */ |
|
var buttonEvent = this._detectIOS() ? 'touchstart' : 'click'; |
|
|
|
L.DomEvent |
|
.on(link, 'click', L.DomEvent.stopPropagation) |
|
.on(link, 'mousedown', L.DomEvent.stopPropagation) |
|
.on(link, 'dblclick', L.DomEvent.stopPropagation) |
|
.on(link, 'touchstart', L.DomEvent.stopPropagation) |
|
.on(link, 'click', L.DomEvent.preventDefault) |
|
.on(link, buttonEvent, options.callback, options.context); |
|
|
|
return link; |
|
}, |
|
|
|
_disposeButton: function (button, callback) { |
|
/* iOS does not use click events */ |
|
var buttonEvent = this._detectIOS() ? 'touchstart' : 'click'; |
|
|
|
L.DomEvent |
|
.off(button, 'click', L.DomEvent.stopPropagation) |
|
.off(button, 'mousedown', L.DomEvent.stopPropagation) |
|
.off(button, 'dblclick', L.DomEvent.stopPropagation) |
|
.off(button, 'touchstart', L.DomEvent.stopPropagation) |
|
.off(button, 'click', L.DomEvent.preventDefault) |
|
.off(button, buttonEvent, callback); |
|
}, |
|
|
|
_handlerActivated: function (e) { |
|
// Disable active mode (if present) |
|
this.disable(); |
|
|
|
// Cache new active feature |
|
this._activeMode = this._modes[e.handler]; |
|
|
|
L.DomUtil.addClass(this._activeMode.button, 'leaflet-draw-toolbar-button-enabled'); |
|
|
|
this._showActionsToolbar(); |
|
|
|
this.fire('enable'); |
|
}, |
|
|
|
_handlerDeactivated: function () { |
|
this._hideActionsToolbar(); |
|
|
|
L.DomUtil.removeClass(this._activeMode.button, 'leaflet-draw-toolbar-button-enabled'); |
|
|
|
this._activeMode = null; |
|
|
|
this.fire('disable'); |
|
}, |
|
|
|
_createActions: function (handler) { |
|
var container = this._actionsContainer, |
|
buttons = this.getActions(handler), |
|
l = buttons.length, |
|
li, di, dl, button; |
|
|
|
// Dispose the actions toolbar (todo: dispose only not used buttons) |
|
for (di = 0, dl = this._actionButtons.length; di < dl; di++) { |
|
this._disposeButton(this._actionButtons[di].button, this._actionButtons[di].callback); |
|
} |
|
this._actionButtons = []; |
|
|
|
// Remove all old buttons |
|
while (container.firstChild) { |
|
container.removeChild(container.firstChild); |
|
} |
|
|
|
for (var i = 0; i < l; i++) { |
|
if ('enabled' in buttons[i] && !buttons[i].enabled) { |
|
continue; |
|
} |
|
|
|
li = L.DomUtil.create('li', '', container); |
|
|
|
button = this._createButton({ |
|
title: buttons[i].title, |
|
text: buttons[i].text, |
|
container: li, |
|
callback: buttons[i].callback, |
|
context: buttons[i].context |
|
}); |
|
|
|
this._actionButtons.push({ |
|
button: button, |
|
callback: buttons[i].callback |
|
}); |
|
} |
|
}, |
|
|
|
_showActionsToolbar: function () { |
|
var buttonIndex = this._activeMode.buttonIndex, |
|
lastButtonIndex = this._lastButtonIndex, |
|
toolbarPosition = this._activeMode.button.offsetTop - 1; |
|
|
|
// Recreate action buttons on every click |
|
this._createActions(this._activeMode.handler); |
|
|
|
// Correctly position the cancel button |
|
this._actionsContainer.style.top = toolbarPosition + 'px'; |
|
|
|
if (buttonIndex === 0) { |
|
L.DomUtil.addClass(this._toolbarContainer, 'leaflet-draw-toolbar-notop'); |
|
L.DomUtil.addClass(this._actionsContainer, 'leaflet-draw-actions-top'); |
|
} |
|
|
|
if (buttonIndex === lastButtonIndex) { |
|
L.DomUtil.addClass(this._toolbarContainer, 'leaflet-draw-toolbar-nobottom'); |
|
L.DomUtil.addClass(this._actionsContainer, 'leaflet-draw-actions-bottom'); |
|
} |
|
|
|
this._actionsContainer.style.display = 'block'; |
|
this._map.fire(L.Draw.Event.TOOLBAROPENED); |
|
}, |
|
|
|
_hideActionsToolbar: function () { |
|
this._actionsContainer.style.display = 'none'; |
|
|
|
L.DomUtil.removeClass(this._toolbarContainer, 'leaflet-draw-toolbar-notop'); |
|
L.DomUtil.removeClass(this._toolbarContainer, 'leaflet-draw-toolbar-nobottom'); |
|
L.DomUtil.removeClass(this._actionsContainer, 'leaflet-draw-actions-top'); |
|
L.DomUtil.removeClass(this._actionsContainer, 'leaflet-draw-actions-bottom'); |
|
this._map.fire(L.Draw.Event.TOOLBARCLOSED); |
|
} |
|
}); |
|
|
|
|
|
|
|
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'; |
|
} |
|
} |
|
}); |
|
|
|
|
|
|
|
/** |
|
* @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]); |
|
} |
|
} |
|
} |
|
}); |
|
|
|
|
|
|
|
/*L.Map.mergeOptions({ |
|
editControl: true |
|
});*/ |
|
/** |
|
* @class L.EditToolbar |
|
* @aka EditToolbar |
|
*/ |
|
L.EditToolbar = L.Toolbar.extend({ |
|
statics: { |
|
TYPE: 'edit' |
|
}, |
|
|
|
options: { |
|
edit: { |
|
selectedPathOptions: { |
|
dashArray: '10, 10', |
|
|
|
fill: true, |
|
fillColor: '#fe57a1', |
|
fillOpacity: 0.1, |
|
|
|
// Whether to user the existing layers color |
|
maintainColor: false |
|
} |
|
}, |
|
remove: {}, |
|
poly: null, |
|
featureGroup: null /* REQUIRED! TODO: perhaps if not set then all layers on the map are selectable? */ |
|
}, |
|
|
|
// @method intialize(): void |
|
initialize: function (options) { |
|
// Need to set this manually since null is an acceptable value here |
|
if (options.edit) { |
|
if (typeof options.edit.selectedPathOptions === 'undefined') { |
|
options.edit.selectedPathOptions = this.options.edit.selectedPathOptions; |
|
} |
|
options.edit.selectedPathOptions = L.extend({}, this.options.edit.selectedPathOptions, options.edit.selectedPathOptions); |
|
} |
|
|
|
if (options.remove) { |
|
options.remove = L.extend({}, this.options.remove, options.remove); |
|
} |
|
|
|
if (options.poly) { |
|
options.poly = L.extend({}, this.options.poly, options.poly); |
|
} |
|
|
|
this._toolbarClass = 'leaflet-draw-edit'; |
|
L.Toolbar.prototype.initialize.call(this, options); |
|
|
|
this._selectedFeatureCount = 0; |
|
}, |
|
|
|
// @method getModeHandlers(): object |
|
// Get mode handlers information |
|
getModeHandlers: function (map) { |
|
var featureGroup = this.options.featureGroup; |
|
return [ |
|
{ |
|
enabled: this.options.edit, |
|
handler: new L.EditToolbar.Edit(map, { |
|
featureGroup: featureGroup, |
|
selectedPathOptions: this.options.edit.selectedPathOptions, |
|
poly: this.options.poly |
|
}), |
|
title: L.drawLocal.edit.toolbar.buttons.edit |
|
}, |
|
{ |
|
enabled: this.options.remove, |
|
handler: new L.EditToolbar.Delete(map, { |
|
featureGroup: featureGroup |
|
}), |
|
title: L.drawLocal.edit.toolbar.buttons.remove |
|
} |
|
]; |
|
}, |
|
|
|
// @method getActions(): object |
|
// Get actions information |
|
getActions: function (handler) { |
|
var actions = [ |
|
{ |
|
title: L.drawLocal.edit.toolbar.actions.save.title, |
|
text: L.drawLocal.edit.toolbar.actions.save.text, |
|
callback: this._save, |
|
context: this |
|
}, |
|
{ |
|
title: L.drawLocal.edit.toolbar.actions.cancel.title, |
|
text: L.drawLocal.edit.toolbar.actions.cancel.text, |
|
callback: this.disable, |
|
context: this |
|
} |
|
]; |
|
|
|
if (handler.removeAllLayers) { |
|
actions.push({ |
|
title: L.drawLocal.edit.toolbar.actions.clearAll.title, |
|
text: L.drawLocal.edit.toolbar.actions.clearAll.text, |
|
callback: this._clearAllLayers, |
|
context: this |
|
}); |
|
} |
|
|
|
return actions; |
|
}, |
|
|
|
// @method addToolbar(map): L.DomUtil |
|
// Adds the toolbar to the map |
|
addToolbar: function (map) { |
|
var container = L.Toolbar.prototype.addToolbar.call(this, map); |
|
|
|
this._checkDisabled(); |
|
|
|
this.options.featureGroup.on('layeradd layerremove', this._checkDisabled, this); |
|
|
|
return container; |
|
}, |
|
|
|
// @method removeToolbar(): void |
|
// Removes the toolbar from the map |
|
removeToolbar: function () { |
|
this.options.featureGroup.off('layeradd layerremove', this._checkDisabled, this); |
|
|
|
L.Toolbar.prototype.removeToolbar.call(this); |
|
}, |
|
|
|
// @method disable(): void |
|
// Disables the toolbar |
|
disable: function () { |
|
if (!this.enabled()) { |
|
return; |
|
} |
|
|
|
this._activeMode.handler.revertLayers(); |
|
|
|
L.Toolbar.prototype.disable.call(this); |
|
}, |
|
|
|
_save: function () { |
|
this._activeMode.handler.save(); |
|
if (this._activeMode) { |
|
this._activeMode.handler.disable(); |
|
} |
|
}, |
|
|
|
_clearAllLayers: function () { |
|
this._activeMode.handler.removeAllLayers(); |
|
if (this._activeMode) { |
|
this._activeMode.handler.disable(); |
|
} |
|
}, |
|
|
|
_checkDisabled: function () { |
|
var featureGroup = this.options.featureGroup, |
|
hasLayers = featureGroup.getLayers().length !== 0, |
|
button; |
|
|
|
if (this.options.edit) { |
|
button = this._modes[L.EditToolbar.Edit.TYPE].button; |
|
|
|
if (hasLayers) { |
|
L.DomUtil.removeClass(button, 'leaflet-disabled'); |
|
} else { |
|
L.DomUtil.addClass(button, 'leaflet-disabled'); |
|
} |
|
|
|
button.setAttribute( |
|
'title', |
|
hasLayers ? |
|
L.drawLocal.edit.toolbar.buttons.edit |
|
: L.drawLocal.edit.toolbar.buttons.editDisabled |
|
); |
|
} |
|
|
|
if (this.options.remove) { |
|
button = this._modes[L.EditToolbar.Delete.TYPE].button; |
|
|
|
if (hasLayers) { |
|
L.DomUtil.removeClass(button, 'leaflet-disabled'); |
|
} else { |
|
L.DomUtil.addClass(button, 'leaflet-disabled'); |
|
} |
|
|
|
button.setAttribute( |
|
'title', |
|
hasLayers ? |
|
L.drawLocal.edit.toolbar.buttons.remove |
|
: L.drawLocal.edit.toolbar.buttons.removeDisabled |
|
); |
|
} |
|
} |
|
}); |
|
|
|
|
|
|
|
/** |
|
* @class L.EditToolbar.Edit |
|
* @aka EditToolbar.Edit |
|
*/ |
|
L.EditToolbar.Edit = L.Handler.extend({ |
|
statics: { |
|
TYPE: 'edit' |
|
}, |
|
|
|
// @method intialize(): void |
|
initialize: function (map, options) { |
|
L.Handler.prototype.initialize.call(this, map); |
|
|
|
L.setOptions(this, options); |
|
|
|
// Store the selectable layer group for ease of access |
|
this._featureGroup = options.featureGroup; |
|
|
|
if (!(this._featureGroup instanceof L.FeatureGroup)) { |
|
throw new Error('options.featureGroup must be a L.FeatureGroup'); |
|
} |
|
|
|
this._uneditedLayerProps = {}; |
|
|
|
// Save the type so super can fire, need to do this as cannot do this.TYPE :( |
|
this.type = L.EditToolbar.Edit.TYPE; |
|
|
|
var version = L.version.split('.'); |
|
//If Version is >= 1.2.0 |
|
if (parseInt(version[0], 10) === 1 && parseInt(version[1], 10) >= 2) { |
|
L.EditToolbar.Edit.include(L.Evented.prototype); |
|
} else { |
|
L.EditToolbar.Edit.include(L.Mixin.Events); |
|
} |
|
}, |
|
|
|
// @method enable(): void |
|
// Enable the edit toolbar |
|
enable: function () { |
|
if (this._enabled || !this._hasAvailableLayers()) { |
|
return; |
|
} |
|
this.fire('enabled', {handler: this.type}); |
|
//this disable other handlers |
|
|
|
this._map.fire(L.Draw.Event.EDITSTART, {handler: this.type}); |
|
//allow drawLayer to be updated before beginning edition. |
|
|
|
L.Handler.prototype.enable.call(this); |
|
this._featureGroup |
|
.on('layeradd', this._enableLayerEdit, this) |
|
.on('layerremove', this._disableLayerEdit, this); |
|
}, |
|
|
|
// @method disable(): void |
|
// Disable the edit toolbar |
|
disable: function () { |
|
if (!this._enabled) { |
|
return; |
|
} |
|
this._featureGroup |
|
.off('layeradd', this._enableLayerEdit, this) |
|
.off('layerremove', this._disableLayerEdit, this); |
|
L.Handler.prototype.disable.call(this); |
|
this._map.fire(L.Draw.Event.EDITSTOP, {handler: this.type}); |
|
this.fire('disabled', {handler: this.type}); |
|
}, |
|
|
|
// @method addHooks(): void |
|
// Add listener hooks for this handler |
|
addHooks: function () { |
|
var map = this._map; |
|
|
|
if (map) { |
|
map.getContainer().focus(); |
|
|
|
this._featureGroup.eachLayer(this._enableLayerEdit, this); |
|
|
|
this._tooltip = new L.Draw.Tooltip(this._map); |
|
this._tooltip.updateContent({ |
|
text: L.drawLocal.edit.handlers.edit.tooltip.text, |
|
subtext: L.drawLocal.edit.handlers.edit.tooltip.subtext |
|
}); |
|
|
|
// Quickly access the tooltip to update for intersection checking |
|
map._editTooltip = this._tooltip; |
|
|
|
this._updateTooltip(); |
|
|
|
this._map |
|
.on('mousemove', this._onMouseMove, this) |
|
.on('touchmove', this._onMouseMove, this) |
|
.on('MSPointerMove', this._onMouseMove, this) |
|
.on(L.Draw.Event.EDITVERTEX, this._updateTooltip, this); |
|
} |
|
}, |
|
|
|
// @method removeHooks(): void |
|
// Remove listener hooks for this handler |
|
removeHooks: function () { |
|
if (this._map) { |
|
// Clean up selected layers. |
|
this._featureGroup.eachLayer(this._disableLayerEdit, this); |
|
|
|
// Clear the backups of the original layers |
|
this._uneditedLayerProps = {}; |
|
|
|
this._tooltip.dispose(); |
|
this._tooltip = null; |
|
|
|
this._map |
|
.off('mousemove', this._onMouseMove, this) |
|
.off('touchmove', this._onMouseMove, this) |
|
.off('MSPointerMove', this._onMouseMove, this) |
|
.off(L.Draw.Event.EDITVERTEX, this._updateTooltip, this); |
|
} |
|
}, |
|
|
|
// @method revertLayers(): void |
|
// Revert each layer's geometry changes |
|
revertLayers: function () { |
|
this._featureGroup.eachLayer(function (layer) { |
|
this._revertLayer(layer); |
|
}, this); |
|
}, |
|
|
|
// @method save(): void |
|
// Save the layer geometries |
|
save: function () { |
|
var editedLayers = new L.LayerGroup(); |
|
this._featureGroup.eachLayer(function (layer) { |
|
if (layer.edited) { |
|
editedLayers.addLayer(layer); |
|
layer.edited = false; |
|
} |
|
}); |
|
this._map.fire(L.Draw.Event.EDITED, {layers: editedLayers}); |
|
}, |
|
|
|
_backupLayer: function (layer) { |
|
var id = L.Util.stamp(layer); |
|
|
|
if (!this._uneditedLayerProps[id]) { |
|
// Polyline, Polygon or Rectangle |
|
if (layer instanceof L.Polyline || layer instanceof L.Polygon || layer instanceof L.Rectangle) { |
|
this._uneditedLayerProps[id] = { |
|
latlngs: L.LatLngUtil.cloneLatLngs(layer.getLatLngs()) |
|
}; |
|
} else if (layer instanceof L.Circle) { |
|
this._uneditedLayerProps[id] = { |
|
latlng: L.LatLngUtil.cloneLatLng(layer.getLatLng()), |
|
radius: layer.getRadius() |
|
}; |
|
} else if (layer instanceof L.Marker || layer instanceof L.CircleMarker) { // Marker |
|
this._uneditedLayerProps[id] = { |
|
latlng: L.LatLngUtil.cloneLatLng(layer.getLatLng()) |
|
}; |
|
} |
|
} |
|
}, |
|
|
|
_getTooltipText: function () { |
|
return ({ |
|
text: L.drawLocal.edit.handlers.edit.tooltip.text, |
|
subtext: L.drawLocal.edit.handlers.edit.tooltip.subtext |
|
}); |
|
}, |
|
|
|
_updateTooltip: function () { |
|
this._tooltip.updateContent(this._getTooltipText()); |
|
}, |
|
|
|
_revertLayer: function (layer) { |
|
var id = L.Util.stamp(layer); |
|
layer.edited = false; |
|
if (this._uneditedLayerProps.hasOwnProperty(id)) { |
|
// Polyline, Polygon or Rectangle |
|
if (layer instanceof L.Polyline || layer instanceof L.Polygon || layer instanceof L.Rectangle) { |
|
layer.setLatLngs(this._uneditedLayerProps[id].latlngs); |
|
} else if (layer instanceof L.Circle) { |
|
layer.setLatLng(this._uneditedLayerProps[id].latlng); |
|
layer.setRadius(this._uneditedLayerProps[id].radius); |
|
} else if (layer instanceof L.Marker || layer instanceof L.CircleMarker) { // Marker or CircleMarker |
|
layer.setLatLng(this._uneditedLayerProps[id].latlng); |
|
} |
|
|
|
layer.fire('revert-edited', {layer: layer}); |
|
} |
|
}, |
|
|
|
_enableLayerEdit: function (e) { |
|
var layer = e.layer || e.target || e, |
|
pathOptions, poly; |
|
|
|
// Back up this layer (if haven't before) |
|
this._backupLayer(layer); |
|
|
|
if (this.options.poly) { |
|
poly = L.Util.extend({}, this.options.poly); |
|
layer.options.poly = poly; |
|
} |
|
|
|
// Set different style for editing mode |
|
if (this.options.selectedPathOptions) { |
|
pathOptions = L.Util.extend({}, this.options.selectedPathOptions); |
|
|
|
// Use the existing color of the layer |
|
if (pathOptions.maintainColor) { |
|
pathOptions.color = layer.options.color; |
|
pathOptions.fillColor = layer.options.fillColor; |
|
} |
|
|
|
layer.options.original = L.extend({}, layer.options); |
|
layer.options.editing = pathOptions; |
|
|
|
} |
|
|
|
if (layer instanceof L.Marker) { |
|
if (layer.editing) { |
|
layer.editing.enable(); |
|
} |
|
layer.dragging.enable(); |
|
layer |
|
.on('dragend', this._onMarkerDragEnd) |
|
// #TODO: remove when leaflet finally fixes their draggable so it's touch friendly again. |
|
.on('touchmove', this._onTouchMove, this) |
|
.on('MSPointerMove', this._onTouchMove, this) |
|
.on('touchend', this._onMarkerDragEnd, this) |
|
.on('MSPointerUp', this._onMarkerDragEnd, this); |
|
} else { |
|
layer.editing.enable(); |
|
} |
|
}, |
|
|
|
_disableLayerEdit: function (e) { |
|
var layer = e.layer || e.target || e; |
|
|
|
layer.edited = false; |
|
if (layer.editing) { |
|
layer.editing.disable(); |
|
} |
|
|
|
delete layer.options.editing; |
|
delete layer.options.original; |
|
// Reset layer styles to that of before select |
|
if (this._selectedPathOptions) { |
|
if (layer instanceof L.Marker) { |
|
this._toggleMarkerHighlight(layer); |
|
} else { |
|
// reset the layer style to what is was before being selected |
|
layer.setStyle(layer.options.previousOptions); |
|
// remove the cached options for the layer object |
|
delete layer.options.previousOptions; |
|
} |
|
} |
|
|
|
if (layer instanceof L.Marker) { |
|
layer.dragging.disable(); |
|
layer |
|
.off('dragend', this._onMarkerDragEnd, this) |
|
.off('touchmove', this._onTouchMove, this) |
|
.off('MSPointerMove', this._onTouchMove, this) |
|
.off('touchend', this._onMarkerDragEnd, this) |
|
.off('MSPointerUp', this._onMarkerDragEnd, this); |
|
} else { |
|
layer.editing.disable(); |
|
} |
|
}, |
|
|
|
_onMouseMove: function (e) { |
|
this._tooltip.updatePosition(e.latlng); |
|
}, |
|
|
|
_onMarkerDragEnd: function (e) { |
|
var layer = e.target; |
|
layer.edited = true; |
|
this._map.fire(L.Draw.Event.EDITMOVE, {layer: layer}); |
|
}, |
|
|
|
_onTouchMove: function (e) { |
|
var touchEvent = e.originalEvent.changedTouches[0], |
|
layerPoint = this._map.mouseEventToLayerPoint(touchEvent), |
|
latlng = this._map.layerPointToLatLng(layerPoint); |
|
e.target.setLatLng(latlng); |
|
}, |
|
|
|
_hasAvailableLayers: function () { |
|
return this._featureGroup.getLayers().length !== 0; |
|
} |
|
}); |
|
|
|
|
|
|
|
/** |
|
* @class L.EditToolbar.Delete |
|
* @aka EditToolbar.Delete |
|
*/ |
|
L.EditToolbar.Delete = L.Handler.extend({ |
|
statics: { |
|
TYPE: 'remove' // not delete as delete is reserved in js |
|
}, |
|
|
|
// @method intialize(): void |
|
initialize: function (map, options) { |
|
L.Handler.prototype.initialize.call(this, map); |
|
|
|
L.Util.setOptions(this, options); |
|
|
|
// Store the selectable layer group for ease of access |
|
this._deletableLayers = this.options.featureGroup; |
|
|
|
if (!(this._deletableLayers instanceof L.FeatureGroup)) { |
|
throw new Error('options.featureGroup must be a L.FeatureGroup'); |
|
} |
|
|
|
// Save the type so super can fire, need to do this as cannot do this.TYPE :( |
|
this.type = L.EditToolbar.Delete.TYPE; |
|
|
|
var version = L.version.split('.'); |
|
//If Version is >= 1.2.0 |
|
if (parseInt(version[0], 10) === 1 && parseInt(version[1], 10) >= 2) { |
|
L.EditToolbar.Delete.include(L.Evented.prototype); |
|
} else { |
|
L.EditToolbar.Delete.include(L.Mixin.Events); |
|
} |
|
|
|
}, |
|
|
|
// @method enable(): void |
|
// Enable the delete toolbar |
|
enable: function () { |
|
if (this._enabled || !this._hasAvailableLayers()) { |
|
return; |
|
} |
|
this.fire('enabled', {handler: this.type}); |
|
|
|
this._map.fire(L.Draw.Event.DELETESTART, {handler: this.type}); |
|
|
|
L.Handler.prototype.enable.call(this); |
|
|
|
this._deletableLayers |
|
.on('layeradd', this._enableLayerDelete, this) |
|
.on('layerremove', this._disableLayerDelete, this); |
|
}, |
|
|
|
// @method disable(): void |
|
// Disable the delete toolbar |
|
disable: function () { |
|
if (!this._enabled) { |
|
return; |
|
} |
|
|
|
this._deletableLayers |
|
.off('layeradd', this._enableLayerDelete, this) |
|
.off('layerremove', this._disableLayerDelete, this); |
|
|
|
L.Handler.prototype.disable.call(this); |
|
|
|
this._map.fire(L.Draw.Event.DELETESTOP, {handler: this.type}); |
|
|
|
this.fire('disabled', {handler: this.type}); |
|
}, |
|
|
|
// @method addHooks(): void |
|
// Add listener hooks to this handler |
|
addHooks: function () { |
|
var map = this._map; |
|
|
|
if (map) { |
|
map.getContainer().focus(); |
|
|
|
this._deletableLayers.eachLayer(this._enableLayerDelete, this); |
|
this._deletedLayers = new L.LayerGroup(); |
|
|
|
this._tooltip = new L.Draw.Tooltip(this._map); |
|
this._tooltip.updateContent({text: L.drawLocal.edit.handlers.remove.tooltip.text}); |
|
|
|
this._map.on('mousemove', this._onMouseMove, this); |
|
} |
|
}, |
|
|
|
// @method removeHooks(): void |
|
// Remove listener hooks from this handler |
|
removeHooks: function () { |
|
if (this._map) { |
|
this._deletableLayers.eachLayer(this._disableLayerDelete, this); |
|
this._deletedLayers = null; |
|
|
|
this._tooltip.dispose(); |
|
this._tooltip = null; |
|
|
|
this._map.off('mousemove', this._onMouseMove, this); |
|
} |
|
}, |
|
|
|
// @method revertLayers(): void |
|
// Revert the deleted layers back to their prior state. |
|
revertLayers: function () { |
|
// Iterate of the deleted layers and add them back into the featureGroup |
|
this._deletedLayers.eachLayer(function (layer) { |
|
this._deletableLayers.addLayer(layer); |
|
layer.fire('revert-deleted', {layer: layer}); |
|
}, this); |
|
}, |
|
|
|
// @method save(): void |
|
// Save deleted layers |
|
save: function () { |
|
this._map.fire(L.Draw.Event.DELETED, {layers: this._deletedLayers}); |
|
}, |
|
|
|
// @method removeAllLayers(): void |
|
// Remove all delateable layers |
|
removeAllLayers: function () { |
|
// Iterate of the delateable layers and add remove them |
|
this._deletableLayers.eachLayer(function (layer) { |
|
this._removeLayer({layer: layer}); |
|
}, this); |
|
this.save(); |
|
}, |
|
|
|
_enableLayerDelete: function (e) { |
|
var layer = e.layer || e.target || e; |
|
|
|
layer.on('click', this._removeLayer, this); |
|
}, |
|
|
|
_disableLayerDelete: function (e) { |
|
var layer = e.layer || e.target || e; |
|
|
|
layer.off('click', this._removeLayer, this); |
|
|
|
// Remove from the deleted layers so we can't accidentally revert if the user presses cancel |
|
this._deletedLayers.removeLayer(layer); |
|
}, |
|
|
|
_removeLayer: function (e) { |
|
var layer = e.layer || e.target || e; |
|
|
|
this._deletableLayers.removeLayer(layer); |
|
|
|
this._deletedLayers.addLayer(layer); |
|
|
|
layer.fire('deleted'); |
|
}, |
|
|
|
_onMouseMove: function (e) { |
|
this._tooltip.updatePosition(e.latlng); |
|
}, |
|
|
|
_hasAvailableLayers: function () { |
|
return this._deletableLayers.getLayers().length !== 0; |
|
} |
|
}); |
|
|
|
|
|
|
|
}(window, document)); |
|
//# sourceMappingURL=leaflet.draw-src.map
|