leaflet-labeled-circle
Version:
Special type of SVG marker with a label inside and draggable around the anchor point
14 lines • 14.6 kB
JavaScript
(function(){function t(e,i,n){function r(o,s){if(!i[o]){if(!e[o]){var h=typeof require=="function"&&require;if(!s&&h)return h(o,!0);if(a)return a(o,!0);var l=new Error("Cannot find module '"+o+"'");throw l.code="MODULE_NOT_FOUND",l}var _=i[o]={exports:{}};e[o][0].call(_.exports,function(t){var i=e[o][1][t];return r(i?i:t)},_,_.exports,t,e,i,n)}return i[o].exports}var a=typeof require=="function"&&require;for(var o=0;o<n.length;o++)r(n[o]);return r}return t})()({1:[function(t,e,i){"use strict";
/**
* Leaflet SVG circle marker with detachable and draggable label and text
*
* @author Alexander Milevski <info@w8r.name>
* @license MIT
* @preserve
*/e.exports=t("./src/marker")},{"./src/marker":9}],2:[function(t,e,i){t("./src/SVG");t("./src/SVG.VML");t("./src/Canvas");t("./src/Path.Transform");t("./src/Path.Drag");e.exports=L.Path.Drag},{"./src/Canvas":3,"./src/Path.Drag":4,"./src/Path.Transform":5,"./src/SVG":7,"./src/SVG.VML":6}],3:[function(t,e,i){function n(){return true}L.Canvas.include({_resetTransformPath:function(t){if(!this._containerCopy)return;delete this._containerCopy;if(t._containsPoint_){t._containsPoint=t._containsPoint_;delete t._containsPoint_;this._requestRedraw(t)}},transformPath:function(t,e){var i=this._containerCopy;var r=this._ctx,a;var o=L.Browser.retina?2:1;var s=this._bounds;var h=s.getSize();var l=s.min;if(!i){i=this._containerCopy=document.createElement("canvas");a=i.getContext("2d");i.width=o*h.x;i.height=o*h.y;this._removePath(t);this._redraw();a.translate(o*s.min.x,o*s.min.y);a.drawImage(this._container,0,0);this._initPath(t);t._containsPoint_=t._containsPoint;t._containsPoint=n}r.save();r.clearRect(l.x,l.y,h.x*o,h.y*o);r.setTransform(1,0,0,1,0,0);r.restore();r.save();r.drawImage(this._containerCopy,0,0,h.x,h.y);r.transform.apply(r,e);this._drawing=true;t._updatePath();this._drawing=false;r.restore()}})},{}],4:[function(t,e,i){var n={mousedown:"mouseup",touchstart:"touchend",pointerdown:"touchend",MSPointerDown:"touchend"};var r={mousedown:"mousemove",touchstart:"touchmove",pointerdown:"touchmove",MSPointerDown:"touchmove"};function a(t,e){var i=t.x-e.x,n=t.y-e.y;return Math.sqrt(i*i+n*n)}L.Handler.PathDrag=L.Handler.extend({statics:{DRAGGING_CLS:"leaflet-path-draggable"},initialize:function(t){this._path=t;this._matrix=null;this._startPoint=null;this._dragStartPoint=null;this._mapDraggingWasEnabled=false},addHooks:function(){this._path.on("mousedown",this._onDragStart,this);this._path.options.className=this._path.options.className?this._path.options.className+" "+L.Handler.PathDrag.DRAGGING_CLS:L.Handler.PathDrag.DRAGGING_CLS;if(this._path._path){L.DomUtil.addClass(this._path._path,L.Handler.PathDrag.DRAGGING_CLS)}},removeHooks:function(){this._path.off("mousedown",this._onDragStart,this);this._path.options.className=this._path.options.className.replace(new RegExp("\\s+"+L.Handler.PathDrag.DRAGGING_CLS),"");if(this._path._path){L.DomUtil.removeClass(this._path._path,L.Handler.PathDrag.DRAGGING_CLS)}},moved:function(){return this._path._dragMoved},_onDragStart:function(t){var e=t.originalEvent._simulated?"touchstart":t.originalEvent.type;this._mapDraggingWasEnabled=false;this._startPoint=t.containerPoint.clone();this._dragStartPoint=t.containerPoint.clone();this._matrix=[1,0,0,1,0,0];L.DomEvent.stop(t.originalEvent);L.DomUtil.addClass(this._path._renderer._container,"leaflet-interactive");L.DomEvent.on(document,r[e],this._onDrag,this).on(document,n[e],this._onDragEnd,this);if(this._path._map.dragging.enabled()){this._path._map.dragging.disable();this._mapDraggingWasEnabled=true}this._path._dragMoved=false;if(this._path._popup){this._path._popup._close()}this._replaceCoordGetters(t)},_onDrag:function(t){L.DomEvent.stop(t);var e=t.touches&&t.touches.length>=1?t.touches[0]:t;var i=this._path._map.mouseEventToContainerPoint(e);if(t.type==="touchmove"&&!this._path._dragMoved){var n=this._dragStartPoint.distanceTo(i);if(n<=this._path._map.options.tapTolerance){return}}var r=i.x;var a=i.y;var o=r-this._startPoint.x;var s=a-this._startPoint.y;if(o||s){if(!this._path._dragMoved){this._path._dragMoved=true;this._path.fire("dragstart",t);this._path.bringToFront()}this._matrix[4]+=o;this._matrix[5]+=s;this._startPoint.x=r;this._startPoint.y=a;this._path.fire("predrag",t);this._path._transform(this._matrix);this._path.fire("drag",t)}},_onDragEnd:function(t){var e=this._path._map.mouseEventToContainerPoint(t);var i=this.moved();if(i){this._transformPoints(this._matrix);this._path._updatePath();this._path._project();this._path._transform(null);L.DomEvent.stop(t)}L.DomEvent.off(document,"mousemove touchmove",this._onDrag,this);L.DomEvent.off(document,"mouseup touchend",this._onDragEnd,this);this._restoreCoordGetters();if(i){this._path.fire("dragend",{distance:a(this._dragStartPoint,e)});var n=this._path._containsPoint;this._path._containsPoint=L.Util.falseFn;L.Util.requestAnimFrame(function(){L.DomEvent.skipped({type:"click"});this._path._containsPoint=n},this)}this._matrix=null;this._startPoint=null;this._dragStartPoint=null;this._path._dragMoved=false;if(this._mapDraggingWasEnabled){if(i)L.DomEvent.fakeStop({type:"click"});this._path._map.dragging.enable()}},_transformPoints:function(t,e){var i=this._path;var n,r,a;var o=L.point(t[4],t[5]);var s=i._map.options.crs;var h=s.transformation;var l=s.scale(i._map.getZoom());var _=s.projection;var p=h.untransform(o,l).subtract(h.untransform(L.point(0,0),l));var g=!e;i._bounds=new L.LatLngBounds;if(i._point){e=_.unproject(_.project(i._latlng)._add(p));if(g){i._latlng=e;i._point._add(o)}}else if(i._rings||i._parts){var d=i._rings||i._parts;var c=i._latlngs;e=e||c;if(!L.Util.isArray(c[0])){c=[c];e=[e]}for(n=0,r=d.length;n<r;n++){e[n]=e[n]||[];for(var u=0,f=d[n].length;u<f;u++){a=c[n][u];e[n][u]=_.unproject(_.project(a)._add(p));if(g){i._bounds.extend(c[n][u]);d[n][u]._add(o)}}}}return e},_replaceCoordGetters:function(){if(this._path.getLatLng){this._path.getLatLng_=this._path.getLatLng;this._path.getLatLng=L.Util.bind(function(){return this.dragging._transformPoints(this.dragging._matrix,{})},this._path)}else if(this._path.getLatLngs){this._path.getLatLngs_=this._path.getLatLngs;this._path.getLatLngs=L.Util.bind(function(){return this.dragging._transformPoints(this.dragging._matrix,[])},this._path)}},_restoreCoordGetters:function(){if(this._path.getLatLng_){this._path.getLatLng=this._path.getLatLng_;delete this._path.getLatLng_}else if(this._path.getLatLngs_){this._path.getLatLngs=this._path.getLatLngs_;delete this._path.getLatLngs_}}});L.Handler.PathDrag.makeDraggable=function(t){t.dragging=new L.Handler.PathDrag(t);return t};L.Path.prototype.makeDraggable=function(){return L.Handler.PathDrag.makeDraggable(this)};L.Path.addInitHook(function(){if(this.options.draggable){this.options.interactive=true;if(this.dragging){this.dragging.enable()}else{L.Handler.PathDrag.makeDraggable(this);this.dragging.enable()}}else if(this.dragging){this.dragging.disable()}})},{}],5:[function(t,e,i){
/**
* Leaflet vector features drag functionality
* @author Alexander Milevski <info@w8r.name>
* @preserve
*/
L.Path.include({_transform:function(t){if(this._renderer){if(t){this._renderer.transformPath(this,t)}else{this._renderer._resetTransformPath(this);this._update()}}return this},_onMouseClick:function(t){if(this.dragging&&this.dragging.moved()||this._map.dragging&&this._map.dragging.moved()){return}this._fireMouseEvent(t)}})},{}],6:[function(t,e,i){L.SVG.include(!L.Browser.vml?{}:{_resetTransformPath:function(t){if(t._skew){t._skew.on=false;t._path.removeChild(t._skew);t._skew=null}},transformPath:function(t,e){var i=t._skew;if(!i){i=L.SVG.create("skew");t._path.appendChild(i);i.style.behavior="url(#default#VML)";t._skew=i}var n=e[0].toFixed(8)+" "+e[1].toFixed(8)+" "+e[2].toFixed(8)+" "+e[3].toFixed(8)+" 0 0";var r=Math.floor(e[4]).toFixed()+", "+Math.floor(e[5]).toFixed()+"";var a=this._path.style;var o=parseFloat(a.left);var s=parseFloat(a.top);var h=parseFloat(a.width);var l=parseFloat(a.height);if(isNaN(o))o=0;if(isNaN(s))s=0;if(isNaN(h)||!h)h=1;if(isNaN(l)||!l)l=1;var _=(-o/h-.5).toFixed(8)+" "+(-s/l-.5).toFixed(8);i.on="f";i.matrix=n;i.origin=_;i.offset=r;i.on=true}})},{}],7:[function(t,e,i){L.SVG.include({_resetTransformPath:function(t){t._path.setAttributeNS(null,"transform","")},transformPath:function(t,e){t._path.setAttributeNS(null,"transform","matrix("+e.join(" ")+")")}})},{}],8:[function(t,e,i){(function(t){"use strict";var i=typeof window!=="undefined"?window["L"]:typeof t!=="undefined"?t["L"]:null;var n=i.CircleMarker.extend({options:{textStyle:{color:"#fff",fontSize:12,fontWeight:300},shiftY:7},initialize:function t(e,n,r){this._text=e;this._textElement=null;this._textNode=null;this._textLayer=null;i.CircleMarker.prototype.initialize.call(this,n,r)},setText:function t(e){this._text=e;if(this._textNode){this._textElement.removeChild(this._textNode)}this._textNode=document.createTextNode(this._text);this._textElement.appendChild(this._textNode);return this},getText:function t(){return this._text},bringToFront:function t(){i.CircleMarker.prototype.bringToFront.call(this);this._groupTextToPath()},bringToBack:function t(){i.CircleMarker.prototype.bringToBack.call(this);this._groupTextToPath()},_groupTextToPath:function t(){var e=this._path;var i=this._textElement;var n=e.nextSibling;var r=e.parentNode;if(i&&r){if(n&&n!==i){r.insertBefore(i,n)}else{r.appendChild(i)}}},_updatePath:function t(){i.CircleMarker.prototype._updatePath.call(this);this._updateTextPosition()},_transform:function t(e){i.CircleMarker.prototype._transform.call(this,e);this._textLayer=this._textLayer||{_path:this._textElement};if(e){this._renderer.transformPath(this._textLayer,e)}else{this._renderer._resetTransformPath(this._textLayer);this._updateTextPosition();this._textLayer=null}},onAdd:function t(e){i.CircleMarker.prototype.onAdd.call(this,e);this._initText();this._updateTextPosition();this.setStyle({});return this},_initText:function t(){this._textElement=i.SVG.create("text");this.setText(this._text);this._renderer._rootGroup.appendChild(this._textElement)},_updateTextPosition:function t(){var e=this._textElement;if(e){var n=e.getBBox();var r=this._point.subtract(i.point(n.width,-n.height+this.options.shiftY).divideBy(2));e.setAttribute("x",r.x);e.setAttribute("y",r.y);this._groupTextToPath()}},setStyle:function t(e){i.CircleMarker.prototype.setStyle.call(this,e);if(this._textElement){var n=this.options.textStyle;for(var r in n){if(n.hasOwnProperty(r)){var a=r;if(r==="color"){a="stroke"}this._textElement.style[a]=n[r]}}}},onRemove:function t(e){if(this._textElement){if(this._textElement.parentNode){this._textElement.parentNode.removeChild(this._textElement)}this._textElement=null;this._textNode=null;this._textLayer=null}return i.CircleMarker.prototype.onRemove.call(this,e)}});e.exports=i.TextCircle=n;i.textCircle=function(t,e,i){return new n(t,e,i)}}).call(this,typeof global!=="undefined"?global:typeof self!=="undefined"?self:typeof window!=="undefined"?window:{})},{}],9:[function(t,e,i){(function(i){"use strict";var n=typeof window!=="undefined"?window["L"]:typeof i!=="undefined"?i["L"]:null;var r=t("./circle");t("leaflet-path-drag");var a=n.FeatureGroup.extend({options:{getLabelText:function t(e,i){return i.properties.text},getLabelPosition:function t(e,i,r){return i.properties.labelPosition?n.latLng(i.properties.labelPosition.slice().reverse()):r},labelPositionKey:"labelPosition",markerOptions:{color:"#f00",fillOpacity:.75,draggable:true,radius:15},anchorOptions:{color:"#00f",radius:3},lineOptions:{color:"#f00",dashArray:[2,6],lineCap:"square",weight:2}},initialize:function t(e,i,r){n.Util.setOptions(this,r);this.feature=i||{type:"Feature",properties:{},geometry:{type:"Point"}};this._latlng=e;this._marker=null;this._anchor=null;this._line=null;this._initialDistance=null;this._createLayers();n.LayerGroup.prototype.initialize.call(this,[this._anchor,this._line,this._marker])},getLabelPosition:function t(){return this._marker.getLatLng()},getLatLng:function t(){return this._latlng},toGeoJSON:function t(e){var i=n.GeoJSON.getFeature(this,{type:"Point",coordinates:n.GeoJSON.latLngToCoords(this._anchor.getLatLng())});i.properties[this.options.labelPositionKey]=n.GeoJSON.latLngToCoords(this._marker.getLatLng());i.properties.text=this._marker.getText();return e?n.LabeledCircleMarker.toGeometryCollection(i,this.options.labelPositionKey):i},setText:function t(e){this._marker.setText(e);return this},_createLayers:function t(){var e=this.options;var i=e.getLabelPosition(this,this.feature,this._latlng);var o=e.getLabelText(this,this.feature);if("draggable"in e){e.markerOptions.draggable=e.draggable}this._marker=new r(o,i,n.Util.extend({interactive:this.options.interactive},a.prototype.options.markerOptions,e.markerOptions)).on("drag",this._onMarkerDrag,this).on("dragstart",this._onMarkerDragStart,this).on("dragend",this._onMarkerDragEnd,this);this._anchor=new n.CircleMarker(this._latlng,n.Util.extend({},a.prototype.options.anchorOptions,e.anchorOptions));this._line=new n.Polyline([this._latlng,this._marker.getLatLng()],n.Util.extend({},a.prototype.options.lineOptions,e.lineOptions))},_onMarkerDragStart:function t(e){this._initialDistance=n.DomEvent.getMousePosition(e).subtract(this._map.latLngToContainerPoint(this._marker.getLatLng()));this.fire("label:"+e.type,e)},_onMarkerDrag:function t(e){var i=this._map.containerPointToLatLng(n.DomEvent.getMousePosition(e)._subtract(this._initialDistance));this._line.setLatLngs([i,this._latlng]);this.fire("label:"+e.type,e)},_onMarkerDragEnd:function t(e){this._line.setLatLngs([this._marker.getLatLng(),this._latlng]);this.fire("label:"+e.type,e)},enableDragging:function t(){if(this._marker.dragging)this._marker.dragging.enable();return this},disableDragging:function t(){if(this._marker.dragging)this._marker.dragging.disable();return this}});function o(t,e){e=e||"labelPosition";var i=t.geometry.coordinates.slice();var r=t.properties[e];if(!r)throw new Error("No label position set");r=r.slice();var a=[{type:"Point",coordinates:i},{type:"LineString",coordinates:[i.slice(),r]},{type:"Point",coordinates:r.slice()},{type:"Point",coordinates:r.slice()}];return{type:"Feature",properties:n.Util.extend({},t.properties,{geometriesTypes:["anchor","connection","label","textbox"]}),bbox:t.bbox,geometry:{type:"GeometryCollection",geometries:a}}}a.toGeometryCollection=o;n.LabeledCircleMarker=a;n.labeledCircleMarker=function(t,e,i){return new a(t,e,i)};e.exports=a}).call(this,typeof global!=="undefined"?global:typeof self!=="undefined"?self:typeof window!=="undefined"?window:{})},{"./circle":8,"leaflet-path-drag":2}]},{},[1]);