├── .babelrc ├── .gitignore ├── .npmignore ├── .travis.yml ├── CHANGELOG.md ├── LICENSE ├── README.md ├── __tests__ ├── MeasureControl.test.js └── enzyme.js ├── dist ├── react-leaflet-measure.js └── react-leaflet-measure.min.js ├── docs ├── App.jsx ├── _config.yml ├── css │ └── business-frontpage.css ├── index.html └── vendor │ ├── bootstrap │ ├── css │ │ ├── bootstrap.css │ │ ├── bootstrap.css.map │ │ ├── bootstrap.min.css │ │ └── bootstrap.min.css.map │ └── js │ │ ├── bootstrap.bundle.js │ │ ├── bootstrap.bundle.js.map │ │ ├── bootstrap.bundle.min.js │ │ ├── bootstrap.bundle.min.js.map │ │ ├── bootstrap.js │ │ ├── bootstrap.js.map │ │ ├── bootstrap.min.js │ │ └── bootstrap.min.js.map │ └── jquery │ ├── jquery.js │ ├── jquery.min.js │ ├── jquery.min.map │ ├── jquery.slim.js │ ├── jquery.slim.min.js │ └── jquery.slim.min.map ├── example ├── docsV1.html ├── docsV2.html ├── react-leaflet-v1.html └── react-leaflet-v2.html ├── package-lock.json ├── package.json ├── src ├── MeasureControl.js ├── index.js └── leaflet-measure.css └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { "presets": ["env", "react"] } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | lib/ 3 | coverage/ -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | #Directories 2 | node_modules/ 3 | lib/ 4 | src/ 5 | docs/ 6 | example/ 7 | coverage/ 8 | __tests__/ 9 | 10 | #Files 11 | .babelrc 12 | .npmignore 13 | .gitignore 14 | .travis.yml 15 | .vscode 16 | webpack.config.js -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: false 2 | language: node_js 3 | cache: 4 | directories: 5 | - node_modules 6 | branches: 7 | only: 8 | - master 9 | notifications: 10 | email: false 11 | before_script: 12 | - npm run build 13 | script: 14 | - npm run test 15 | before_install: 16 | - npm i -g npm@6.4.1 17 | node_js: 18 | - "8" -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | react-leaflet-measure Changelog 2 | ========================= 3 | 4 | ## 2.1.1 (2019-02-07) 5 | 6 | * Add website 7 | * Update README 8 | * Update package dependencies 9 | 10 | 11 | ## 2.0.7 (2018-12-29) 12 | 13 | * Add example for react-leaflet v1 14 | * Update README 15 | * Update package dependencies 16 | 17 | 18 | ## 2.0.5 (2018-12-25) 19 | 20 | * Make compatible with `react-leaflet@2.x` 21 | * Update dependencies 22 | * Add example 23 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy 4 | of this software and associated documentation files (the "Software"), to deal 5 | in the Software without restriction, including without limitation the rights 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | copies of the Software, and to permit persons to whom the Software is 8 | furnished to do so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in 11 | all copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | THE SOFTWARE. 20 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-leaflet-measure 2 | 3 | [![version](https://img.shields.io/npm/v/react-leaflet-measure.svg?style=plastic)](http://npm.im/react-leaflet-measure) 4 | [![react-leaflet compatibility](https://img.shields.io/npm/dependency-version/react-leaflet-measure/peer/react-leaflet.svg?style=plastic)](https://github.com/mhasbie/react-leaflet-measure) 5 | [![travis build](https://img.shields.io/travis/mhasbie/react-leaflet-measure.svg?style=plastic)](https://travis-ci.org/mhasbie/react-leaflet-measure) 6 | [![dependencies](https://img.shields.io/david/mhasbie/react-leaflet-measure.svg?style=plastic)](https://david-dm.org/mhasbie/react-leaflet-measure) 7 | [![peer dependencies](https://img.shields.io/david/peer/mhasbie/react-leaflet-measure.svg?style=plastic)](https://david-dm.org/mhasbie/react-leaflet-measure?type=peer) 8 | [![issues](https://img.shields.io/github/issues/mhasbie/react-leaflet-measure.svg?style=plastic)](https://github.com/mhasbie/react-leaflet-measure/issues) 9 | [![downloads](https://img.shields.io/npm/dt/react-leaflet-measure.svg?style=plastic)](http://npm-stat.com/charts.html?package=react-leaflet-measure&from=2018-01-01) 10 | [![MIT License](https://img.shields.io/npm/l/react-leaflet-measure.svg?style=plastic)](http://opensource.org/licenses/MIT) 11 | 12 | 13 | React wrapper of [leaflet-measure](https://github.com/ljagis/leaflet-measure) 14 | for [react-leaflet](https://github.com/PaulLeCam/react-leaflet). 15 | 16 | Coordinate, linear, and area measure control for [Leaflet](http://leafletjs.com) maps. Extends [L.Control](http://leafletjs.com/reference.html#control). 17 | 18 | *Tested with Leaflet 1.3.4 and React-Leaflet 1.9.1, React-Leaflet 2.1.4* 19 | 20 | 21 | ## Demos 22 | 23 | [![Demo](http://ljagis.github.io/leaflet-measure/assets/leaflet-measure.png)](http://ljagis.github.io/leaflet-measure) 24 | 25 | [`Demo Page`](https://mhasbie.github.io/react-leaflet-measure/) 26 | 27 | ## Installation 28 | 29 | ### Install via NPM 30 | 31 | ```bash 32 | npm install react-leaflet-measure --save 33 | ``` 34 | 35 | ## Usage example 36 | 37 | ```javascript 38 | import { Map, TileLayer } from 'react-leaflet'; 39 | import MeasureControl from 'react-leaflet-measure'; 40 | 41 | const measureOptions = { 42 | position: 'topright', 43 | primaryLengthUnit: 'meters', 44 | secondaryLengthUnit: 'kilometers', 45 | primaryAreaUnit: 'sqmeters', 46 | secondaryAreaUnit: 'acres', 47 | activeColor: '#db4a29', 48 | completedColor: '#9b2d14' 49 | }; 50 | 51 | 52 | 56 | 57 | 58 | 59 | ``` 60 | 61 | ### Usage with React-Leaflet v2 62 | 63 | This plugin is compatible with version 2 of React-Leaflet, but you have to wrap the `MeasureControl` component using the [`withLeaflet` higher-order component](https://react-leaflet.js.org/docs/en/context.html) to give it access to the new context mechanism. For example: 64 | 65 | ```javascript 66 | import { Map, withLeaflet } from 'react-leaflet'; 67 | 68 | // Import to a different variable so you don't have to update the rest of your codes 69 | import MeasureControlDefault from 'react-leaflet-measure'; 70 | 71 | // Wrap our new variable and assign it to the one we used before. The rest of the codes stays the same. 72 | const MeasureControl = withLeaflet(MeasureControlDefault); 73 | 74 | 75 | 79 | 80 | 81 | 82 | ``` 83 | 84 | ### Control options 85 | 86 | Any props passed to MeasureControl are passed down to leaflet-measure. 87 | 88 | Refer [leaflet-measure control options](https://github.com/ljagis/leaflet-measure#control-options). 89 | 90 | 91 | ## Events 92 | 93 | | Event | Data | Description 94 | | --- | --- | --- 95 | | onMeasurestart | this | Fired when measurement starts. 96 | | onMeasurefinish | result | Fired when measurement finishes with results of the measurement. 97 | 98 | 99 | # Credits 100 | Credits goes to all the [contributors](https://github.com/ljagis/leaflet-measure/graphs/contributors) for the original work. 101 | 102 | 103 | # License 104 | 105 | MIT License 106 | -------------------------------------------------------------------------------- /__tests__/MeasureControl.test.js: -------------------------------------------------------------------------------- 1 | /* global describe, expect, it, jest */ 2 | 3 | import React, { createRef } from 'react'; 4 | import { mount } from './enzyme'; 5 | import 'jest-enzyme'; 6 | 7 | import { Map, TileLayer, withLeaflet } from 'react-leaflet'; 8 | import MeasureControlDefault from '../dist/react-leaflet-measure.min.js'; 9 | const MeasureControl = withLeaflet(MeasureControlDefault); 10 | 11 | describe('MeasureControl', () => { 12 | 13 | it('Should instantiate a measurement control with given parameters', () => { 14 | 15 | const mapOptions = { 16 | center: [0, 0], 17 | zoom: 1, 18 | minZoom: 1, 19 | maxZoom: 22, 20 | }; 21 | const measureOptions = { 22 | position: 'topright', 23 | primaryLengthUnit: 'meters', 24 | secondaryLengthUnit: 'kilometers', 25 | primaryAreaUnit: 'sqmeters', 26 | secondaryAreaUnit: 'acres', 27 | activeColor: '#db4a29', 28 | completedColor: '#9b2d14' 29 | }; 30 | 31 | const measureControlRef = createRef(); 32 | 33 | const wrapper = mount( 34 | 35 | 36 | 37 | 38 | ); 39 | 40 | expect(wrapper).not.toBeEmptyRender(); 41 | expect(measureControlRef.current.leafletElement.options.position).toEqual('topright'); 42 | }) 43 | }) -------------------------------------------------------------------------------- /__tests__/enzyme.js: -------------------------------------------------------------------------------- 1 | import Enzyme from 'enzyme'; 2 | import Adapter from 'enzyme-adapter-react-16'; 3 | 4 | // Configure Enzyme for the appropriate React adapter 5 | Enzyme.configure({ adapter: new Adapter() }); 6 | 7 | // Re-export all enzyme exports 8 | export * from 'enzyme'; 9 | -------------------------------------------------------------------------------- /dist/react-leaflet-measure.min.js: -------------------------------------------------------------------------------- 1 | !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react-leaflet"),require("leaflet")):"function"==typeof define&&define.amd?define([,],t):"object"==typeof exports?exports["react-leaflet-measure"]=t(require("react-leaflet"),require("leaflet")):e.ReactLeafletMeasure=t(e.ReactLeaflet,e.L)}(window,function(e,t){return function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=0)}([function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n,o=r(1),a=(n=o)&&n.__esModule?n:{default:n};t.default=a.default},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n,o=function(){function e(e,t){for(var r=0;r-1&&e%1==0&&e<=r}},function(e,t){var r=9007199254740991,n=/^(?:0|[1-9]\d*)$/;e.exports=function(e,t){var o=typeof e;return!!(t=null==t?r:t)&&("number"==o||"symbol"!=o&&n.test(e))&&e>-1&&e%1==0&&e/g},function(e,t,r){var n=r(75);e.exports=function(e){return null==e?"":n(e)}},function(e,t,r){"use strict";function n(e,t){var r,n,o,a,i,s,u,l,c,p,f=0,d="FeatureCollection"===e.type,h="Feature"===e.type,A=d?e.features.length:1;for(r=0;r2&&e.push(e[0]);var n=(0,i.default)(e);1===e.length?(t=L.circleMarker(e[0],this._symbols.getSymbol("resultPoint")),r=A({model:n})):2===e.length?(t=L.polyline(e,this._symbols.getSymbol("resultLine")),r=m({model:L.extend({},n,this._getMeasurementDisplayStrings(n))})):(t=L.polygon(e,this._symbols.getSymbol("resultArea")),r=g({model:L.extend({},n,this._getMeasurementDisplayStrings(n))}));var o=L.DomUtil.create("div","");o.innerHTML=r;var a=(0,s.selectOne)(".js-zoomto",o);a&&(L.DomEvent.on(a,"click",L.DomEvent.stop),L.DomEvent.on(a,"click",function(){t.getBounds?this._map.fitBounds(t.getBounds(),{padding:[20,20],maxZoom:17}):t.getLatLng&&this._map.panTo(t.getLatLng())},this));var u=(0,s.selectOne)(".js-deletemarkup",o);u&&(L.DomEvent.on(u,"click",L.DomEvent.stop),L.DomEvent.on(u,"click",function(){this._layer.removeLayer(t)},this)),t.addTo(this._layer),t.bindPopup(o,this.options.popupOptions),t.getBounds?t.openPopup(t.getBounds().getCenter()):t.getLatLng&&t.openPopup(t.getLatLng())}},_handleMeasureClick:function(e){var t=this._map.mouseEventToLatLng(e.originalEvent),r=this._latlngs[this._latlngs.length-1],n=this._symbols.getSymbol("measureVertex");r&&t.equals(r)||(this._latlngs.push(t),this._addMeasureArea(this._latlngs),this._addMeasureBoundary(this._latlngs),this._measureVertexes.eachLayer(function(e){e.setStyle(n),e._path&&e._path.setAttribute("class",n.className)}),this._addNewVertex(t),this._measureBoundary&&this._measureBoundary.bringToFront(),this._measureVertexes.bringToFront()),this._updateResults(),this._updateMeasureStartedWithPoints()},_handleMapMouseOut:function(){this._measureDrag&&(this._layer.removeLayer(this._measureDrag),this._measureDrag=null)},_addNewVertex:function(e){L.circleMarker(e,this._symbols.getSymbol("measureVertexActive")).addTo(this._measureVertexes)},_addMeasureArea:function(e){e.length<3?this._measureArea&&(this._layer.removeLayer(this._measureArea),this._measureArea=null):this._measureArea?this._measureArea.setLatLngs(e):this._measureArea=L.polygon(e,this._symbols.getSymbol("measureArea")).addTo(this._layer)},_addMeasureBoundary:function(e){e.length<2?this._measureBoundary&&(this._layer.removeLayer(this._measureBoundary),this._measureBoundary=null):this._measureBoundary?this._measureBoundary.setLatLngs(e):this._measureBoundary=L.polyline(e,this._symbols.getSymbol("measureBoundary")).addTo(this._layer)}}),L.Map.mergeOptions({measureControl:!1}),L.Map.addInitHook(function(){this.options.measureControl&&(this.measureControl=(new L.Control.Measure).addTo(this))}),L.control.measure=function(e){return new L.Control.Measure(e)}},function(e,t){},function(e,t,r){var n=r(32),o=r(62),a=r(65),i=r(66),s=r(67),u=r(22),l=r(15),c=r(68),p=r(25),f=r(71),d=r(26),h=/\b__p \+= '';/g,A=/\b(__p \+=) '' \+/g,m=/(__e\(.*?\)|\b__t\)) \+\n'';/g,g=/\$\{([^\\}]*(?:\\.[^\\}]*)*)\}/g,v=/($^)/,b=/['\n\r\u2028\u2029\\]/g;e.exports=function(e,t,r){var y=f.imports._.templateSettings||f;r&&l(e,t,r)&&(t=void 0),e=d(e),t=n({},t,y,i);var x,w,M=n({},t.imports,y.imports,i),k=c(M),_=a(M,k),O=0,E=t.interpolate||v,C="__p += '",L=RegExp((t.escape||v).source+"|"+E.source+"|"+(E===p?g:v).source+"|"+(t.evaluate||v).source+"|$","g"),j="sourceURL"in t?"//# sourceURL="+t.sourceURL+"\n":"";e.replace(L,function(t,r,n,o,a,i){return n||(n=o),C+=e.slice(O,i).replace(b,s),r&&(x=!0,C+="' +\n__e("+r+") +\n'"),a&&(w=!0,C+="';\n"+a+";\n__p += '"),n&&(C+="' +\n((__t = ("+n+")) == null ? '' : __t) +\n'"),O=i+t.length,t}),C+="';\n";var P=t.variable;P||(C="with (obj) {\n"+C+"\n}\n"),C=(w?C.replace(h,""):C).replace(A,"$1").replace(m,"$1;"),C="function("+(P||"obj")+") {\n"+(P?"":"obj || (obj = {});\n")+"var __t, __p = ''"+(x?", __e = _.escape":"")+(w?", __j = Array.prototype.join;\nfunction print() { __p += __j.call(arguments, '') }\n":";\n")+C+"return __p\n}";var B=o(function(){return Function(k,j+"return "+C).apply(void 0,_)});if(B.source=C,u(B))throw B;return B}},function(e,t,r){var n=r(33),o=r(44),a=r(50),i=o(function(e,t,r,o){n(t,a(t),e,o)});e.exports=i},function(e,t,r){var n=r(34),o=r(8);e.exports=function(e,t,r,a){var i=!r;r||(r={});for(var s=-1,u=t.length;++s1?r[a-1]:void 0,s=a>2?r[2]:void 0;for(i=e.length>3&&"function"==typeof i?(a--,i):void 0,s&&o(r[0],r[1],s)&&(i=a<3?void 0:i,a=1),t=Object(t);++n0){if(++t>=r)return arguments[0]}else t=0;return e.apply(void 0,arguments)}}},function(e,t,r){var n=r(18),o=r(60),a=r(7);e.exports=function(e){return a(e)?n(e,!0):o(e)}},function(e,t){e.exports=function(e,t){for(var r=-1,n=Array(e);++r"']/g,i=RegExp(a.source);e.exports=function(e){return(e=o(e))&&i.test(e)?e.replace(a,n):e}},function(e,t,r){var n=r(74)({"&":"&","<":"<",">":">",'"':""","'":"'"});e.exports=n},function(e,t){e.exports=function(e){return function(t){return null==e?void 0:e[t]}}},function(e,t,r){var n=r(4),o=r(24),a=r(19),i=r(76),s=1/0,u=n?n.prototype:void 0,l=u?u.toString:void 0;e.exports=function e(t){if("string"==typeof t)return t;if(a(t))return o(t,e)+"";if(i(t))return l?l.call(t):"";var r=t+"";return"0"==r&&1/t==-s?"-0":r}},function(e,t,r){var n=r(0),o=r(1),a="[object Symbol]";e.exports=function(e){return"symbol"==typeof e||o(e)&&n(e)==a}},function(e,t){e.exports=/<%-([\s\S]+?)%>/g},function(e,t){e.exports=/<%([\s\S]+?)%>/g},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={acres:{factor:24711e-8,display:"acres",decimals:2},feet:{factor:3.2808,display:"feet",decimals:0},kilometers:{factor:.001,display:"kilometers",decimals:2},hectares:{factor:1e-4,display:"hectares",decimals:2},meters:{factor:1,display:"meters",decimals:0},miles:{factor:3.2808/5280,display:"miles",decimals:2},sqfeet:{factor:10.7639,display:"sqfeet",decimals:0},sqmeters:{factor:1,display:"sqmeters",decimals:0},sqmiles:{factor:3.86102e-7,display:"sqmiles",decimals:2}}},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function o(e){return e<10?"0"+e.toString():e.toString()}function a(e,t,r){var n=Math.abs(e),a=Math.floor(n),i=Math.floor(60*(n-a)),s=Math.round(3600*(n-a-i/60)*100)/100,u=n===e?t:r;return o(a)+"° "+o(i)+"' "+o(s)+'" '+u}Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){var t=e[e.length-1],r=e.map(function(e){return[e.lat,e.lng]}),n=L.polyline(r),o=L.polygon(r),u=1e3*(0,i.default)(n.toGeoJSON(),{units:"kilometers"}),l=(0,s.default)(o.toGeoJSON());return{lastCoord:{dd:{x:t.lng,y:t.lat},dms:{x:a(t.lng,"E","W"),y:a(t.lat,"N","S")}},length:u,area:l}};var i=n(r(81)),s=n(r(84))},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=r(82),o=r(27),a=r(3);t.default=function(e,t){if(t=t||{},!Object(a.d)(t))throw new Error("options is invalid");if(!e)throw new Error("geojson is required");return Object(o.b)(e,function(e,r){var o=r.geometry.coordinates;return e+Object(n.a)(o[0],o[1],t)},0)}},function(e,t,r){"use strict";var n=r(83),o=r(3);t.a=function(e,t,r){if(r=r||{},!Object(o.d)(r))throw new Error("options is invalid");var a=r.units,i=Object(n.a)(e),s=Object(n.a)(t),u=Object(o.a)(s[1]-i[1]),l=Object(o.a)(s[0]-i[0]),c=Object(o.a)(i[1]),p=Object(o.a)(s[1]),f=Math.pow(Math.sin(u/2),2)+Math.pow(Math.sin(l/2),2)*Math.cos(c)*Math.cos(p);return Object(o.g)(2*Math.atan2(Math.sqrt(f),Math.sqrt(1-f)),a)}},function(e,t,r){"use strict";function n(e){if(!e)throw new Error("coord is required");if("Feature"===e.type&&null!==e.geometry&&"Point"===e.geometry.type)return e.geometry.coordinates;if("Point"===e.type)return e.coordinates;if(Array.isArray(e)&&e.length>=2&&void 0===e[0].length&&void 0===e[1].length)return e;throw new Error("coord must be GeoJSON Point or an Array of numbers")}r.d(t,"a",function(){return n}),r(3)},function(e,t,r){"use strict";function n(e){var t=0;if(e&&e.length>0){t+=Math.abs(o(e[0]));for(var r=1;r2){for(u=0;u1&&void 0!==arguments[1]?arguments[1]:2,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:".",n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:",",o=e<0?"-":"",a=Math.abs(+e||0),i=parseInt(a.toFixed(t),10)+"",s=i.length>3?i.length%3:0;return[o,s?i.substr(0,s)+n:"",i.substr(s).replace(/(\d{3})(?=\d)/g,"$1"+n),t?""+r+Math.abs(a-i).toFixed(t).slice(2):""].join("")}},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=r(89);Object.defineProperty(t,"controlTemplate",{enumerable:!0,get:function(){return n(o).default}});var a=r(90);Object.defineProperty(t,"resultsTemplate",{enumerable:!0,get:function(){return n(a).default}});var i=r(91);Object.defineProperty(t,"pointPopupTemplate",{enumerable:!0,get:function(){return n(i).default}});var s=r(92);Object.defineProperty(t,"linePopupTemplate",{enumerable:!0,get:function(){return n(s).default}});var u=r(93);Object.defineProperty(t,"areaPopupTemplate",{enumerable:!0,get:function(){return n(u).default}})},function(e,t,r){e.exports='Measure

Measure distances and areas

Measure distances and areas

Start creating a measurement by adding points to the map

'},function(e,t,r){e.exports='

Last point

{{ model.lastCoord.dms.y }} / {{ model.lastCoord.dms.x }}

{{ numberFormat(model.lastCoord.dd.y, 6) }} / {{ numberFormat(model.lastCoord.dd.x, 6) }}

<% if (model.pointCount > 1) { %>

Path distance {{ model.lengthDisplay }}

<% } %> <% if (model.pointCount > 2) { %>

Area {{ model.areaDisplay }}

<% } %> '},function(e,t,r){e.exports='

Point location

{{ model.lastCoord.dms.y }} / {{ model.lastCoord.dms.x }}

{{ numberFormat(model.lastCoord.dd.y, 6) }} / {{ numberFormat(model.lastCoord.dd.x, 6) }}

'},function(e,t,r){e.exports='

Linear measurement

{{ model.lengthDisplay }}

'},function(e,t,r){e.exports='

Area measurement

{{ model.areaDisplay }}

{{ model.lengthDisplay }} Perimeter

'}])},function(e,t,r){var n=r(6);"string"==typeof n&&(n=[[e.i,n,""]]);var o={hmr:!0,transform:void 0,insertInto:void 0};r(8)(n,o);n.locals&&(e.exports=n.locals)},function(e,t,r){(e.exports=r(7)(!1)).push([e.i,".leaflet-control-measure h3,\r\n.leaflet-measure-resultpopup h3 {\r\n margin: 0 0 12px;\r\n padding-bottom: 10px;\r\n border-bottom: 1px solid #ddd\r\n}\r\n\r\n.leaflet-control-measure p,\r\n.leaflet-measure-resultpopup p {\r\n margin: 10px 0 0;\r\n line-height: 1.5em\r\n}\r\n\r\n.leaflet-control-measure p:first-child,\r\n.leaflet-measure-resultpopup p:first-child {\r\n margin-top: 0\r\n}\r\n\r\n.leaflet-control-measure .tasks,\r\n.leaflet-measure-resultpopup .tasks {\r\n margin: 12px 0 0;\r\n padding: 10px 0 0;\r\n border-top: 1px solid #ddd;\r\n text-align: right;\r\n list-style: none;\r\n list-style-image: none\r\n}\r\n\r\n.leaflet-control-measure .tasks li,\r\n.leaflet-measure-resultpopup .tasks li {\r\n display: inline;\r\n margin: 0 10px 0 0\r\n}\r\n\r\n.leaflet-control-measure .tasks li:last-child,\r\n.leaflet-measure-resultpopup .tasks li:last-child {\r\n margin-right: 0\r\n}\r\n\r\n.leaflet-control-measure .coorddivider,\r\n.leaflet-measure-resultpopup .coorddivider {\r\n color: #999\r\n}\r\n\r\n.leaflet-control-measure {\r\n max-width: 280px;\r\n background: #fff\r\n}\r\n\r\n/* assets/rulers.png */\r\n.leaflet-control-measure .leaflet-control-measure-toggle,\r\n.leaflet-control-measure .leaflet-control-measure-toggle:hover {\r\n background-size: 14px 14px;\r\n background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAGJJREFUOI1jYGBgOM3AwPAfCTMwMDA8QxPDhT8xoAlIM5AG/jMi2QoDjKQYwITEkSFRM9w2qrkA5oqBc8EIDYNHDAzkp0I4QE/fMDF5YvnoBsiTwscWBiQBJgYGhpMU6D8CAJDrOVecOVsbAAAAAElFTkSuQmCC');\r\n border: 0;\r\n border-radius: 4px;\r\n text-indent: 100%;\r\n white-space: nowrap;\r\n overflow: hidden\r\n}\r\n\r\n.leaflet-touch .leaflet-control-measure .leaflet-control-measure-toggle,\r\n.leaflet-touch .leaflet-control-measure .leaflet-control-measure-toggle:hover {\r\n border-radius: 2px\r\n}\r\n\r\n/* assets/rulers_@2X.png */\r\n.leaflet-retina .leaflet-control-measure .leaflet-control-measure-toggle,\r\n.leaflet-retina .leaflet-control-measure .leaflet-control-measure-toggle:hover {\r\n background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAALdJREFUWIXtl0EKwkAMRZ+iR1LwCC5ceekKHsSqN3ARF5pFi41lmGQU8iDQkkB/0k/aATgCV0AmQjkbNaXRAdy+FCmdgwDBSGzwRQBZGgUrZwEALBiOearGAwGwJhDCJwFbXl1rhAsIefdKesASoF5oJiD3QAi5B9IDuQeaeyDU8SNOwEOVRP4LDvirPSAe9yXd7oB1rXzJBKrm50ygasdj5kzAlZ/4FtwbPr8HOLwvPE6+VlyA/ROEjYEpRhLQZgAAAABJRU5ErkJggg==');\r\n}\r\n\r\n.leaflet-touch .leaflet-control-measure .leaflet-control-measure-toggle,\r\n.leaflet-touch .leaflet-control-measure .leaflet-control-measure-toggle:hover {\r\n background-size: 16px 16px\r\n}\r\n\r\n.leaflet-control-measure .startprompt h3 {\r\n margin-bottom: 10px\r\n}\r\n\r\n.leaflet-control-measure .startprompt .tasks {\r\n margin-top: 0;\r\n padding-top: 0;\r\n border-top: 0;\r\n text-align: left\r\n}\r\n\r\n.leaflet-control-measure .leaflet-control-measure-interaction {\r\n padding: 10px 12px\r\n}\r\n\r\n.leaflet-control-measure .results .group {\r\n margin-top: 10px;\r\n padding-top: 10px;\r\n border-top: 1px dotted #eaeaea\r\n}\r\n\r\n.leaflet-control-measure .results .group:first-child {\r\n margin-top: 0;\r\n padding-top: 0;\r\n border-top: 0\r\n}\r\n\r\n.leaflet-control-measure .results .heading {\r\n margin-right: 5px;\r\n color: #999\r\n}\r\n\r\n/* assets/start.png */\r\n.leaflet-control-measure a.start {\r\n display: inline;\r\n width: auto;\r\n height: auto;\r\n padding-left: 20px;\r\n margin-right: 4px;\r\n line-height: 1em;\r\n border: 0;\r\n text-align: left;\r\n background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAY1JREFUKJF9kL9PEwEcxd/3y+XaXrwKCZsx4uLQiQQRZHOUmYEU45mL1CCVpH+JwxEx6CB6HfixM7KQ8sM2TB2cHHRzMCTt2cbe+zrUSxsHP+PLey/v+xX8ZaXWKHgddxNAmcYSACjQNpW69jtv9vYe9QBAAKActu44TnpMwlXRyEQuhzW2IMAWgcSZ4OMPOw++yUqtUfC6TgvEl8QflI9eL/3CGJVK0+uB+4TencoV59TruJsk3MwcvLiaCZ635rLA7u79hIm7qqR/3bt+qQDKKhplzTROm6aNp+ufq1kojme7prpNsTWlsTTanKEuRKIn683DtVfnxeGxcqHUkuI/iBj/1RwF2gZbAHCWiST7KlL79G5+Z2TlQwBtNZW6AFuVStMDgHSAHxOwxY9j5jA89QGpQiSWIDjJpzm/qeBXJu5qHM92xyeE4an/W3MHgN2aLEzOCwA827i8PUj1WEnfVLcFcjGaIVUjfxJcrr9f/C5ZUxCc5M29sTF8nZaGqrUhEt/MF99G0b0+APwB15Gn8fy9beQAAAAASUVORK5CYII=');\r\n background-repeat: no-repeat;\r\n background-position: 0 50%;\r\n background-size: 12px 12px;\r\n color: #5e66cc;\r\n text-decoration: none\r\n}\r\n\r\n.leaflet-control-measure a.start,\r\n.leaflet-control-measure a.start:hover {\r\n background-color: transparent\r\n}\r\n\r\n/* assets/start_@2X.png */\r\n.leaflet-retina .leaflet-control-measure a.start {\r\n background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAA41JREFUSImNlU9oVFcUxn/ne28UxKWIRKiYpRaqZpIUagm6aZfiQlLNRBzyT+nGNmiLe2nUtkLBJhnRxolRoVBc1GXqIoqZTEoW6sZN/VNqTXdWsJl553YxkzSkM5N8m/feved837mP891jNMCx44XmJFEnsA/3nQ6bAEzMG3pMYNIU3Rgb2f1bPQ6rtdjV82A7Fp8j+EFJalSEu7vJfkzKOjVxpeXpqgKZ3kImBIYlbagSlGS6G2Aa+APAjCag3d07JKWqUm/M1T92OX29rkB338xpsK8AHN5aCN/E5eji1at75muedGBus8oLJx1OSloPEEIYzOdav/6fQKa3kDHTNYDg4YlH0YHrI3seN/o9/wkV3rVEt81oroocyedaJ5YEunoebAc9lLQheHgS4tTe8eFdr9ZCvoijJ6a3eCm6Z0Yz7n8HaWd+NP1MAFI8JGmDw1uPogMrybPZ2SYINRtiEWOX2l8G6SD4AtJGgyEAO3a80Fwq8USSQghn87nWMyuTM30zA0Y4UEJdN0bTfzUS6u4pXED63N3dPWpWkqhTkty9FJeji/VT9VHkYe5IT/HDRgK2LlwAEkmKY+8UsA9Aprv1umVJQrY1Er909xa/rPfLxi61vwSmANzDfuG+E6Da52tBhHE201O880lfcVPNiBAKlYK0Q4v2p2qitcJkH0ce5jJ9xb01dn+vPH1zw2tgNUgWVo0xMQ9L9l87AndCKtmVH01P1djcWqV/FRt6DJW7ZU3ETtktnBnPpc9D7RN4oF0G4I9EYBLA3Tu6BuY2N+QOPHfzjvFc67l65NnsbJNkH1TibVKm6Ia7u6SUygsn65EH959tXbJ7PNd2v1ERpTgMAhGQmNlNA8j0zdwy7JC7/0NMeny47eHypKMnpreMXWr7s17Vi8gMFHaHMtOSUrhPXLvcdkQASVmnwN9IWm+Jbh89Mb1leWLFPI3Js9nZJnN+kpRyeJ3gpwEEMHGl5am5+gHMaPZSdK+r/9f3GhGurLwcJ/dB2wAM671++f0Xlfdl6O4tDmKcr3z5As53ti5cqNq/ZtWlOAwG90+XJlsIn13LtX67GFNjZM4cthBGkDZWlxJgqmL/RYeGrR5or3ZLBODw2rDe/GjLreV8NS+sTF/xHYMhdz+02tAHEtxvKcUXP3zf9nzlZsMhcjg7uy2OvdM97Je0A7zqE70Cf+TBJs3sZn40/awex78erYTTwi3/3gAAAABJRU5ErkJggg==');\r\n}\r\n\r\n.leaflet-control-measure a.start:hover {\r\n opacity: .5;\r\n text-decoration: none\r\n}\r\n\r\n/* assets/cancel.png */\r\n.leaflet-control-measure a.cancel {\r\n display: inline;\r\n width: auto;\r\n height: auto;\r\n padding-left: 20px;\r\n margin-right: 4px;\r\n line-height: 1em;\r\n border: 0;\r\n text-align: left;\r\n background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAS9JREFUKJGFkDFOAlEURc8dRphJFNmBHYnQYbTHDnsa0BDBRq1YC4naIQbWYEloqKQyswIXQEgwDIn5z2IATUR95X/nvpz7xWqq7XEYztO3QM2wAoCkyLCBt5zf9XrlGEAAtebkwPfdM+iQLWMQpVKu8nh/8qZqexyG7zuT3+DvoVwme+QlGmtYTcMGG8h4MnOtlUpxFs9ufKD2BbjTULqMwZlhobhaoO5mL+q+YQUlVZB0HoMF0EKwwLpC9XVApoL3w9UwgOk00LYuvqQIKK2dEw3rBrmFhSR6wMXqXOQbNhAqJQ9utECJhiAGc7KRZ1oF1FejMQxcZu9FUPznW19zmeyx1+uV41TKVQyiv2DnPs46nfxyU6zRGAaW3r02UZepsHYG9feD7EOnk18CfAKwIX1qvqPBeQAAAABJRU5ErkJggg==');\r\n background-repeat: no-repeat;\r\n background-position: 0 50%;\r\n background-size: 12px 12px;\r\n color: #5e66cc;\r\n text-decoration: none\r\n}\r\n\r\n.leaflet-control-measure a.cancel,\r\n.leaflet-control-measure a.cancel:hover {\r\n background-color: transparent\r\n}\r\n\r\n/* assets/cancel_@2X.png */\r\n.leaflet-retina .leaflet-control-measure a.cancel {\r\n background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAApxJREFUSImtlr1PWlEYxp/ncE1KYWy6Gh3FwUZiOtiYuqlbGwxRaKJRjI5tqon/gf4BpqIxERC1doaNxLaD8SNxUOdqOukoiLHc83YALdwPhLbP+J5zfs977n3OPZeoo7Hp/XbTVGEArwEEBHhWHpErgmcQ5Kg8m+vLL364MehUjEzstZHGIiBvSKp6TYiIBvHFLKnZ9Fr3+aMG0cn9KKg+EXhaD+xgVaDm1PpqcKO6WtPdu9jBHKkSzcMBgD5RSEVjhx9qqtWdkyrRPNguAUaT8WD6wSAysddGZZz8XedODpIXMpCMBy8UAChlLNjgInmIHgTwvQ5qtzxHCjVV0k9gAQDU2PR+u4i8ta4kVSix0pMtGk8GAPnmBNc3xlBipScLkZB9EzI8Mn7UqkxThZ2iKNDzoZkT/85SZ75oeActJrv6xhhKpboKoZkTP6jm7Q1SGYYOK5QPkYP4ylsqZiKRY9/OUmde37QMiMhXK9xbus0C6HUiCNivAAScDcom9P7KRCLHvlSqqyDFlsFG4QBAoIPR2OEdgRZ3E6C6awBoBF7Zw13dz8D/kALk6pE5Nc/8z4t3TVeVeKkInjUK95Zus95SMVMnXRbJqYIg1ygcQG+ddNmkBTlF5dkUEW031wvuaalNF1T51FpkktwiAERjB9sEhy0OBYiEKofILS27Qlmk4DNAn2UsnYgHRw0AMEtq1jD0UO0k+kBmXMD36qOwz7Z54Frr0hxQuQ/Sa93n1Jx6BNaEOLmx+vLngwEArK8GNyD4+M9skffJePf2g5V1PBo7HKHIMkh/U1zgGuBkNRywXJkAkIwH00IGAGw5pssuE0Da49EBKxxw+au418j4Uath6LCA/QQ6AHleWXYJyKkW5EhuJePBCzfGbyl+TiY9AObiAAAAAElFTkSuQmCC');\r\n}\r\n\r\n.leaflet-control-measure a.cancel:hover {\r\n opacity: .5;\r\n text-decoration: none\r\n}\r\n\r\n/* assets/check.png */\r\n.leaflet-control-measure a.finish {\r\n display: inline;\r\n width: auto;\r\n height: auto;\r\n padding-left: 20px;\r\n margin-right: 4px;\r\n line-height: 1em;\r\n border: 0;\r\n text-align: left;\r\n background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAASVJREFUKJF1kDFLAgEYhp/37tQ7KPMftAnZZtjSkg2B7S5KHLRVk3O/IQiEakzQra2h0SannOR+QWuLYKF03teQwkHeO3483/e+7ydWanZGQTDLXwMtwyoAkiLDBs5idt/r1ecAAmhdjHc9L3kF7bFBBpHrJo2nh8MPNTujIPjKjbPg9FKpUDxw/mJkw2Y8G3wL9qfz6ZUDtLLP2l0gQiACMNF21gVX+kzDvnQzx14ENQCZKk7K+s39cSoGkzQMOkmbepIioCpxHOeW57l4ceR5/nITDBZ5hg2EqgBCt7FXyMXY6X8YQH2F4dBPCtvvgv3M8oDBpFQo1pxerz533aRhq09kwUkSn3W75YXWwzAc+pbfujTRlqmyzgzq7/jFx263vAD4BStdctyYQ7zEAAAAAElFTkSuQmCC');\r\n background-repeat: no-repeat;\r\n background-position: 0 50%;\r\n background-size: 12px 12px;\r\n color: #5e66cc;\r\n text-decoration: none\r\n}\r\n\r\n.leaflet-control-measure a.finish,\r\n.leaflet-control-measure a.finish:hover {\r\n background-color: transparent\r\n}\r\n\r\n/* assets/check_@2X.png */\r\n.leaflet-retina .leaflet-control-measure a.finish {\r\n background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAlZJREFUSImllr9PU1EYhp/3tJMyGqIuBhYNnQyXhMRJNlcHg0AxIC3pqhFi4iCLCf4FtFaUFgok/AMmBldSqpOwuAhhghFx6r2fAwX641Jy6zu+57vP+30n5+Rc0UYTmXKv77th4CGQMLhxumJHQrsYm3Kx1aXs/d+XMRRmjk1t9Ujx92CPJbl2TZhZgNjwq26mtNi/d2VAMlVOIrcguNYOHBJ1okDTS3lvpd5t6G48vT0ruUJ0OICum2M5ma68bHDrO5dcITq4VQajxZxXOg8Ym9rqkYv/7KzzsAT7Y1KimPP2HYBz8fn/gRv8bTCkLsE8gCYy5d5qVb+uOi1ttOQH1Tcxxb8i7l4MYYHvu17n+264c7h97rnVP7mSHzxAZBqHkIvHg2HH6SXqEO49n5tT8CxduWdGqaUCDTkgERlt9qkeHhjfJG421wn63MX1b8F8waiGwXtve1NXwWvV3aF7b5At5LxHOHtaHxINfioHdtRq6gfICtmBjbOQTuCgQye02zpBsDCerkwB1EIeRIcD2I7GU5XXiHchixaI1HJ24OOZEw0Ogdmsk4utmlkQMp6c8SGZKk92Agd8SWsCSKa314WehNeZmektkIkABygVct6oA/CrbgbsJLxOkpiLAjc49oPqLNTeg9Ji/54CTUfo7goptZIfPDgPAFjKeysYr/6bbfaimOtfP49qXk+mKyMyyyJ1ReLCMShVD4emJxOgmPNKJiWAtfDT1SIfKMViQaIZDpf8VZxpZPL7nXg8GDY0JOgD6659dgi2ExibktaKOW//MsY/pXkXxnBJQFMAAAAASUVORK5CYII=');\r\n}\r\n\r\n.leaflet-control-measure a.finish:hover {\r\n opacity: .5;\r\n text-decoration: none\r\n}\r\n\r\n/* assets/focus.png */\r\n.leaflet-measure-resultpopup a.zoomto {\r\n display: inline;\r\n width: auto;\r\n height: auto;\r\n padding-left: 20px;\r\n margin-right: 4px;\r\n line-height: 1em;\r\n border: 0;\r\n text-align: left;\r\n background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAOhJREFUKJGVkTFug0AQRd+sgBOkyT1MvxVdipQpbDcBrsExAq4iipQWpbvt1xeJlBNgsZPCYK1sJ1GmfX//PM3CP0cAXqrjQwqVqmbG4N7b3AFsa29DwIrIeILuo1t9GYAUKqD4pbiYMyQAqpoBrt/lTZyaN7l16RsguzwwBreENq/HZ0TfEFEVrfs2H2Iu17s3pf/E8CSTmCDs+93qMebm9gyiMomZJNyyRWlbe7s4q2itInvBgFJe8wQgBOxc4Po2H4Ahbo15craQESjWpW9++AeLcrgonaBLzw3ZPW+UQxrG9i77a74B+z5bQloZOFAAAAAASUVORK5CYII=');\r\n background-repeat: no-repeat;\r\n background-position: 0 50%;\r\n background-size: 12px 12px;\r\n color: #5e66cc;\r\n text-decoration: none\r\n}\r\n\r\n.leaflet-measure-resultpopup a.zoomto,\r\n.leaflet-measure-resultpopup a.zoomto:hover {\r\n background-color: transparent\r\n}\r\n\r\n/* assets/focus_@2X.png */\r\n.leaflet-retina .leaflet-measure-resultpopup a.zoomto {\r\n background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAXBJREFUSIntlb8uBFEUxn/n7hAV1XoIpazYll5ETbays56AZ+AJGBJBoRPUotVsRCmeACsRiUQx636KRWbHnzvIavi6c/J95zvnzJ174R8BWDaozTdnMK1iNpzNbycV4x3U4qaysVALo76zNnbwknPddm+Lf61bK5snyeaibkan+Ecd55Hn1eKm8g12T9AD9NwgClNgtnE64uRXgAlDQhyb2eJWUjkPaYO7nm2cjpS8P8EYzOYFdw6qIZPgipz8CsYg0l4K5VLqhhEHBkMeloP6EAGYAEjNGrtJ5WZzc7TlS1EMYNLkjw0MCWAgda/rbKcPhY4xFPnI4hhj6jHy63MLZ3E7fbB+F6133O0oJA9PYLYouMOYdr591V/qu8RsCulW/nHpSwa1uKn8/bKVVM4dVAWHSPdI98C+5Ks7G+MXIX2h/+D5KE4X4X46QS/wu1eFUMuwcn6PRd+DZ1xlg9x7QB3p+nu9dop7rP4D/V/EE6UhikMKpx/oAAAAAElFTkSuQmCC');\r\n}\r\n\r\n.leaflet-measure-resultpopup a.zoomto:hover {\r\n opacity: .5;\r\n text-decoration: none\r\n}\r\n\r\n/* assets/trash.png */\r\n.leaflet-measure-resultpopup a.deletemarkup {\r\n display: inline;\r\n width: auto;\r\n height: auto;\r\n padding-left: 20px;\r\n margin-right: 4px;\r\n line-height: 1em;\r\n border: 0;\r\n text-align: left;\r\n background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAMCAYAAAC0qUeeAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAALlJREFUKJFjZEACcWmn5zMwMCbA+P///ZuzeI5ZKozPaF+/n4WBgYFB7gmfKiPj30PfeP/Irem3+h5SeIyT4yvLQxZGFuv7Eh/vMzAwMDDGpJz6wcTExM5AEPz7BbX+zH98ymDyTMiCsamnq7HRMICimJGRsQUbjVUxIUAvxf8ZqrDSSCoY49JO/UtLO8OFzbSkpCO8cSlnfjMwMDCwMDAw/mdgOD3nBwPDp7i0MxiK/0BsmMbAwMAAACl8PxDSJvyvAAAAAElFTkSuQmCC');\r\n background-repeat: no-repeat;\r\n background-position: 0 50%;\r\n background-size: 12px 12px;\r\n color: #5e66cc;\r\n text-decoration: none\r\n}\r\n\r\n.leaflet-measure-resultpopup a.deletemarkup,\r\n.leaflet-measure-resultpopup a.deletemarkup:hover {\r\n background-color: transparent\r\n}\r\n\r\n/* assets/trash_@2X.png */\r\n.leaflet-retina .leaflet-measure-resultpopup a.deletemarkup {\r\n background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAYCAYAAAD+vg1LAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAW5JREFUSIntlbtKA2EQhc8/axIVrUQFBRsRRLCL+gIRQeuAxbpNLq2laGklpLYxVkkh2lip4AsIZkmZRiy0sPCCoEYwlxmLJLLZi+wmYpXTnRnmm/mHYVfBQ+uJq/EwhfJQHANItWdZAFxWQfrRQfTZrZ68wGEtlIHCshMKNGK0EhLsedW7FDWn1bR7ACGImsllF26teSNVmIaSG2ZUVEQm8/tLLw5wPH6iPc6NtjWYehjaVkrtQnCey0bX3JobKfMMCqsQ7NxNvGesubHSkygjaX6CMOD1pM7EZRJCBUD9L7ECqv0YI22KkTalU5i93vMqutX/g/XkdVlPm29+vV19nh2JBoN43xN3qx64B3bK847B/CFEdd/eLzh3uDgcxNvVXIVYPvTi+lf5Xc4ay465DAAbieJsUKyRKM43EPzaijVXoYSlcEoKutKkZKTNoBM3MXRsAwMRrm5+aeERMMeIKNC1MDMrogvur221Yt/I6IasMWr/dwAAAABJRU5ErkJggg==');\r\n}\r\n\r\n.leaflet-measure-resultpopup a.deletemarkup:hover {\r\n opacity: .5;\r\n text-decoration: none\r\n}",""])},function(e,t,r){"use strict";e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var r=function(e,t){var r=e[1]||"",n=e[3];if(!n)return r;if(t&&"function"==typeof btoa){var o=(i=n,"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(i))))+" */"),a=n.sources.map(function(e){return"/*# sourceURL="+n.sourceRoot+e+" */"});return[r].concat(a).concat([o]).join("\n")}var i;return[r].join("\n")}(t,e);return t[2]?"@media "+t[2]+"{"+r+"}":r}).join("")},t.i=function(e,r){"string"==typeof e&&(e=[[null,e,""]]);for(var n={},o=0;o=0&&c.splice(t,1)}function m(e){var t=document.createElement("style");if(void 0===e.attrs.type&&(e.attrs.type="text/css"),void 0===e.attrs.nonce){var n=function(){0;return r.nc}();n&&(e.attrs.nonce=n)}return g(t,e.attrs),h(e,t),t}function g(e,t){Object.keys(t).forEach(function(r){e.setAttribute(r,t[r])})}function v(e,t){var r,n,o,a;if(t.transform&&e.css){if(!(a="function"==typeof t.transform?t.transform(e.css):t.transform.default(e.css)))return function(){};e.css=a}if(t.singleton){var i=l++;r=u||(u=m(t)),n=x.bind(null,r,i,!1),o=x.bind(null,r,i,!0)}else e.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(r=function(e){var t=document.createElement("link");return void 0===e.attrs.type&&(e.attrs.type="text/css"),e.attrs.rel="stylesheet",g(t,e.attrs),h(e,t),t}(t),n=function(e,t,r){var n=r.css,o=r.sourceMap,a=void 0===t.convertToAbsoluteUrls&&o;(t.convertToAbsoluteUrls||a)&&(n=p(n));o&&(n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o))))+" */");var i=new Blob([n],{type:"text/css"}),s=e.href;e.href=URL.createObjectURL(i),s&&URL.revokeObjectURL(s)}.bind(null,r,t),o=function(){A(r),r.href&&URL.revokeObjectURL(r.href)}):(r=m(t),n=function(e,t){var r=t.css,n=t.media;n&&e.setAttribute("media",n);if(e.styleSheet)e.styleSheet.cssText=r;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(r))}}.bind(null,r),o=function(){A(r)});return n(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap)return;n(e=t)}else o()}}e.exports=function(e,t){if("undefined"!=typeof DEBUG&&DEBUG&&"object"!=typeof document)throw new Error("The style-loader cannot be used in a non-browser environment");(t=t||{}).attrs="object"==typeof t.attrs?t.attrs:{},t.singleton||"boolean"==typeof t.singleton||(t.singleton=i()),t.insertInto||(t.insertInto="head"),t.insertAt||(t.insertAt="bottom");var r=d(e,t);return f(r,t),function(e){for(var n=[],o=0;o 96 |
97 |
98 |
99 |
100 | 101 | 105 | 106 | 107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
Options
116 |
117 |
118 | 121 |
122 |
123 |
124 |
125 |
126 | 127 |
128 | 134 |
135 |
136 |
137 | 138 |
139 | 145 |
146 |
147 |
148 | 149 |
150 | 156 |
157 |
158 |
159 | 160 |
161 | 168 |
169 |
170 |
171 | 172 |
173 | 180 |
181 |
182 |
183 | 184 |
185 | 186 |
187 |
188 |
189 | 190 |
191 | 192 |
193 |
194 |
195 |
196 |
197 |
198 |
199 |
200 |
201 |
202 |
203 |

Installation

204 |
205 |
Install via NPM
206 |
207 |
208 | 209 | npm install react-leaflet-measure --save 210 | 211 |
212 |
213 | 214 |
Or include in browser
215 |
216 |
217 | 218 | <script src="https://npmcdn.com/react-leaflet-measure/dist/react-leaflet-measure.min.js"></script> 219 | 220 |
221 |
222 |
223 |
224 |
225 |
226 |
227 |
228 |
229 |
230 |

Usage

231 |
232 |
react-leaflet v2
233 | 245 | 246 |
react-leaflet v1
247 | 259 |
260 |
261 |
262 |
263 |
264 |
265 |
266 |
267 |

Options

268 |
269 |

270 | Any props passed to MeasureControl are passed down to leaflet-measure. 271 | 272 | Refer leaflet-measure control options. 273 |

274 |
275 |
276 |
277 |
278 |
279 |
280 |
281 |
282 |

Events

283 |
284 | 285 | 286 | 287 | 288 | 289 | 290 | 291 | 292 | 293 | 294 | 295 | 296 | 297 | 298 | 299 | 300 | 301 | 302 | 328 | 329 | 330 |
EventDataDescription
onMeasurestartFired when measurement starts.
onMeasurefinishresult 303 | Fired when measurement finishes with results of the measurement. Results data includes: 304 |
    305 |
  • 306 | area: Area of a polygon measurement in sq meters. 0 for measurements with less than 3 points. 307 |
    • 308 |
  • 309 | areaDisplay: Area formatted as displayed in the popup. 310 |
    • 311 |
  • 312 | lastCoord: Last point clicked in both decimal degrees and degress/min/seconds. 313 |
    • 314 |
  • 315 | length: Length of the measurement in meters. 0 for measurements with less than 2 points. 316 |
    • 317 |
  • 318 | lengthDisplay: Length formatted as displayed in the popup. 319 |
    • 320 |
  • 321 | pointCount: Number of points directly added by the user. 322 |
    • 323 |
  • 324 | points: Array of points as LatLng used to calculate the measurement. Number of items in the array may differ from pointCount because an additional point is added to close polygons during polygon measurements. 325 |
    • 326 |
327 |
331 |
332 |
333 |
334 |
335 | 336 | ); 337 | } 338 | } 339 | 340 | ReactDOM.render(, document.getElementById('container')); 341 | -------------------------------------------------------------------------------- /docs/_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-slate -------------------------------------------------------------------------------- /docs/css/business-frontpage.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Start Bootstrap - Busines Frontpage (https://startbootstrap.com/template-overviews/business-frontpage) 3 | * Copyright 2013-2019 Start Bootstrap 4 | * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-business-frontpage/blob/master/LICENSE) 5 | */ 6 | body { 7 | padding-top: 56px; 8 | } 9 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | react-leaflet-measure Demo Page 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 30 | 31 | 32 | 33 | 61 | 62 | 63 |
64 |
65 |
66 |
67 |

react-leaflet-measure

68 |

69 | React wrapper of leaflet-measure for react-leaflet. 70 |
71 | Coordinate, linear, and area measure control for react-leaflet maps. 72 |

73 | 74 | Github 75 | 76 | 77 | npm 78 | 79 |
80 |

81 |
82 |
83 |
84 |
85 | 86 | 87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 | 95 | 96 | 97 |
98 |
99 |

© M. Hasbie 2019

100 |
101 |
102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | -------------------------------------------------------------------------------- /docs/vendor/bootstrap/js/bootstrap.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap v4.2.1 (https://getbootstrap.com/) 3 | * Copyright 2011-2018 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors) 4 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) 5 | */ 6 | !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("popper.js"),require("jquery")):"function"==typeof define&&define.amd?define(["exports","popper.js","jquery"],e):e(t.bootstrap={},t.Popper,t.jQuery)}(this,function(t,u,g){"use strict";function i(t,e){for(var n=0;nthis._items.length-1||t<0))if(this._isSliding)g(this._element).one(Q.SLID,function(){return e.to(t)});else{if(n===t)return this.pause(),void this.cycle();var i=ndocument.documentElement.clientHeight;!this._isBodyOverflowing&&t&&(this._element.style.paddingLeft=this._scrollbarWidth+"px"),this._isBodyOverflowing&&!t&&(this._element.style.paddingRight=this._scrollbarWidth+"px")},t._resetAdjustments=function(){this._element.style.paddingLeft="",this._element.style.paddingRight=""},t._checkScrollbar=function(){var t=document.body.getBoundingClientRect();this._isBodyOverflowing=t.left+t.right
',trigger:"hover focus",title:"",delay:0,html:!1,selector:!1,placement:"top",offset:0,container:!1,fallbackPlacement:"flip",boundary:"scrollParent"},De="show",we="out",Ae={HIDE:"hide"+Ee,HIDDEN:"hidden"+Ee,SHOW:"show"+Ee,SHOWN:"shown"+Ee,INSERTED:"inserted"+Ee,CLICK:"click"+Ee,FOCUSIN:"focusin"+Ee,FOCUSOUT:"focusout"+Ee,MOUSEENTER:"mouseenter"+Ee,MOUSELEAVE:"mouseleave"+Ee},Ne="fade",Oe="show",ke=".tooltip-inner",Pe=".arrow",Le="hover",je="focus",He="click",Re="manual",Ue=function(){function i(t,e){if("undefined"==typeof u)throw new TypeError("Bootstrap's tooltips require Popper.js (https://popper.js.org/)");this._isEnabled=!0,this._timeout=0,this._hoverState="",this._activeTrigger={},this._popper=null,this.element=t,this.config=this._getConfig(e),this.tip=null,this._setListeners()}var t=i.prototype;return t.enable=function(){this._isEnabled=!0},t.disable=function(){this._isEnabled=!1},t.toggleEnabled=function(){this._isEnabled=!this._isEnabled},t.toggle=function(t){if(this._isEnabled)if(t){var e=this.constructor.DATA_KEY,n=g(t.currentTarget).data(e);n||(n=new this.constructor(t.currentTarget,this._getDelegateConfig()),g(t.currentTarget).data(e,n)),n._activeTrigger.click=!n._activeTrigger.click,n._isWithActiveTrigger()?n._enter(null,n):n._leave(null,n)}else{if(g(this.getTipElement()).hasClass(Oe))return void this._leave(null,this);this._enter(null,this)}},t.dispose=function(){clearTimeout(this._timeout),g.removeData(this.element,this.constructor.DATA_KEY),g(this.element).off(this.constructor.EVENT_KEY),g(this.element).closest(".modal").off("hide.bs.modal"),this.tip&&g(this.tip).remove(),this._isEnabled=null,this._timeout=null,this._hoverState=null,(this._activeTrigger=null)!==this._popper&&this._popper.destroy(),this._popper=null,this.element=null,this.config=null,this.tip=null},t.show=function(){var e=this;if("none"===g(this.element).css("display"))throw new Error("Please use show on visible elements");var t=g.Event(this.constructor.Event.SHOW);if(this.isWithContent()&&this._isEnabled){g(this.element).trigger(t);var n=_.findShadowRoot(this.element),i=g.contains(null!==n?n:this.element.ownerDocument.documentElement,this.element);if(t.isDefaultPrevented()||!i)return;var o=this.getTipElement(),r=_.getUID(this.constructor.NAME);o.setAttribute("id",r),this.element.setAttribute("aria-describedby",r),this.setContent(),this.config.animation&&g(o).addClass(Ne);var s="function"==typeof this.config.placement?this.config.placement.call(this,o,this.element):this.config.placement,a=this._getAttachment(s);this.addAttachmentClass(a);var l=this._getContainer();g(o).data(this.constructor.DATA_KEY,this),g.contains(this.element.ownerDocument.documentElement,this.tip)||g(o).appendTo(l),g(this.element).trigger(this.constructor.Event.INSERTED),this._popper=new u(this.element,o,{placement:a,modifiers:{offset:{offset:this.config.offset},flip:{behavior:this.config.fallbackPlacement},arrow:{element:Pe},preventOverflow:{boundariesElement:this.config.boundary}},onCreate:function(t){t.originalPlacement!==t.placement&&e._handlePopperPlacementChange(t)},onUpdate:function(t){return e._handlePopperPlacementChange(t)}}),g(o).addClass(Oe),"ontouchstart"in document.documentElement&&g(document.body).children().on("mouseover",null,g.noop);var c=function(){e.config.animation&&e._fixTransition();var t=e._hoverState;e._hoverState=null,g(e.element).trigger(e.constructor.Event.SHOWN),t===we&&e._leave(null,e)};if(g(this.tip).hasClass(Ne)){var h=_.getTransitionDurationFromElement(this.tip);g(this.tip).one(_.TRANSITION_END,c).emulateTransitionEnd(h)}else c()}},t.hide=function(t){var e=this,n=this.getTipElement(),i=g.Event(this.constructor.Event.HIDE),o=function(){e._hoverState!==De&&n.parentNode&&n.parentNode.removeChild(n),e._cleanTipClass(),e.element.removeAttribute("aria-describedby"),g(e.element).trigger(e.constructor.Event.HIDDEN),null!==e._popper&&e._popper.destroy(),t&&t()};if(g(this.element).trigger(i),!i.isDefaultPrevented()){if(g(n).removeClass(Oe),"ontouchstart"in document.documentElement&&g(document.body).children().off("mouseover",null,g.noop),this._activeTrigger[He]=!1,this._activeTrigger[je]=!1,this._activeTrigger[Le]=!1,g(this.tip).hasClass(Ne)){var r=_.getTransitionDurationFromElement(n);g(n).one(_.TRANSITION_END,o).emulateTransitionEnd(r)}else o();this._hoverState=""}},t.update=function(){null!==this._popper&&this._popper.scheduleUpdate()},t.isWithContent=function(){return Boolean(this.getTitle())},t.addAttachmentClass=function(t){g(this.getTipElement()).addClass(Ce+"-"+t)},t.getTipElement=function(){return this.tip=this.tip||g(this.config.template)[0],this.tip},t.setContent=function(){var t=this.getTipElement();this.setElementContent(g(t.querySelectorAll(ke)),this.getTitle()),g(t).removeClass(Ne+" "+Oe)},t.setElementContent=function(t,e){var n=this.config.html;"object"==typeof e&&(e.nodeType||e.jquery)?n?g(e).parent().is(t)||t.empty().append(e):t.text(g(e).text()):t[n?"html":"text"](e)},t.getTitle=function(){var t=this.element.getAttribute("data-original-title");return t||(t="function"==typeof this.config.title?this.config.title.call(this.element):this.config.title),t},t._getContainer=function(){return!1===this.config.container?document.body:_.isElement(this.config.container)?g(this.config.container):g(document).find(this.config.container)},t._getAttachment=function(t){return be[t.toUpperCase()]},t._setListeners=function(){var i=this;this.config.trigger.split(" ").forEach(function(t){if("click"===t)g(i.element).on(i.constructor.Event.CLICK,i.config.selector,function(t){return i.toggle(t)});else if(t!==Re){var e=t===Le?i.constructor.Event.MOUSEENTER:i.constructor.Event.FOCUSIN,n=t===Le?i.constructor.Event.MOUSELEAVE:i.constructor.Event.FOCUSOUT;g(i.element).on(e,i.config.selector,function(t){return i._enter(t)}).on(n,i.config.selector,function(t){return i._leave(t)})}}),g(this.element).closest(".modal").on("hide.bs.modal",function(){i.element&&i.hide()}),this.config.selector?this.config=l({},this.config,{trigger:"manual",selector:""}):this._fixTitle()},t._fixTitle=function(){var t=typeof this.element.getAttribute("data-original-title");(this.element.getAttribute("title")||"string"!==t)&&(this.element.setAttribute("data-original-title",this.element.getAttribute("title")||""),this.element.setAttribute("title",""))},t._enter=function(t,e){var n=this.constructor.DATA_KEY;(e=e||g(t.currentTarget).data(n))||(e=new this.constructor(t.currentTarget,this._getDelegateConfig()),g(t.currentTarget).data(n,e)),t&&(e._activeTrigger["focusin"===t.type?je:Le]=!0),g(e.getTipElement()).hasClass(Oe)||e._hoverState===De?e._hoverState=De:(clearTimeout(e._timeout),e._hoverState=De,e.config.delay&&e.config.delay.show?e._timeout=setTimeout(function(){e._hoverState===De&&e.show()},e.config.delay.show):e.show())},t._leave=function(t,e){var n=this.constructor.DATA_KEY;(e=e||g(t.currentTarget).data(n))||(e=new this.constructor(t.currentTarget,this._getDelegateConfig()),g(t.currentTarget).data(n,e)),t&&(e._activeTrigger["focusout"===t.type?je:Le]=!1),e._isWithActiveTrigger()||(clearTimeout(e._timeout),e._hoverState=we,e.config.delay&&e.config.delay.hide?e._timeout=setTimeout(function(){e._hoverState===we&&e.hide()},e.config.delay.hide):e.hide())},t._isWithActiveTrigger=function(){for(var t in this._activeTrigger)if(this._activeTrigger[t])return!0;return!1},t._getConfig=function(t){return"number"==typeof(t=l({},this.constructor.Default,g(this.element).data(),"object"==typeof t&&t?t:{})).delay&&(t.delay={show:t.delay,hide:t.delay}),"number"==typeof t.title&&(t.title=t.title.toString()),"number"==typeof t.content&&(t.content=t.content.toString()),_.typeCheckConfig(pe,t,this.constructor.DefaultType),t},t._getDelegateConfig=function(){var t={};if(this.config)for(var e in this.config)this.constructor.Default[e]!==this.config[e]&&(t[e]=this.config[e]);return t},t._cleanTipClass=function(){var t=g(this.getTipElement()),e=t.attr("class").match(Te);null!==e&&e.length&&t.removeClass(e.join(""))},t._handlePopperPlacementChange=function(t){var e=t.instance;this.tip=e.popper,this._cleanTipClass(),this.addAttachmentClass(this._getAttachment(t.placement))},t._fixTransition=function(){var t=this.getTipElement(),e=this.config.animation;null===t.getAttribute("x-placement")&&(g(t).removeClass(Ne),this.config.animation=!1,this.hide(),this.show(),this.config.animation=e)},i._jQueryInterface=function(n){return this.each(function(){var t=g(this).data(ve),e="object"==typeof n&&n;if((t||!/dispose|hide/.test(n))&&(t||(t=new i(this,e),g(this).data(ve,t)),"string"==typeof n)){if("undefined"==typeof t[n])throw new TypeError('No method named "'+n+'"');t[n]()}})},s(i,null,[{key:"VERSION",get:function(){return"4.2.1"}},{key:"Default",get:function(){return Ie}},{key:"NAME",get:function(){return pe}},{key:"DATA_KEY",get:function(){return ve}},{key:"Event",get:function(){return Ae}},{key:"EVENT_KEY",get:function(){return Ee}},{key:"DefaultType",get:function(){return Se}}]),i}();g.fn[pe]=Ue._jQueryInterface,g.fn[pe].Constructor=Ue,g.fn[pe].noConflict=function(){return g.fn[pe]=ye,Ue._jQueryInterface};var We="popover",xe="bs.popover",Fe="."+xe,qe=g.fn[We],Me="bs-popover",Ke=new RegExp("(^|\\s)"+Me+"\\S+","g"),Qe=l({},Ue.Default,{placement:"right",trigger:"click",content:"",template:''}),Be=l({},Ue.DefaultType,{content:"(string|element|function)"}),Ve="fade",Ye="show",Xe=".popover-header",ze=".popover-body",Ge={HIDE:"hide"+Fe,HIDDEN:"hidden"+Fe,SHOW:"show"+Fe,SHOWN:"shown"+Fe,INSERTED:"inserted"+Fe,CLICK:"click"+Fe,FOCUSIN:"focusin"+Fe,FOCUSOUT:"focusout"+Fe,MOUSEENTER:"mouseenter"+Fe,MOUSELEAVE:"mouseleave"+Fe},Je=function(t){var e,n;function i(){return t.apply(this,arguments)||this}n=t,(e=i).prototype=Object.create(n.prototype),(e.prototype.constructor=e).__proto__=n;var o=i.prototype;return o.isWithContent=function(){return this.getTitle()||this._getContent()},o.addAttachmentClass=function(t){g(this.getTipElement()).addClass(Me+"-"+t)},o.getTipElement=function(){return this.tip=this.tip||g(this.config.template)[0],this.tip},o.setContent=function(){var t=g(this.getTipElement());this.setElementContent(t.find(Xe),this.getTitle());var e=this._getContent();"function"==typeof e&&(e=e.call(this.element)),this.setElementContent(t.find(ze),e),t.removeClass(Ve+" "+Ye)},o._getContent=function(){return this.element.getAttribute("data-content")||this.config.content},o._cleanTipClass=function(){var t=g(this.getTipElement()),e=t.attr("class").match(Ke);null!==e&&0=this._offsets[o]&&("undefined"==typeof this._offsets[o+1]||t 2 | 3 | 4 | react-leaflet-measure 5 | 6 | 7 | 8 | 9 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 219 | 220 | -------------------------------------------------------------------------------- /example/docsV2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | react-leaflet-measure 5 | 6 | 7 | 8 | 9 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 220 | 221 | -------------------------------------------------------------------------------- /example/react-leaflet-v1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | react-leaflet-measure 5 | 6 | 7 | 8 | 9 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 68 | 69 | -------------------------------------------------------------------------------- /example/react-leaflet-v2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | react-leaflet-measure 5 | 6 | 7 | 8 | 9 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 69 | 70 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-leaflet-measure", 3 | "version": "2.1.1", 4 | "description": "React wrapper of leaflet-measure. Coordinate, linear, and area measure control for Leaflet maps.", 5 | "main": "dist/react-leaflet-measure.min.js", 6 | "scripts": { 7 | "build": "npm run build:lib && npm run build:dist && npm run build:dev", 8 | "build:dist": "webpack src/index.js --output dist/react-leaflet-measure.min.js", 9 | "build:dev": "webpack src/index.js --mode development --output dist/react-leaflet-measure.js", 10 | "build:lib": "npm run compile:lib", 11 | "clean:lib": "rm -Rf ./lib", 12 | "compile:lib": "babel src --out-dir lib", 13 | "prepublishOnly": "npm run build", 14 | "test": "jest" 15 | }, 16 | "repository": { 17 | "type": "git", 18 | "url": "git+https://github.com/mhasbie/react-leaflet-measure.git" 19 | }, 20 | "homepage": "https://mhasbie.github.io/react-leaflet-measure/", 21 | "keywords": [ 22 | "react", 23 | "leaflet", 24 | "react-leaflet", 25 | "leaflet-measure", 26 | "react-leaflet-measure" 27 | ], 28 | "author": "M. Hasbie", 29 | "license": "MIT", 30 | "peerDependencies": { 31 | "leaflet": "^1.4.0", 32 | "react-leaflet": "^1.9.1 || ^2.2.0" 33 | }, 34 | "devDependencies": { 35 | "babel-cli": "^6.26.0", 36 | "babel-core": "^6.26.3", 37 | "babel-eslint": "^10.0.1", 38 | "babel-jest": "^23.6.0", 39 | "babel-loader": "^7.1.5", 40 | "babel-plugin-transform-class-properties": "^6.24.1", 41 | "babel-plugin-transform-object-rest-spread": "^6.26.0", 42 | "babel-preset-env": "^1.7.0", 43 | "babel-preset-react": "^6.24.1", 44 | "babel-preset-stage-0": "^6.24.1", 45 | "babel-register": "^6.26.0", 46 | "css-loader": "^2.0.2", 47 | "enzyme": "^3.8.0", 48 | "enzyme-adapter-react-16": "^1.7.1", 49 | "eslint": "^5.11.0", 50 | "eslint-plugin-react": "^7.11.1", 51 | "jest": "^23.6.0", 52 | "jest-enzyme": "^7.0.1", 53 | "leaflet": "^1.4.0", 54 | "prop-types": "^15.5.10", 55 | "react": "^16.5.2", 56 | "react-dom": "^16.5.2", 57 | "react-leaflet": "^2.2.0", 58 | "style-loader": "^0.23.1", 59 | "webpack": "^4.28.2", 60 | "webpack-cli": "^3.1.2", 61 | "webpack-dev-server": "^3.1.14" 62 | }, 63 | "dependencies": { 64 | "leaflet-measure": "^3.1.0" 65 | }, 66 | "jest": { 67 | "collectCoverage": true, 68 | "transform": { 69 | ".*": "/node_modules/babel-jest" 70 | }, 71 | "testMatch": [ 72 | "**/__tests__/**/?(*.)+(spec|test).[jt]s?(x)" 73 | ] 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /src/MeasureControl.js: -------------------------------------------------------------------------------- 1 | import { MapControl } from 'react-leaflet'; 2 | import L from 'leaflet'; 3 | import 'leaflet-measure'; 4 | import './leaflet-measure.css'; 5 | 6 | export default class MeasureControl extends MapControl { 7 | createLeafletElement(props) { 8 | return L.control.measure(props); 9 | } 10 | 11 | componentDidMount() { 12 | super.componentDidMount(); 13 | const { map } = this.props.leaflet || this.context; 14 | const { 15 | onMeasurestart, 16 | onMeasurefinish 17 | } = this.props; 18 | map.on('measurestart', (e) => { 19 | this._propagateEvent(onMeasurestart, e); 20 | }) 21 | .on('measurefinish', (e) => { 22 | this._propagateEvent(onMeasurefinish, e); 23 | }); 24 | } 25 | 26 | updateLeafletElement(fromProps, toProps) { 27 | const { map } = this.props.leaflet || this.context; 28 | this.leafletElement.remove(); 29 | this.leafletElement = new L.control.measure(toProps); 30 | this.leafletElement.addTo(map) 31 | } 32 | 33 | _propagateEvent(eventHandler, event) { 34 | if (typeof eventHandler !== 'function') return; 35 | eventHandler(event); 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import MeasureControl from './MeasureControl'; 2 | 3 | export default MeasureControl; -------------------------------------------------------------------------------- /src/leaflet-measure.css: -------------------------------------------------------------------------------- 1 | .leaflet-control-measure h3, 2 | .leaflet-measure-resultpopup h3 { 3 | margin: 0 0 12px; 4 | padding-bottom: 10px; 5 | border-bottom: 1px solid #ddd 6 | } 7 | 8 | .leaflet-control-measure p, 9 | .leaflet-measure-resultpopup p { 10 | margin: 10px 0 0; 11 | line-height: 1.5em 12 | } 13 | 14 | .leaflet-control-measure p:first-child, 15 | .leaflet-measure-resultpopup p:first-child { 16 | margin-top: 0 17 | } 18 | 19 | .leaflet-control-measure .tasks, 20 | .leaflet-measure-resultpopup .tasks { 21 | margin: 12px 0 0; 22 | padding: 10px 0 0; 23 | border-top: 1px solid #ddd; 24 | text-align: right; 25 | list-style: none; 26 | list-style-image: none 27 | } 28 | 29 | .leaflet-control-measure .tasks li, 30 | .leaflet-measure-resultpopup .tasks li { 31 | display: inline; 32 | margin: 0 10px 0 0 33 | } 34 | 35 | .leaflet-control-measure .tasks li:last-child, 36 | .leaflet-measure-resultpopup .tasks li:last-child { 37 | margin-right: 0 38 | } 39 | 40 | .leaflet-control-measure .coorddivider, 41 | .leaflet-measure-resultpopup .coorddivider { 42 | color: #999 43 | } 44 | 45 | .leaflet-control-measure { 46 | max-width: 280px; 47 | background: #fff 48 | } 49 | 50 | /* assets/rulers.png */ 51 | .leaflet-control-measure .leaflet-control-measure-toggle, 52 | .leaflet-control-measure .leaflet-control-measure-toggle:hover { 53 | background-size: 14px 14px; 54 | background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAGJJREFUOI1jYGBgOM3AwPAfCTMwMDA8QxPDhT8xoAlIM5AG/jMi2QoDjKQYwITEkSFRM9w2qrkA5oqBc8EIDYNHDAzkp0I4QE/fMDF5YvnoBsiTwscWBiQBJgYGhpMU6D8CAJDrOVecOVsbAAAAAElFTkSuQmCC'); 55 | border: 0; 56 | border-radius: 4px; 57 | text-indent: 100%; 58 | white-space: nowrap; 59 | overflow: hidden 60 | } 61 | 62 | .leaflet-touch .leaflet-control-measure .leaflet-control-measure-toggle, 63 | .leaflet-touch .leaflet-control-measure .leaflet-control-measure-toggle:hover { 64 | border-radius: 2px 65 | } 66 | 67 | /* assets/rulers_@2X.png */ 68 | .leaflet-retina .leaflet-control-measure .leaflet-control-measure-toggle, 69 | .leaflet-retina .leaflet-control-measure .leaflet-control-measure-toggle:hover { 70 | background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAALdJREFUWIXtl0EKwkAMRZ+iR1LwCC5ceekKHsSqN3ARF5pFi41lmGQU8iDQkkB/0k/aATgCV0AmQjkbNaXRAdy+FCmdgwDBSGzwRQBZGgUrZwEALBiOearGAwGwJhDCJwFbXl1rhAsIefdKesASoF5oJiD3QAi5B9IDuQeaeyDU8SNOwEOVRP4LDvirPSAe9yXd7oB1rXzJBKrm50ygasdj5kzAlZ/4FtwbPr8HOLwvPE6+VlyA/ROEjYEpRhLQZgAAAABJRU5ErkJggg=='); 71 | } 72 | 73 | .leaflet-touch .leaflet-control-measure .leaflet-control-measure-toggle, 74 | .leaflet-touch .leaflet-control-measure .leaflet-control-measure-toggle:hover { 75 | background-size: 16px 16px 76 | } 77 | 78 | .leaflet-control-measure .startprompt h3 { 79 | margin-bottom: 10px 80 | } 81 | 82 | .leaflet-control-measure .startprompt .tasks { 83 | margin-top: 0; 84 | padding-top: 0; 85 | border-top: 0; 86 | text-align: left 87 | } 88 | 89 | .leaflet-control-measure .leaflet-control-measure-interaction { 90 | padding: 10px 12px 91 | } 92 | 93 | .leaflet-control-measure .results .group { 94 | margin-top: 10px; 95 | padding-top: 10px; 96 | border-top: 1px dotted #eaeaea 97 | } 98 | 99 | .leaflet-control-measure .results .group:first-child { 100 | margin-top: 0; 101 | padding-top: 0; 102 | border-top: 0 103 | } 104 | 105 | .leaflet-control-measure .results .heading { 106 | margin-right: 5px; 107 | color: #999 108 | } 109 | 110 | /* assets/start.png */ 111 | .leaflet-control-measure a.start { 112 | display: inline; 113 | width: auto; 114 | height: auto; 115 | padding-left: 20px; 116 | margin-right: 4px; 117 | line-height: 1em; 118 | border: 0; 119 | text-align: left; 120 | background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAY1JREFUKJF9kL9PEwEcxd/3y+XaXrwKCZsx4uLQiQQRZHOUmYEU45mL1CCVpH+JwxEx6CB6HfixM7KQ8sM2TB2cHHRzMCTt2cbe+zrUSxsHP+PLey/v+xX8ZaXWKHgddxNAmcYSACjQNpW69jtv9vYe9QBAAKActu44TnpMwlXRyEQuhzW2IMAWgcSZ4OMPOw++yUqtUfC6TgvEl8QflI9eL/3CGJVK0+uB+4TencoV59TruJsk3MwcvLiaCZ635rLA7u79hIm7qqR/3bt+qQDKKhplzTROm6aNp+ufq1kojme7prpNsTWlsTTanKEuRKIn683DtVfnxeGxcqHUkuI/iBj/1RwF2gZbAHCWiST7KlL79G5+Z2TlQwBtNZW6AFuVStMDgHSAHxOwxY9j5jA89QGpQiSWIDjJpzm/qeBXJu5qHM92xyeE4an/W3MHgN2aLEzOCwA827i8PUj1WEnfVLcFcjGaIVUjfxJcrr9f/C5ZUxCc5M29sTF8nZaGqrUhEt/MF99G0b0+APwB15Gn8fy9beQAAAAASUVORK5CYII='); 121 | background-repeat: no-repeat; 122 | background-position: 0 50%; 123 | background-size: 12px 12px; 124 | color: #5e66cc; 125 | text-decoration: none 126 | } 127 | 128 | .leaflet-control-measure a.start, 129 | .leaflet-control-measure a.start:hover { 130 | background-color: transparent 131 | } 132 | 133 | /* assets/start_@2X.png */ 134 | .leaflet-retina .leaflet-control-measure a.start { 135 | background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAA41JREFUSImNlU9oVFcUxn/ne28UxKWIRKiYpRaqZpIUagm6aZfiQlLNRBzyT+nGNmiLe2nUtkLBJhnRxolRoVBc1GXqIoqZTEoW6sZN/VNqTXdWsJl553YxkzSkM5N8m/feved837mP891jNMCx44XmJFEnsA/3nQ6bAEzMG3pMYNIU3Rgb2f1bPQ6rtdjV82A7Fp8j+EFJalSEu7vJfkzKOjVxpeXpqgKZ3kImBIYlbagSlGS6G2Aa+APAjCag3d07JKWqUm/M1T92OX29rkB338xpsK8AHN5aCN/E5eji1at75muedGBus8oLJx1OSloPEEIYzOdav/6fQKa3kDHTNYDg4YlH0YHrI3seN/o9/wkV3rVEt81oroocyedaJ5YEunoebAc9lLQheHgS4tTe8eFdr9ZCvoijJ6a3eCm6Z0Yz7n8HaWd+NP1MAFI8JGmDw1uPogMrybPZ2SYINRtiEWOX2l8G6SD4AtJGgyEAO3a80Fwq8USSQghn87nWMyuTM30zA0Y4UEJdN0bTfzUS6u4pXED63N3dPWpWkqhTkty9FJeji/VT9VHkYe5IT/HDRgK2LlwAEkmKY+8UsA9Aprv1umVJQrY1Er909xa/rPfLxi61vwSmANzDfuG+E6Da52tBhHE201O880lfcVPNiBAKlYK0Q4v2p2qitcJkH0ce5jJ9xb01dn+vPH1zw2tgNUgWVo0xMQ9L9l87AndCKtmVH01P1djcWqV/FRt6DJW7ZU3ETtktnBnPpc9D7RN4oF0G4I9EYBLA3Tu6BuY2N+QOPHfzjvFc67l65NnsbJNkH1TibVKm6Ia7u6SUygsn65EH959tXbJ7PNd2v1ERpTgMAhGQmNlNA8j0zdwy7JC7/0NMeny47eHypKMnpreMXWr7s17Vi8gMFHaHMtOSUrhPXLvcdkQASVmnwN9IWm+Jbh89Mb1leWLFPI3Js9nZJnN+kpRyeJ3gpwEEMHGl5am5+gHMaPZSdK+r/9f3GhGurLwcJ/dB2wAM671++f0Xlfdl6O4tDmKcr3z5As53ti5cqNq/ZtWlOAwG90+XJlsIn13LtX67GFNjZM4cthBGkDZWlxJgqmL/RYeGrR5or3ZLBODw2rDe/GjLreV8NS+sTF/xHYMhdz+02tAHEtxvKcUXP3zf9nzlZsMhcjg7uy2OvdM97Je0A7zqE70Cf+TBJs3sZn40/awex78erYTTwi3/3gAAAABJRU5ErkJggg=='); 136 | } 137 | 138 | .leaflet-control-measure a.start:hover { 139 | opacity: .5; 140 | text-decoration: none 141 | } 142 | 143 | /* assets/cancel.png */ 144 | .leaflet-control-measure a.cancel { 145 | display: inline; 146 | width: auto; 147 | height: auto; 148 | padding-left: 20px; 149 | margin-right: 4px; 150 | line-height: 1em; 151 | border: 0; 152 | text-align: left; 153 | background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAS9JREFUKJGFkDFOAlEURc8dRphJFNmBHYnQYbTHDnsa0BDBRq1YC4naIQbWYEloqKQyswIXQEgwDIn5z2IATUR95X/nvpz7xWqq7XEYztO3QM2wAoCkyLCBt5zf9XrlGEAAtebkwPfdM+iQLWMQpVKu8nh/8qZqexyG7zuT3+DvoVwme+QlGmtYTcMGG8h4MnOtlUpxFs9ufKD2BbjTULqMwZlhobhaoO5mL+q+YQUlVZB0HoMF0EKwwLpC9XVApoL3w9UwgOk00LYuvqQIKK2dEw3rBrmFhSR6wMXqXOQbNhAqJQ9utECJhiAGc7KRZ1oF1FejMQxcZu9FUPznW19zmeyx1+uV41TKVQyiv2DnPs46nfxyU6zRGAaW3r02UZepsHYG9feD7EOnk18CfAKwIX1qvqPBeQAAAABJRU5ErkJggg=='); 154 | background-repeat: no-repeat; 155 | background-position: 0 50%; 156 | background-size: 12px 12px; 157 | color: #5e66cc; 158 | text-decoration: none 159 | } 160 | 161 | .leaflet-control-measure a.cancel, 162 | .leaflet-control-measure a.cancel:hover { 163 | background-color: transparent 164 | } 165 | 166 | /* assets/cancel_@2X.png */ 167 | .leaflet-retina .leaflet-control-measure a.cancel { 168 | background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAApxJREFUSImtlr1PWlEYxp/ncE1KYWy6Gh3FwUZiOtiYuqlbGwxRaKJRjI5tqon/gf4BpqIxERC1doaNxLaD8SNxUOdqOukoiLHc83YALdwPhLbP+J5zfs977n3OPZeoo7Hp/XbTVGEArwEEBHhWHpErgmcQ5Kg8m+vLL364MehUjEzstZHGIiBvSKp6TYiIBvHFLKnZ9Fr3+aMG0cn9KKg+EXhaD+xgVaDm1PpqcKO6WtPdu9jBHKkSzcMBgD5RSEVjhx9qqtWdkyrRPNguAUaT8WD6wSAysddGZZz8XedODpIXMpCMBy8UAChlLNjgInmIHgTwvQ5qtzxHCjVV0k9gAQDU2PR+u4i8ta4kVSix0pMtGk8GAPnmBNc3xlBipScLkZB9EzI8Mn7UqkxThZ2iKNDzoZkT/85SZ75oeActJrv6xhhKpboKoZkTP6jm7Q1SGYYOK5QPkYP4ylsqZiKRY9/OUmde37QMiMhXK9xbus0C6HUiCNivAAScDcom9P7KRCLHvlSqqyDFlsFG4QBAoIPR2OEdgRZ3E6C6awBoBF7Zw13dz8D/kALk6pE5Nc/8z4t3TVeVeKkInjUK95Zus95SMVMnXRbJqYIg1ygcQG+ddNmkBTlF5dkUEW031wvuaalNF1T51FpkktwiAERjB9sEhy0OBYiEKofILS27Qlmk4DNAn2UsnYgHRw0AMEtq1jD0UO0k+kBmXMD36qOwz7Z54Frr0hxQuQ/Sa93n1Jx6BNaEOLmx+vLngwEArK8GNyD4+M9skffJePf2g5V1PBo7HKHIMkh/U1zgGuBkNRywXJkAkIwH00IGAGw5pssuE0Da49EBKxxw+au418j4Uath6LCA/QQ6AHleWXYJyKkW5EhuJePBCzfGbyl+TiY9AObiAAAAAElFTkSuQmCC'); 169 | } 170 | 171 | .leaflet-control-measure a.cancel:hover { 172 | opacity: .5; 173 | text-decoration: none 174 | } 175 | 176 | /* assets/check.png */ 177 | .leaflet-control-measure a.finish { 178 | display: inline; 179 | width: auto; 180 | height: auto; 181 | padding-left: 20px; 182 | margin-right: 4px; 183 | line-height: 1em; 184 | border: 0; 185 | text-align: left; 186 | background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAASVJREFUKJF1kDFLAgEYhp/37tQ7KPMftAnZZtjSkg2B7S5KHLRVk3O/IQiEakzQra2h0SannOR+QWuLYKF03teQwkHeO3483/e+7ydWanZGQTDLXwMtwyoAkiLDBs5idt/r1ecAAmhdjHc9L3kF7bFBBpHrJo2nh8MPNTujIPjKjbPg9FKpUDxw/mJkw2Y8G3wL9qfz6ZUDtLLP2l0gQiACMNF21gVX+kzDvnQzx14ENQCZKk7K+s39cSoGkzQMOkmbepIioCpxHOeW57l4ceR5/nITDBZ5hg2EqgBCt7FXyMXY6X8YQH2F4dBPCtvvgv3M8oDBpFQo1pxerz533aRhq09kwUkSn3W75YXWwzAc+pbfujTRlqmyzgzq7/jFx263vAD4BStdctyYQ7zEAAAAAElFTkSuQmCC'); 187 | background-repeat: no-repeat; 188 | background-position: 0 50%; 189 | background-size: 12px 12px; 190 | color: #5e66cc; 191 | text-decoration: none 192 | } 193 | 194 | .leaflet-control-measure a.finish, 195 | .leaflet-control-measure a.finish:hover { 196 | background-color: transparent 197 | } 198 | 199 | /* assets/check_@2X.png */ 200 | .leaflet-retina .leaflet-control-measure a.finish { 201 | background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAlZJREFUSImllr9PU1EYhp/3tJMyGqIuBhYNnQyXhMRJNlcHg0AxIC3pqhFi4iCLCf4FtFaUFgok/AMmBldSqpOwuAhhghFx6r2fAwX641Jy6zu+57vP+30n5+Rc0UYTmXKv77th4CGQMLhxumJHQrsYm3Kx1aXs/d+XMRRmjk1t9Ujx92CPJbl2TZhZgNjwq26mtNi/d2VAMlVOIrcguNYOHBJ1okDTS3lvpd5t6G48vT0ruUJ0OICum2M5ma68bHDrO5dcITq4VQajxZxXOg8Ym9rqkYv/7KzzsAT7Y1KimPP2HYBz8fn/gRv8bTCkLsE8gCYy5d5qVb+uOi1ttOQH1Tcxxb8i7l4MYYHvu17n+264c7h97rnVP7mSHzxAZBqHkIvHg2HH6SXqEO49n5tT8CxduWdGqaUCDTkgERlt9qkeHhjfJG421wn63MX1b8F8waiGwXtve1NXwWvV3aF7b5At5LxHOHtaHxINfioHdtRq6gfICtmBjbOQTuCgQye02zpBsDCerkwB1EIeRIcD2I7GU5XXiHchixaI1HJ24OOZEw0Ogdmsk4utmlkQMp6c8SGZKk92Agd8SWsCSKa314WehNeZmektkIkABygVct6oA/CrbgbsJLxOkpiLAjc49oPqLNTeg9Ji/54CTUfo7goptZIfPDgPAFjKeysYr/6bbfaimOtfP49qXk+mKyMyyyJ1ReLCMShVD4emJxOgmPNKJiWAtfDT1SIfKMViQaIZDpf8VZxpZPL7nXg8GDY0JOgD6659dgi2ExibktaKOW//MsY/pXkXxnBJQFMAAAAASUVORK5CYII='); 202 | } 203 | 204 | .leaflet-control-measure a.finish:hover { 205 | opacity: .5; 206 | text-decoration: none 207 | } 208 | 209 | /* assets/focus.png */ 210 | .leaflet-measure-resultpopup a.zoomto { 211 | display: inline; 212 | width: auto; 213 | height: auto; 214 | padding-left: 20px; 215 | margin-right: 4px; 216 | line-height: 1em; 217 | border: 0; 218 | text-align: left; 219 | background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAOhJREFUKJGVkTFug0AQRd+sgBOkyT1MvxVdipQpbDcBrsExAq4iipQWpbvt1xeJlBNgsZPCYK1sJ1GmfX//PM3CP0cAXqrjQwqVqmbG4N7b3AFsa29DwIrIeILuo1t9GYAUKqD4pbiYMyQAqpoBrt/lTZyaN7l16RsguzwwBreENq/HZ0TfEFEVrfs2H2Iu17s3pf/E8CSTmCDs+93qMebm9gyiMomZJNyyRWlbe7s4q2itInvBgFJe8wQgBOxc4Po2H4Ahbo15craQESjWpW9++AeLcrgonaBLzw3ZPW+UQxrG9i77a74B+z5bQloZOFAAAAAASUVORK5CYII='); 220 | background-repeat: no-repeat; 221 | background-position: 0 50%; 222 | background-size: 12px 12px; 223 | color: #5e66cc; 224 | text-decoration: none 225 | } 226 | 227 | .leaflet-measure-resultpopup a.zoomto, 228 | .leaflet-measure-resultpopup a.zoomto:hover { 229 | background-color: transparent 230 | } 231 | 232 | /* assets/focus_@2X.png */ 233 | .leaflet-retina .leaflet-measure-resultpopup a.zoomto { 234 | background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAXBJREFUSIntlb8uBFEUxn/n7hAV1XoIpazYll5ETbays56AZ+AJGBJBoRPUotVsRCmeACsRiUQx636KRWbHnzvIavi6c/J95zvnzJ174R8BWDaozTdnMK1iNpzNbycV4x3U4qaysVALo76zNnbwknPddm+Lf61bK5snyeaibkan+Ecd55Hn1eKm8g12T9AD9NwgClNgtnE64uRXgAlDQhyb2eJWUjkPaYO7nm2cjpS8P8EYzOYFdw6qIZPgipz8CsYg0l4K5VLqhhEHBkMeloP6EAGYAEjNGrtJ5WZzc7TlS1EMYNLkjw0MCWAgda/rbKcPhY4xFPnI4hhj6jHy63MLZ3E7fbB+F6133O0oJA9PYLYouMOYdr591V/qu8RsCulW/nHpSwa1uKn8/bKVVM4dVAWHSPdI98C+5Ks7G+MXIX2h/+D5KE4X4X46QS/wu1eFUMuwcn6PRd+DZ1xlg9x7QB3p+nu9dop7rP4D/V/EE6UhikMKpx/oAAAAAElFTkSuQmCC'); 235 | } 236 | 237 | .leaflet-measure-resultpopup a.zoomto:hover { 238 | opacity: .5; 239 | text-decoration: none 240 | } 241 | 242 | /* assets/trash.png */ 243 | .leaflet-measure-resultpopup a.deletemarkup { 244 | display: inline; 245 | width: auto; 246 | height: auto; 247 | padding-left: 20px; 248 | margin-right: 4px; 249 | line-height: 1em; 250 | border: 0; 251 | text-align: left; 252 | background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAMCAYAAAC0qUeeAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAALlJREFUKJFjZEACcWmn5zMwMCbA+P///ZuzeI5ZKozPaF+/n4WBgYFB7gmfKiPj30PfeP/Irem3+h5SeIyT4yvLQxZGFuv7Eh/vMzAwMDDGpJz6wcTExM5AEPz7BbX+zH98ymDyTMiCsamnq7HRMICimJGRsQUbjVUxIUAvxf8ZqrDSSCoY49JO/UtLO8OFzbSkpCO8cSlnfjMwMDCwMDAw/mdgOD3nBwPDp7i0MxiK/0BsmMbAwMAAACl8PxDSJvyvAAAAAElFTkSuQmCC'); 253 | background-repeat: no-repeat; 254 | background-position: 0 50%; 255 | background-size: 12px 12px; 256 | color: #5e66cc; 257 | text-decoration: none 258 | } 259 | 260 | .leaflet-measure-resultpopup a.deletemarkup, 261 | .leaflet-measure-resultpopup a.deletemarkup:hover { 262 | background-color: transparent 263 | } 264 | 265 | /* assets/trash_@2X.png */ 266 | .leaflet-retina .leaflet-measure-resultpopup a.deletemarkup { 267 | background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAYCAYAAAD+vg1LAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAW5JREFUSIntlbtKA2EQhc8/axIVrUQFBRsRRLCL+gIRQeuAxbpNLq2laGklpLYxVkkh2lip4AsIZkmZRiy0sPCCoEYwlxmLJLLZi+wmYpXTnRnmm/mHYVfBQ+uJq/EwhfJQHANItWdZAFxWQfrRQfTZrZ68wGEtlIHCshMKNGK0EhLsedW7FDWn1bR7ACGImsllF26teSNVmIaSG2ZUVEQm8/tLLw5wPH6iPc6NtjWYehjaVkrtQnCey0bX3JobKfMMCqsQ7NxNvGesubHSkygjaX6CMOD1pM7EZRJCBUD9L7ECqv0YI22KkTalU5i93vMqutX/g/XkdVlPm29+vV19nh2JBoN43xN3qx64B3bK847B/CFEdd/eLzh3uDgcxNvVXIVYPvTi+lf5Xc4ay465DAAbieJsUKyRKM43EPzaijVXoYSlcEoKutKkZKTNoBM3MXRsAwMRrm5+aeERMMeIKNC1MDMrogvur221Yt/I6IasMWr/dwAAAABJRU5ErkJggg=='); 268 | } 269 | 270 | .leaflet-measure-resultpopup a.deletemarkup:hover { 271 | opacity: .5; 272 | text-decoration: none 273 | } -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | module.exports = { 3 | entry: './dist/react-leaflet-measure.min.js', 4 | output: { 5 | library: { 6 | root: 'ReactLeafletMeasure', 7 | amd: 'react-leaflet-measure', 8 | commonjs: 'react-leaflet-measure' 9 | }, 10 | libraryExport: 'default', 11 | libraryTarget: 'umd' 12 | }, 13 | externals: { 14 | debug: 'debug', 15 | leaflet: { 16 | commonjs: 'leaflet', 17 | commonjs2: 'leaflet', 18 | root: 'L' 19 | }, 20 | 'react-leaflet': { 21 | commonjs: 'react-leaflet', 22 | commonjs2: 'react-leaflet', 23 | root: 'ReactLeaflet' 24 | }, 25 | react: { 26 | commonjs: 'react', 27 | commonjs2: 'react', 28 | root: 'React' 29 | } 30 | }, 31 | mode: 'production', 32 | module: { 33 | rules: [ 34 | { 35 | test: /\.(js|jsx)$/, 36 | exclude: /(node_modules|bower_components)/, 37 | loader: 'babel-loader', 38 | options: { 39 | presets: ['env', 'react'], 40 | plugins: ['transform-class-properties'] 41 | } 42 | }, 43 | { 44 | test: /\.css$/, 45 | exclude: /node_modules/, 46 | use: [ 47 | { loader: 'style-loader' }, 48 | { loader: 'css-loader' } 49 | ] 50 | } 51 | ] 52 | } 53 | }; 54 | --------------------------------------------------------------------------------