{"_id":"@dianahilton/leaflet.pm","_rev":"2-6601e182fb691fb1ac458aae9f5f15c2","name":"@dianahilton/leaflet.pm","dist-tags":{"latest":"1.2.2"},"versions":{"1.2.2":{"name":"@dianahilton/leaflet.pm","version":"1.2.2","description":"A Leaflet Plugin For Editing Geometry Layers in Leaflet 1.0","keywords":["leaflet","polygon management","geometry editing","map data","map overlay","polygon","geojson","leaflet-draw","data-field-geojson","ui-leaflet-draw"],"main":"dist/leaflet.pm.min.js","dependencies":{"@turf/difference":"^6.0.2","@turf/intersect":"^6.1.3","@turf/kinks":"6.x","lodash":"^4.17.11"},"devDependencies":{"@babel/core":"^7.2.2","@babel/preset-env":"^7.3.1","babel-loader":"^8.0.5","css-loader":"^0.28.11","cypress":"^3.1.4","eslint":"^4.19.1","eslint-config-airbnb-base":"^12.1.0","eslint-config-prettier":"^3.6.0","eslint-plugin-cypress":"^2.2.0","eslint-plugin-import":"^2.15.0","extract-text-webpack-plugin":"^3.0.2","file-loader":"^0.11.1","leaflet":"^1.4.0","prettier":"1.16.1","style-loader":"^0.19.0","uglifyjs-webpack-plugin":"^1.3.0","url-loader":"^0.6.2","webpack":"^3.12.0"},"peerDependencies":{"leaflet":"^1.2.0"},"scripts":{"start":"npm run dev","dev":"webpack --config=webpack.dev.js","test":"$(npm bin)/cypress run","cypress":"$(npm bin)/cypress open","build":"webpack --config=webpack.build.js","prepare":"npm run build","eslint-check":"eslint --print-config . | eslint-config-prettier-check","eslint":"eslint src/ --fix","prettier":"prettier --write 'src/**/*.{js, css}'","lint":"npm run eslint && npm run prettier"},"repository":{"type":"git","url":"git+https://github.com/codeofsumit/leaflet.pm.git"},"author":{"name":"Sumit Kumar","email":"sk@outlook.com","url":"http://twitter.com/TweetsOfSumit"},"license":"MIT","bugs":{"url":"https://github.com/codeofsumit/leaflet.pm/issues"},"homepage":"https://leafletpm.now.sh","prettier":{"trailingComma":"es5","tabWidth":2,"semi":true,"singleQuote":true},"gitHead":"56317fa5317bf308c8b926146519bcf1356477c0","_id":"@dianahilton/leaflet.pm@1.2.2","_shasum":"57f746f710d845a7047eceb962ff6e0723406fa1","_from":".","_npmVersion":"3.7.3","_nodeVersion":"11.2.0","_npmUser":{"name":"dianahilton","email":"diana.hilton@sunrun.com"},"dist":{"shasum":"57f746f710d845a7047eceb962ff6e0723406fa1","tarball":"https://registry.npmjs.org/@dianahilton/leaflet.pm/-/leaflet.pm-1.2.2.tgz","integrity":"sha512-6fAjJRQj5o+OdWXwyfhiZXP3jwQWhgEL9yPwM6dAHIeheKILPe6Yd1YSV3PVGXpFIqUR3ujpX0N/oFKHzAo9gg==","fileCount":5,"unpackedSize":921123,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcS2AiCRA9TVsSAnZWagAAKCMP/jaXIEIRF9lhJZP6utRj\n3EiE7vTYhR2tKrf0XwC6y4zKUzxoz0LQM3GdmJ5lny1F+wnGt/uBZ3uwooNp\nK2hGX1FPM5/KSqfW6jIu+l2ZLffTKX+ZKxdihepvm3/T8Lf2r9DLQTMnZ7rt\nGkQ/LjTuokaKEdmXgjETfMPD2hOEuG1G5EsL3OR8aNMak6FQQHkIEEscEyXE\nheeTKGRwSDBQjlW3UtXsfyDh4fuHuJIAqAAs7VTgtd7M3JIoo71t6t5UfhDF\nAwmyrnodpzszf73FNnpzN/g/4JstfUVEHNjhxim4XroTqfKq9mE/81y9Fdlh\nZyvHIB4mdHZLnMJ7DsYsMcOOABHfqq4tX1LK3i0QfOXdvyi811blg+hmVd9i\nl2/wV/uQQKS0In9PJ/rV4jioS5vrspbTbsXwq3leq6ZBVVxvLTE1DJo982xX\n+P1usvXRdzV33oH1GQ72t1n0FUES9Dq4qYoTgX3hitIfM6PTao/XGFY73BsH\nOI9RfoF7q6QF/cvPKL4hyfB5U6gq9EBjNPs0kJEfGIDxRHvL8elOqvry3bMn\n9ZfA9iH+xIMIjqQYf9hLaKZid/TQtGs9ubf0qURSJj3Eu99RHA8r7dOCFd96\n5xUG0dMCKnAAtx4zSCsKOhlXSTGGhcCejm6NlHqvPt4/qCYg6COOKWSgRDGH\neIuM\r\n=Dswl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCgUfYh3zgJd0VMgeQqjybSgOd/QBMIiuLAeWo/osZD+QIgEnZ5UINPTs0I7XKuXEWb5rfQhwhk7SpqKQgdOQzMqSA="}]},"maintainers":[{"name":"dianahilton","email":"diana.hilton@sunrun.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/leaflet.pm_1.2.2_1548443680863_0.5095993251072655"},"_hasShrinkwrap":false,"deprecated":"this package has been deprecated"}},"time":{"created":"2019-01-25T19:14:40.676Z","1.2.2":"2019-01-25T19:14:41.068Z","modified":"2022-04-05T04:22:00.551Z"},"maintainers":[{"name":"dianahilton","email":"diana.hilton@sunrun.com"}],"description":"A Leaflet Plugin For Editing Geometry Layers in Leaflet 1.0","homepage":"https://leafletpm.now.sh","keywords":["leaflet","polygon management","geometry editing","map data","map overlay","polygon","geojson","leaflet-draw","data-field-geojson","ui-leaflet-draw"],"repository":{"type":"git","url":"git+https://github.com/codeofsumit/leaflet.pm.git"},"author":{"name":"Sumit Kumar","email":"sk@outlook.com","url":"http://twitter.com/TweetsOfSumit"},"bugs":{"url":"https://github.com/codeofsumit/leaflet.pm/issues"},"license":"MIT","readme":"

\n \n \"Geoman\n \n

\n

\n Leaflet.PM\n

\n

\n Leaflet Plugin For Creating And Editing Geometry Layers
\n Draw, Edit, Drag, Cut and Snap Layers
\n Supports Markers, Polylines, Polygons, Circles, Rectangles, LayerGroups, GeoJSON and MultiPolygons\n

\n

\n \n \"npm\n \n \n \"\"\n \n \n \"star\n \n \n \"NPM\n \n

\n\n## [Demo (click here)](https://leafletpm.now.sh)\n\n![Demo](https://file-gmeileqfmg.now.sh/)\n\nNeed advanced features like GeoJSON Export, storing meta data and more?\\\nCheck out **[Geoman](https://geoman.io)**.\n\n## Documentation\n\n- [Installation](#installation)\n- [Getting Started](#getting-started)\n- [Drawing Mode](#drawing-mode)\n- [Editing Mode](#edit-mode)\n- [Drag Mode](#drag-mode)\n- [Removal Mode](#removal-mode)\n- [Cutting Mode](#cutting-mode)\n- [Style Customization](#customize-style)\n- [Need a feature?](#feature-request) | [Existing Feature Requests](https://github.com/codeofsumit/leaflet.pm/issues?q=is%3Aissue+is%3Aclosed+label%3A%22feature+request%22+sort%3Areactions-%2B1-desc)\n\n### Installation\n\n#### Install via npm\n\n```\nnpm install leaflet.pm --save\n```\n\n#### Install Manually\n\nDownload\n[`leaflet.pm.css`](https://unpkg.com/leaflet.pm@latest/dist/leaflet.pm.css) and\n[`leaflet.pm.min.js`](https://unpkg.com/leaflet.pm@latest/dist/leaflet.pm.min.js)\nand include them in your project.\n\n#### Include via CDN\n\nCSS\n\n```html\n\n```\n\nJS\n\n```html\n\n```\n\n#### Include as ES6 Module\n\n```js\nimport 'leaflet.pm';\nimport 'leaflet.pm/dist/leaflet.pm.css';\n```\n\n### Getting Started\n\n#### Init Leaflet.PM\n\nJust include `leaflet.pm.min.js` right after Leaflet. It initializes itself. If\nyou want certain layers to be ignored by leaflet.pm, pass `pmIgnore: true` to\ntheir options when creating them. Example:\n\n```js\nL.marker([51.50915, -0.096112], { pmIgnore: true }).addTo(map);\n```\n\n#### Leaflet.PM Toolbar\n\n\"Leaflet.PM\n\nYou can add a toolbar to the map to use leaflet.pm features via a user interface.\n\n```js\n// add leaflet.pm controls with some options to the map\nmap.pm.addControls({\n position: 'topleft',\n drawCircle: false,\n});\n```\n\nSee the available options in the table below.\n\n| Option | Default | Description |\n| :------------ | :---------- | :----------------------------------------------------------------------------------------------- |\n| position | `'topleft'` | toolbar position, possible values are `'topleft'`, `'topright'`, `'bottomleft'`, `'bottomright'` |\n| drawMarker | `true` | adds button to draw markers |\n| drawPolyline | `true` | adds button to draw rectangle |\n| drawRectangle | `true` | adds button to draw rectangle |\n| drawPolygon | `true` | adds button to draw polygon |\n| drawCircle | `true` | adds button to draw cricle |\n| editMode | `true` | adds button to toggle edit mode for all layers |\n| dragMode | `true` | adds button to toggle drag mode for all layers |\n| cutPolygon | `true` | adds button to cut a hole in a polygon |\n| removalMode | `true` | adds a button to remove layers |\n\nIf you are wondering how e.g. the `drawPolygon` button will enable drawing mode\nwith specific options, here it is: Simply enable drawing mode programatically,\npass it your options and disable it again. The options will persist, even when\nthe mode is enabled/disabled via the toolbar.\n\nExample:\n\n```js\n// make markers not snappable during marker draw\nmap.pm.enableDraw('Marker', { snappable: false });\nmap.pm.disableDraw('Marker');\n\n// let polygons finish their shape on double click\nmap.pm.enableDraw('Poly', { finishOn: 'dblclick' });\nmap.pm.disableDraw('Poly');\n```\n\nAll available options are specified in the Drawing Mode Section below.\n\n### Drawing Mode\n\nUse Drawing Mode on a map like this\n\n```js\n// enable polygon drawing mode\nmap.pm.enableDraw('Poly', {\n snappable: true,\n snapDistance: 20,\n});\n\n// disable drawing mode\nmap.pm.disableDraw('Poly');\n```\n\nCurrently available shapes are `Line`, `Rectangle`, `Poly`, `Marker`, `Circle`.\nYou can get an array of all available shapes with:\n\n```js\nmap.pm.Draw.getShapes();\n```\n\nSee the available options in the table below.\n\n| Option | Default | Description |\n| :-------------------- | :------------------------------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------- |\n| snappable | `true` | enable snapping to other layers vertices for precision drawing. Can be disabled by holding the `ALT` key. |\n| snapDistance | `20` | the distance to another vertex when a snap should happen |\n| snapMiddle | `false` | allow snapping to the middle of a layers segments (between two vertexes) |\n| tooltips | `true` | show helpful tooltips for your user |\n| allowSelfIntersection | `true` | allow self intersections |\n| templineStyle | `{ color: 'red' },` | [leaflet path options](https://leafletjs.com/reference-1.4.0.html#path) for the lines between drawn vertices/markers. |\n| hintlineStyle | `{ color: 'red', dashArray: [5, 5] }` | [leaflet path options](https://leafletjs.com/reference-1.4.0.html#path) for the helper line between last drawn vertex and the cursor. |\n| cursorMarker | `true` | show a marker at the cursor |\n| finishOn | `null` | leaflet layer event to finish the drawn shape, like `'dblclick'`. [Here's a list](http://leafletjs.com/reference-1.2.0.html#interactive-layer-click). |\n| markerStyle | `{ draggable: true }` | [leaflet marker options](https://leafletjs.com/reference-1.4.0.html#marker-icon) (only for drawing markers). |\n\nYou can listen to map events to hook into the drawing procedure like this:\n\n```js\nmap.on('pm:drawstart', (e) => {\n console.log(e);\n});\n```\n\nHere's a list of map events you can listen to:\n\n| Event | Params | Description |\n| :----------- | :----- | :------------------------------------------------------------------------------------- |\n| pm:drawstart | `e` | Called when drawing mode is enabled. Payload includes the shape type and working layer |\n| pm:drawend | `e` | Called when drawing mode is disabled. Payload includes the shape type. |\n| pm:create | `e` | Called when a shape is drawn/finished. Payload includes shape type and the drawn layer |\n\nThere are also several events for layers during draw. Register an event like this:\n\n```js\n// listen to vertexes being added to currently drawn layer (called workingLayer)\nmap.on('pm:drawstart', ({ workingLayer }) => {\n workingLayer.on('pm:vertexadded', (e) => {\n console.log(e);\n });\n});\n```\n\nHere's a list of layer events you can listen to:\n\n| Event | Params | Description |\n| :-------------- | :----- | :------------------------------------------------------------------------------------------------------------------- |\n| pm:vertexadded | `e` | Called when a new vertex is added. Payload includes the new vertex, it's marker, index, working layer and shape type |\n| pm:snapdrag | `e` | Fired during a marker move/drag. Payload includes info about involved layers and snapping calculation. |\n| pm:snap | `e` | Fired when a vertex is snapped. Payload is the same as in `snapdrag` |\n| pm:unsnap | `e` | Fired when a vertex is unsnapped. Payload is the same as in `snapdrag` |\n| pm:centerplaced | `e` | Called when the center of a circle is placed/moved. |\n\n### Edit Mode\n\nLet's you edit vertices of layers. Use it like this:\n\n```js\n// enable edit mode\nlayer.pm.enable({\n allowSelfIntersection: false,\n});\n```\n\nSee the available options in the table below.\n\n| Option | Default | Description |\n| :-------------------- | :------ | :-------------------------------------------------------------------------------------------------------- |\n| snappable | `true` | Enable snapping to other layers vertices for precision drawing. Can be disabled by holding the `ALT` key. |\n| snapDistance | `20` | The distance to another vertex when a snap should happen. |\n| allowSelfIntersection | `true` | Allow/Disallow self-intersections on polygons and polylines. |\n| preventMarkerRemoval | `false` | Disable the removal of markers/vertexes via right click. |\n\nThe following methods are available for layers under `layer.pm`:\n\n| Method | Returns | Description |\n| :-------------------- | :-------- | :-------------------------------------------------------------------------------------------------- |\n| enable(`options`) | - | Enables edit mode. The passed options are preserved, even when the mode is enabled via the Toolbar. |\n| disable() | - | Disables edit mode. |\n| toggleEdit(`options`) | - | Toggles edit mode. Passed options are preserved. |\n| enabled() | `Boolean` | Returns `true` if edit mode is enabled. `false` when disabled. |\n| hasSelfIntersection() | `Boolean` | Returns `true` is the layer has a self intersection. |\n\nYou can listen to events related to editing on events like this:\n\n```js\n// listen to when a layer is changed in edit mode\nlayer.on('pm:edit', (e) => {\n console.log(e);\n});\n```\n\nThe following events are available on a layer instance:\n\n| Event | Params | Description |\n| :----------------- | :----- | :--------------------------------------------------------------------------------------------------- |\n| pm:edit | `e` | Fired when a layer is edited. |\n| pm:vertexadded | `e` | Fired when a vertex is added |\n| pm:vertexremoved | `e` | Fired when a vertex is removed |\n| pm:markerdragstart | `e` | Fired when dragging of a marker which corresponds to a vertex starts |\n| pm:markerdragend | `e` | Fired when dragging of a vertex-marker ends |\n| pm:snap | `e` | Fired when a vertex-marker is snapped to another vertex. Also fired on the marker itself. |\n| pm:unsnap | `e` | Fired when a vertex-marker is unsnapped from a vertex. Also fired on the marker itself. |\n| pm:intersect | `e` | When `allowSelfIntersection: false`, this event is fired as soon as a self-intersection is detected. |\n| pm:centerplaced | `e` | Fired when the center of a circle is moved |\n\nYou can enable Edit Mode for all layers on a map like this:\n\n```js\n// enable global edit mode\nmap.pm.toggleGlobalEditMode(options);\n```\n\nThe following methods are available on `map.pm`:\n\n| Method | Returns | Description |\n| :------------------------------ | :-------- | :-------------------------------------------------------------------- |\n| enableGlobalEditMode(`options`) | - | Enables global edit mode. |\n| disableGlobalEditMode() | - | Disables global edit mode. |\n| toggleGlobalEditMode(`options`) | - | Toggles global edit mode. |\n| globalEditEnabled() | `Boolean` | Returns `true` if global edit mode is enabled. `false` when disabled. |\n\nYou can also listen to specific edit mode events on the map instance like this:\n\n```js\nmap.on('pm:globaleditmodetoggled', (e) => {\n console.log(e);\n});\n```\n\n### Drag Mode\n\n```js\n// toggle drag mode like this:\nmap.pm.toggleGlobalDragMode();\n```\n\nThe following methods are available on `map.pm`:\n\n| Method | Returns | Description |\n| :---------------------- | :-------- | :-------------------------------------------------------------------- |\n| toggleGlobalDragMode() | - | Toggles global drag mode. |\n| globalDragModeEnabled() | `Boolean` | Returns `true` if global drag mode is enabled. `false` when disabled. |\n\nThe following events are available on a layer instance:\n\n| Event | Params | Description |\n| :----------- | :----- | :--------------------------------------- |\n| pm:dragstart | `e` | Fired when a layer starts being dragged. |\n| pm:drag | `e` | Fired when a layer is dragged. |\n| pm:dragend | `e` | Fired when a layer stops being dragged. |\n\n### Removal Mode\n\n```js\n// toggle drag mode like this:\nmap.pm.toggleGlobalRemovalMode();\n```\n\nThe following methods are available on `map.pm`:\n\n| Method | Returns | Description |\n| :------------------------ | :-------- | :----------------------------------------------------------------------- |\n| toggleGlobalRemovalMode() | - | Toggles global removal mode. |\n| globalRemovalEnabled() | `Boolean` | Returns `true` if global removal mode is enabled. `false` when disabled. |\n\nThe following events are available on a map instance:\n\n| Event | Params | Description |\n| :---------- | :----- | :------------------------------------------------------- |\n| pm:remove | `e` | Fired when a layer is removed via Removal Mode |\n| layerremove | `e` | Standard Leaflet event. Fired when any layer is removed. |\n\n### Cutting Mode\n\n![cut polygon](https://file-xdeoyklwhw.now.sh/)\n\nEnable drawing for the shape \"Cut\" to draw a polygon that gets subtracted from\nall underlying polygons. This way you can create holes, cut polygons in half or\nremove parts of it.\n\nImportant: the cutted layer will be replaced, not updated. Listen to the\n`pm:cut` event to update your layer references in your code. The `pm:cut` event\nwill provide you with the original layer and returns the resulting\nlayer(s) that is/are added to the map as a Polygon or MultiPolygon.\n\n```js\n// enable cutting mode\nmap.pm.Draw.Cut.enable({\n allowSelfIntersection: false,\n});\n```\n\nAvailable options are the [same as in drawing mode](https://github.com/codeofsumit/leaflet.pm/tree/new-docs#drawing-mode).\n\nYou can use these methods on `map.pm.Draw.Cut` to handle Cutting mode:\n\n| Method | Returns | Description |\n| :---------------- | :------ | :------------------- |\n| enable(`options`) | - | Enable Cutting Mode. |\n| disable() | - | Disable Cutting Mode |\n| toggle(`options`) | - | Toggle Cutting Mode |\n\nThe following events are available on a layer instance:\n\n| Event | Params | Description |\n| :----- | :----- | :----------------------------- |\n| pm:cut | `e` | Fired when the layer being cut |\n\nThe following events are available on a map instance:\n\n| Event | Params | Description |\n| :----- | :----- | :-------------------------------- |\n| pm:cut | `e` | Fired when any layer is being cut |\n\n### Customize Style\n\nIn order to change the style of the lines during draw, pass these options to the\n`enableDraw()` function.\n\n```js\n// optional options for line style during draw. These are the defaults\nvar options = {\n // the lines between coordinates/markers\n templineStyle: {\n color: 'red',\n },\n\n // the line from the last marker to the mouse cursor\n hintlineStyle: {\n color: 'red',\n dashArray: [5, 5],\n },\n};\n\n// enable drawing mode for shape - e.g. Poly, Line, Circle, etc\nmap.pm.enableDraw('Poly', options);\n```\n\nTo customize the style of the drawn layer with leaflet options, you can either\npass the options to `enableDraw`:\n\n```js\n// optional options for line style during draw. These are the defaults\nvar options = {\n templineStyle: {},\n hintlineStyle: {},\n pathOptions: {\n // add leaflet options for polylines/polygons\n color: 'orange',\n fillColor: 'green',\n },\n};\n\n// enable drawing mode for shape - e.g. Poly or Line\nmap.pm.enableDraw('Poly', options);\n```\n\nor set the options generally:\n\n```js\nmap.pm.setPathOptions({\n color: 'orange',\n fillColor: 'green',\n fillOpacity: 0.4,\n});\n```\n\n### Feature Request\n\nI'm adopting the Issue Management of lodash which means, feature requests get the \"Feature Request\" Label and then get closed.\nYou can upvote existing feature requests (or create new ones). Upvotes make me see how much a feature is requested and prioritize their implementation.\nPlease see the existing [Feature Requests here](https://github.com/codeofsumit/leaflet.pm/issues?q=is%3Aissue+is%3Aclosed+label%3A%22feature+request%22+sort%3Areactions-%2B1-desc) and upvote if you want them to be implemented.\n\n### Credit\n\nAs I never built a leaflet plugin before, I looked heavily into the code of\nleaflet.draw to find out how to do stuff. So don't be surprised to see some\nfamiliar code.\n\nI also took a hard look at the great\n[L.GeometryUtil](https://github.com/makinacorpus/Leaflet.GeometryUtil) for some\nof my helper functions.\n\nIf you want to support the development of leaflet.pm, consider subscribing to the services of [Geoman](https://geoman.io).\n","readmeFilename":"README.md"}