angular-leaflet-measure/bundles/angular-leaflet-measure.umd.min.js

A measure component for Angular 2+ and Leaflet.

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@turf/turf"),require("leaflet"),require("@angular/common")):"function"==typeof define&&define.amd?define(["exports","@angular/core","@turf/turf","leaflet","@angular/common"],t):t(e["angular-leaflet-measure"]={},e.ng.core,e.turf,e.L,e.ng.common)}(this,function(e,t,r,o,i){"use strict";var n={vertexStyle:{radius:5,fillColor:"#74a9cf",color:"#74a9cf",weight:0,opacity:1,fillOpacity:1},previewVertexStyle:{radius:12,fillColor:"#bdc9e1",color:"#bdc9e1",weight:1,opacity:1,fillOpacity:1,interactive:!1},lineStyle:{color:"#0570b0",opacity:1},previewLineStyle:{dashArray:"5,5",opacity:.7},polygonStyle:{color:"#74a9cf",fillColor:"#74a9cf",opacity:0,weight:0,fillOpacity:.4}},a=function(){function e(){this.isEnabled=new t.EventEmitter,this.distance=0,this.area=0,this.enabled=!1,this.drawLayer=new o.LayerGroup,this.vertexLayer=new o.LayerGroup,this.lineLayer=new o.LayerGroup,this.polygonLayer=new o.LayerGroup,this.previewLineLayer=new o.LayerGroup,this.previewVertexLayer=new o.LayerGroup}return e.prototype.ngOnInit=function(){this.drawLayer=new this.L.LayerGroup,this.vertexLayer=new this.L.LayerGroup,this.lineLayer=new this.L.LayerGroup,this.polygonLayer=new this.L.LayerGroup,this.previewLineLayer=new this.L.LayerGroup,this.previewVertexLayer=new this.L.LayerGroup},e.prototype.ngAfterViewInit=function(){this.drawLayer.addLayer(this.vertexLayer),this.drawLayer.addLayer(this.lineLayer),this.drawLayer.addLayer(this.previewLineLayer),this.drawLayer.addLayer(this.previewVertexLayer),this.drawLayer.addLayer(this.polygonLayer)},Object.defineProperty(e.prototype,"distanceLabel",{get:function(){return this.formatDistanceLabel(this.distance)},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"areaLabel",{get:function(){return this.formatAreaLabel(this.area)},enumerable:!0,configurable:!0}),e.prototype.toggleEnabled=function(e){e.stopPropagation(),this.enabled=!this.enabled,this.enabled?this.enableDrawMode():this.disableDrawMode()},e.prototype.formatDistanceLabel=function(e){return e<1e3?e.toFixed(2).toString()+" m":(e/1e3).toFixed(2).toString()+" km"},e.prototype.formatAreaLabel=function(e){return e<1e4?e.toFixed(0).toString()+" m2":e<1e6?(e/1e4).toFixed(1).toString()+" ha":(e/1e6).toFixed(2).toString()+" km2"},e.prototype.enableDrawMode=function(){this.isEnabled.emit(!0),this.map.addLayer(this.drawLayer),this.addListeners()},e.prototype.disableDrawMode=function(){this.isEnabled.emit(!1),this.removeListeners(),this.map.removeLayer(this.drawLayer),this.vertexLayer.clearLayers(),this.lineLayer.clearLayers(),this.previewLineLayer.clearLayers(),this.previewVertexLayer.clearLayers(),this.polygonLayer.clearLayers(),this.distance=0},e.prototype.disable=function(){this.enabled=!1,this.disableDrawMode()},e.prototype.showInfoBox=function(){return this.enabled},e.prototype.addVertex=function(e){var t=this,r=this.createVertexFromLatLng(e);this.vertexLayer.addLayer(this.L.geoJson(r,{pointToLayer:function(e,r){return t.L.circleMarker(r,n.vertexStyle)}}))},e.prototype.createVertexFromLatLng=function(e){return{type:"Point",coordinates:[e.lng,e.lat]}},e.prototype.drawLine=function(){var e=this,t=this.vertexLayer.toGeoJSON().features,r=this.createLine(t),o=this.L.geoJson(r,{style:n.lineStyle});this.lineLayer.clearLayers(),this.lineLayer.addLayer(o),o.eachLayer(function(t){t.bindTooltip(e.formatDistanceLabel(t.feature.geometry.distance),{permanent:!0,className:"measure-distance-tooltip",direction:"center"}).openTooltip()})},e.prototype.createLine=function(e){var t={type:"LineString",coordinates:[]},r=[];if(e.length>1){for(var o=0;o<e.length-1;o++){var i=JSON.parse(JSON.stringify(t));i.coordinates.push(e[o].geometry.coordinates,e[o+1].geometry.coordinates),i.distance=this.measureLine(i.coordinates),r.push(i)}e.forEach(function(e){return t.coordinates.push(e.geometry.coordinates)}),this.distance=this.measureLine(e)}return{type:"FeatureCollection",features:r}},e.prototype.measureLine=function(e){for(var t=0,o=0;o<e.length-1;o++)t+=r.distance(e[o],e[o+1],{units:"meters"});return t},e.prototype.drawPreviewLine=function(e){var t={type:"LineString",coordinates:[[e.lng,e.lat]]},r=this.vertexLayer.toGeoJSON().features;if(r.length>=1){var o=r[r.length-1];t.coordinates.unshift(o.geometry.coordinates)}this.previewLineLayer.clearLayers(),this.previewLineLayer.addLayer(this.L.geoJson(t,{style:n.previewLineStyle}))},e.prototype.drawPreviewVertex=function(e){var t=this,r=this.createVertexFromLatLng(e);this.previewVertexLayer.clearLayers(),this.previewVertexLayer.addLayer(this.L.geoJson(r,{pointToLayer:function(e,r){return t.L.circleMarker(r,n.previewVertexStyle)}}))},e.prototype.drawPolygon=function(){this.polygonLayer.clearLayers();var e=0,t=this.vertexLayer.toGeoJSON().features,r=this.L.geoJson(this.createLine(t));if(t.length>3&&this.isItAPolygon(r.toGeoJSON())){var o=this.createPolygonFromLineFeatureCollection(r.toGeoJSON());e=this.calculatePolygonArea(o);var i=this.L.geoJson(o,{style:n.polygonStyle});this.polygonLayer.addLayer(i),i.bindTooltip(this.formatAreaLabel(e),{permanent:!0,className:"measure-area-tooltip",direction:"center"}).openTooltip()}this.area=e},e.prototype.isItAPolygon=function(e){var t=!1,o=r.combine(e).features[0],i=o.geometry.coordinates[0][0],n=o.geometry.coordinates[o.geometry.coordinates.length-1][1];return r.distance(i,n,{units:"meters"})<=.025*this.distance&&(t=!0),t},e.prototype.calculatePolygonArea=function(e){return r.area(e)},e.prototype.createPolygonFromLineFeatureCollection=function(e){var t=r.combine(e).features[0],o={coordinates:[],type:"LineString"};return t.geometry.coordinates.forEach(function(e){return o.coordinates.push(e[0],e[1])}),r.lineToPolygon(o)},e.prototype.onMouseMove=function(e){this.drawPreviewVertex(e.latlng)},e.prototype.onClick=function(e){this.addVertex(e.latlng),this.drawLine(),this.drawPolygon()},e.prototype.addListeners=function(){this.map.on("click",this.onClick,this),this.map.on("mousemove",this.onMouseMove,this)},e.prototype.removeListeners=function(){this.map.off("click",this.onClick,this),this.map.off("mousemove",this.onMouseMove,this)},e}();a.decorators=[{type:t.Component,args:[{selector:"app-measure",template:'<div class="measure-container">\n  <button (click)="toggleEnabled($event)" type="button" name="button">\n    Afstand meten\n  </button>\n  <div *ngIf="showInfoBox()" class="measure-infobox">\n    <span (click)="disable()" class="close-button">\n      x\n    </span>\n    <h4 class="measure-infobox-title">\n      Afstand meten\n    </h4>\n    <p>\n      Klik op de kaart om te meten.\n    </p>\n    <p *ngIf="distance > 0">\n      Totale lengte: {{distanceLabel}}\n    </p>\n    <p *ngIf="area > 0">\n      Oppervlakte: {{areaLabel}}\n    </p>\n  </div>\n</div>\n',styles:[".measure-container{z-index:401;position:absolute;top:10px;right:10px}h4,p{margin:0 0 5px}h4{font-size:15px}button{border:2px solid rgba(0,0,0,.2);background:#fff;padding:10px;border-radius:2px;position:relative;font-weight:700}button:hover{background:#eee;cursor:pointer}.measure-infobox{background:#fff;width:160px;margin:0 auto;z-index:500;position:absolute;top:0;right:0;padding:10px 10px 3px;border:2px solid rgba(0,0,0,.2)}.close-button{position:absolute;top:0;right:7px;font-weight:700;font-size:15px;color:#ccc}.close-button:hover{color:#111;cursor:pointer}.measure-distance-tooltip{border-radius:0!important;padding-top:2px;padding-bottom:2px}.measure-area-tooltip{font-weight:700}"]}]}],a.ctorParameters=function(){return[]},a.propDecorators={map:[{type:t.Input}],L:[{type:t.Input}],isEnabled:[{type:t.Output}]};var s=function(){};s.decorators=[{type:t.NgModule,args:[{imports:[i.CommonModule],declarations:[a],exports:[a]}]}],s.ctorParameters=function(){return[]},e.MeasureModule=s,e.ɵa=a,Object.defineProperty(e,"__esModule",{value:!0})});
//# sourceMappingURL=angular-leaflet-measure.umd.min.js.map