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(); } } });