{"_id":"@deepcyan-ai/ngx-leaflet-draw","_rev":"3-d7730fabd1e2cc2262ab5bf9185c93c6","name":"@deepcyan-ai/ngx-leaflet-draw","dist-tags":{"latest":"20.0.0-1"},"versions":{"0.0.0":{"name":"@deepcyan-ai/ngx-leaflet-draw","version":"0.0.0","license":"MIT","_id":"@deepcyan-ai/ngx-leaflet-draw@0.0.0","maintainers":[{"name":"deepcyan-ai","email":"sayandeep@deepcy.io"}],"dist":{"shasum":"511e22b2bda2027422796a72eaf1ce8f738a9547","tarball":"https://registry.npmjs.org/@deepcyan-ai/ngx-leaflet-draw/-/ngx-leaflet-draw-0.0.0.tgz","fileCount":34,"integrity":"sha512-2OCQXCPQuAzFqDsokuXzJOrQz8Jik1AYNDPfRXntg/9S0jO6fohAF3bITWvfUBlTXYyOJkFsqQOIU7fHWTUJbg==","signatures":[{"sig":"MEUCIExzwQdJt5z9S457dSu97r4TTsOmj7EJaI8tEKkM+iYMAiEA2yC0csS6Zs0jM2RD9pp6apvbQfTX7Cb0F36x8VD1baY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":51751},"gitHead":"64d80efda95ec76d28e35bc0210f2d6a0eaf5264","scripts":{"ng":"ng","demo":"ng serve ngx-leaflet-draw-demo","test":"ng test","build":"ng build ngx-leaflet-draw --configuration production && copyfiles README.md LICENSE CHANGES.md ./dist/ngx-leaflet-draw","watch":"ng build ngx-leaflet-draw --watch --configuration development"},"_npmUser":{"name":"deepcyan-ai","email":"sayandeep@deepcy.io"},"copyright":"Copyright BlueHalo 2007-2024 - All Rights Reserved.","_npmVersion":"10.9.2","description":"[![Build Status][travis-image]][travis-url]","directories":{},"_nodeVersion":"22.17.0","dependencies":{"rxjs":"~7.8.0","tslib":"^2.3.0","leaflet":"1","zone.js":"~0.15.0","bootstrap":"^4.6.1","copyfiles":"^2.4.1","leaflet-draw":"1.0.2","@angular/core":"^19.0.0","@angular/forms":"^19.0.0","@angular/common":"^19.0.0","@angular/router":"^19.0.0","@angular/compiler":"^19.0.0","@angular/animations":"^19.0.0","@bluehalo/ngx-leaflet":"19","@angular/platform-browser":"^19.0.0","@angular/platform-browser-dynamic":"^19.0.0"},"_hasShrinkwrap":false,"devDependencies":{"karma":"~6.3.0","ng-packagr":"^19.0.0","typescript":"~5.6.3","@types/node":"^20.0.0","@angular/cli":"^19.0.0","jasmine-core":"~4.0.0","karma-jasmine":"~4.0.0","@types/jasmine":"~3.10.0","@types/leaflet":"1","karma-coverage":"~2.1.0","@types/leaflet-draw":"1.0.5","@angular/compiler-cli":"^19.0.0","karma-chrome-launcher":"~3.1.0","karma-jasmine-html-reporter":"~1.7.0","@angular-devkit/build-angular":"^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ngx-leaflet-draw_0.0.0_1753711038666_0.35530175791832863","host":"s3://npm-registry-packages-npm-production"}},"20.0.0":{"name":"@deepcyan-ai/ngx-leaflet-draw","version":"20.0.0","license":"MIT","_id":"@deepcyan-ai/ngx-leaflet-draw@20.0.0","maintainers":[{"name":"deepcyan-ai","email":"sayandeep@deepcy.io"}],"dist":{"shasum":"f8da4eb398790c783c52f16156c499cd8b374efe","tarball":"https://registry.npmjs.org/@deepcyan-ai/ngx-leaflet-draw/-/ngx-leaflet-draw-20.0.0.tgz","fileCount":34,"integrity":"sha512-O6A6+Hny0J0ymbGSn+RQn4DUqvy1Bsn0ss65VD1VWQP8VoryHxmbdJqMuvB8fxiVOLnAlz9cJg/33kuylGe5FA==","signatures":[{"sig":"MEYCIQDJRuABMJUFNGCD2mtVRrPnHnGIHmgTGWR59Fmo5939ZQIhAORSwnGZg9WOqyQH5mhlFwKndqK8KKQW6TvCOFoJqeld","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":52139},"gitHead":"845817f062c97a646a6424158d52dfb58135d251","scripts":{"ng":"ng","demo":"ng serve ngx-leaflet-draw-demo","test":"ng test","build":"ng build ngx-leaflet-draw --configuration production && copyfiles README.md LICENSE CHANGES.md ./dist/ngx-leaflet-draw","watch":"ng build ngx-leaflet-draw --watch --configuration development"},"_npmUser":{"name":"deepcyan-ai","email":"sayandeep@deepcy.io"},"copyright":"Copyright BlueHalo 2007-2024 - All Rights Reserved.","_npmVersion":"10.9.2","description":"[![Build Status][travis-image]][travis-url]","directories":{},"_nodeVersion":"22.17.0","dependencies":{"rxjs":"~7.8.0","tslib":"^2.8.1","leaflet":"1","zone.js":"~0.15.0","bootstrap":"^4.6.1","copyfiles":"^2.4.1","leaflet-draw":"1.0.2","@angular/core":"^20.0.0","@angular/forms":"^20.0.0","@angular/common":"^20.0.0","@angular/router":"^20.0.0","@angular/compiler":"^20.0.0","@angular/animations":"^20.0.0","@bluehalo/ngx-leaflet":"20","@angular/platform-browser":"^20.0.0","@angular/platform-browser-dynamic":"^20.0.0"},"_hasShrinkwrap":false,"devDependencies":{"karma":"~6.4.0","ng-packagr":"^20.0.0","typescript":"~5.8.3","@types/node":"^20.0.0","@angular/cli":"^20.0.0","jasmine-core":"~4.0.0","karma-jasmine":"~5.1.0","@angular/build":"^20.0.0","@types/jasmine":"~3.10.0","@types/leaflet":"1","karma-coverage":"~2.2.0","@types/leaflet-draw":"1.0.5","@angular/compiler-cli":"^20.0.0","karma-chrome-launcher":"~3.2.0","karma-jasmine-html-reporter":"~2.1.0"},"_npmOperationalInternal":{"tmp":"tmp/ngx-leaflet-draw_20.0.0_1753711217234_0.2990321387441466","host":"s3://npm-registry-packages-npm-production"}},"20.0.0-1":{"name":"@deepcyan-ai/ngx-leaflet-draw","version":"20.0.0-1","copyright":"Copyright BlueHalo 2007-2024 - All Rights Reserved.","license":"MIT","scripts":{"ng":"ng","demo":"ng serve ngx-leaflet-draw-demo","build":"ng build ngx-leaflet-draw --configuration production && copyfiles README.md LICENSE CHANGES.md ./dist/ngx-leaflet-draw","watch":"ng build ngx-leaflet-draw --watch --configuration development","test":"ng test"},"dependencies":{"@angular/animations":"^20.0.0","@angular/common":"^20.0.0","@angular/compiler":"^20.0.0","@angular/core":"^20.0.0","@angular/forms":"^20.0.0","@angular/platform-browser":"^20.0.0","@angular/platform-browser-dynamic":"^20.0.0","@angular/router":"^20.0.0","@bluehalo/ngx-leaflet":"20","bootstrap":"^4.6.1","copyfiles":"^2.4.1","leaflet":"1","leaflet-draw":"1.0.2","rxjs":"~7.8.0","tslib":"^2.8.1","zone.js":"~0.15.0"},"devDependencies":{"@angular/build":"^20.0.0","@angular/cli":"^20.0.0","@angular/compiler-cli":"^20.0.0","@types/jasmine":"~3.10.0","@types/leaflet":"1","@types/leaflet-draw":"1.0.5","@types/node":"^20.0.0","jasmine-core":"~4.0.0","karma":"~6.4.0","karma-chrome-launcher":"~3.2.0","karma-coverage":"~2.2.0","karma-jasmine":"~5.1.0","karma-jasmine-html-reporter":"~2.1.0","ng-packagr":"^20.0.0","typescript":"~5.8.3"},"_id":"@deepcyan-ai/ngx-leaflet-draw@20.0.0-1","gitHead":"845817f062c97a646a6424158d52dfb58135d251","description":"[![Build Status][travis-image]][travis-url]","_nodeVersion":"22.17.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-lynEa3xNg3D1YsFyEfi9cVvE5C7mhQZlUx/8UwA7sXkstIHfiDSulmuAl/cQp3HZgfdxwbO9pkyac8ycOiHLrQ==","shasum":"8161a5a0cf2bfcb0837c71517f285d7e772f8148","tarball":"https://registry.npmjs.org/@deepcyan-ai/ngx-leaflet-draw/-/ngx-leaflet-draw-20.0.0-1.tgz","fileCount":40,"unpackedSize":91945,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIFs8eclRdKb2wJqJqrN8GhLJRoWdLtfTgMKdh5AqE9x6AiAx7zMDs8xko9A9D5QB6dOFO6KqUakAChw5NVUvvdrKJA=="}]},"_npmUser":{"name":"deepcyan-ai","email":"sayandeep@deepcy.io"},"directories":{},"maintainers":[{"name":"deepcyan-ai","email":"sayandeep@deepcy.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ngx-leaflet-draw_20.0.0-1_1753711891964_0.9645832958057761"},"_hasShrinkwrap":false}},"time":{"created":"2025-07-28T13:57:18.563Z","modified":"2025-07-28T14:11:32.372Z","0.0.0":"2025-07-28T13:57:18.891Z","20.0.0":"2025-07-28T14:00:17.425Z","20.0.0-1":"2025-07-28T14:11:32.169Z"},"license":"MIT","description":"[![Build Status][travis-image]][travis-url]","maintainers":[{"name":"deepcyan-ai","email":"sayandeep@deepcy.io"}],"readme":"# @bluehalo/ngx-leaflet-draw\n\n[![Build Status][travis-image]][travis-url]\n\n[travis-url]: https://travis-ci.org/Asymmetrik/ngx-leaflet-draw/\n[travis-image]: https://travis-ci.org/Asymmetrik/ngx-leaflet-draw.svg\n\n> Leaflet Draw extension to the @bluehalo/ngx-leaflet package for Angular.io\n> Provides Leaflet Draw integration into Angular.io projects. Compatible with Leaflet v1.x and Leaflet Draw 1.x\n\n> Given the lack of activity in the Leaflet.draw project, we are unlikely to extend this plugin with additional functionality beyond Angular upgrades.\n\n## Table of Contents\n\n- [Install](#install)\n- [Usage](#usage)\n- [API](#api)\n- [Contribute](#contribute)\n- [License](#license)\n- [Credits](#credits)\n\n## Install\n\nInstall the package and its peer dependencies via npm (or yarn):\n\n```shell\nnpm install leaflet\nnpm install leaflet-draw@1.0.2\nnpm install @bluehalo/ngx-leaflet\nnpm install @bluehalo/ngx-leaflet-draw\n```\n\nNOTE: I've seen some issues with `leaflet-draw@1.0.3` and `1.0.4`.\nSpecifically, label anchors and drawing rectangles doesn't seem to work correctly.\nIf you have issues, `leaflet-draw@1.0.2` seems to be the latest release without those issues.\n\nYou will need to also install the leaflet typings via npm:\n\n```shell\nnpm install --save-dev @types/leaflet\nnpm install --save-dev @types/leaflet-draw\n```\n\nIf you want to run the demo, clone the repository, perform an ```npm install```, ```npm run demo``` and then go to [http://localhost:4200](http://localhost:4200).\n\n## Usage\nGenerally, the steps are:\n\n- Install and configure [@bluehalo/ngx-leaflet](https://github.com/BlueHalo/ngx-leaflet)\n- Install this library and the Leaflet-draw typings (see above).\n- Import the Leaflet and Leaflet-draw stylesheet\n- Import ```LeafletModule``` and ```LeafletDraw``` into your Angular project\n- Create and configure a map (see docs below and/or demo)\n\n### Import the Leaflet Stylesheet\n\nFor leaflet to work, you need to have the leaflet stylesheets loaded into your application.\nIf you've installed via npm, you will need to load both ```./node_modules/leaflet/dist/leaflet.css``` and ```./node_modules/leaflet-draw/dist/leaflet.draw.css```.\nHow you include the stylesheet will depend on your specific setup. For examples, refer to the [@bluehalo/ngx-leaflet](https://github.com/BlueHalo/ngx-leaflet) README.\n\nIf you are using Angular CLI, you will need to add the CSS files to the styles array contained in ```angular.json```:\n```json\n{\n\t...\n\t\"styles\": [\n\t\t\"styles.css\",\n\t\t\"./node_modules/leaflet/dist/leaflet.css\",\n\t\t\"./node_modules/leaflet-draw/dist/leaflet.draw.css\"\n\t],\n\t...\n}\n```\n\n### Import LeafletModule and LeafletDrawModule\n\nBefore you can use the Leaflet components in your Angular.io app, you'll need to import it in your application.\nDepending on if you're using standalone mode or not, you will import it into your modules and/or components.\n\n```typescript\nimport { LeafletDirective } from '@bluehalo/ngx-leaflet';\nimport { LeafletDrawDirective } from '@bluehalo/ngx-leaflet-draw';\n\n@Component({\n\timports: [\n\t\t//...\n\t\tLeafletDirective,\n\t\tLeafletDrawDirective\n\t]\n})\n```\n\n### Create and Configure a Map with the Draw Controls\n\nTo create a map, use the ```leaflet``` attribute directive. This directive must appear first.\nYou must specify an initial zoom/center and set of layers either via ```leafletOptions``` or by binding to ```leafletZoom```, ```leafletCenter```, and ```leafletLayers```.\nFinally, add the ```leafletDraw``` attribute directive to add the leaflet draw control and configure it with ```leafletDrawOptions```.\n\n```angular181html\n<div leaflet style=\"height: 400px;\"\n     leafletDraw\n     [leafletOptions]=\"options\"\n     [leafletDrawOptions]=\"drawOptions\"\n     (leafletDrawCreated)=\"onDrawCreated($event)\">\n\n\t<div [leafletLayer]=\"drawnItems\"></div>\n\n</div>\n```\n\nTo enable editing, you need to add a `featureGroup` to the map and pass the feature group in with the `drawOptions`.\nIn addition, you will need to add layers to the feature group yourself, as this will no longer happen automatically.\nBoth of these changes are new in `@bluehalo/ngx-leaflet-draw@6`, and were made to match default Leaflet Draw behavior.\n\n```typescript\ndrawnItems: FeatureGroup = featureGroup();\n\ndrawOptions = {\n\tedit: {\n\t\tfeatureGroup: this.drawnItems\n\t}\n};\n\npublic onDrawCreated(e: any) {\n\tthis.drawnItems.addLayer((e as DrawEvents.Created).layer);\n}\n```\n\n#### leafletDraw\n\nThis is an attribute directive that initiates the leaflet draw plugin.\n\n#### leafletDrawOptions\n\nInput binding for the options to be passed to the draw plugin upon creation.\nThese options are only currently processed at creation time.\nNote that we've included manual configuration of markers to get the icons working correctly. \n\n```typescript\ndrawOptions = {\n\tposition: 'topright',\n\tdraw: {\n\t\tmarker: {\n\t\t\ticon: icon({\n\t\t\t\t...Icon.Default.prototype.options,\n\t\t\t\ticonSize: [ 25, 41 ],\n\t\t\t\ticonAnchor: [ 13, 41 ],\n\t\t\t\ticonUrl: 'assets/marker-icon.png',\n\t\t\t\ticonRetinaUrl: 'assets/marker-icon-2x.png',\n\t\t\t\tshadowUrl: 'assets/marker-shadow.png'\n\t\t\t})\n\t\t},\n\t\tpolyline: false,\n\t\tcircle: {\n\t\t\tshapeOptions: {\n\t\t\t\tcolor: '#d4af37'\n\t\t\t}\n\t\t},\n\t\trectangle: {\n\t\t\tshapeOptions: {\n\t\t\t\tcolor: '#85bb65'\n\t\t\t}\n\t\t}\n\t},\n\tedit: {\n\t\tfeatureGroup: this.drawnItems\n\t}\n};\n```\n\nThe options object is passed through to the Leaflet.draw object.\nTherefore, you can reference [their documentation](https://github.com/Leaflet/Leaflet.draw) for help configuring the draw control.\n\n\n#### leafletDrawLocal\n\nThis object is copied into `L.drawLocal` to set localization options.\nThese settings are only applied at creation time.\n\n```typescript\ndrawLocal: any = {\n\tdraw: {\n\t\ttoolbar: {\n\t\t\tbuttons: {\n\t\t\t\tpolygon: 'Draw an awesome polygon!'\n\t\t\t}\n\t\t}\n\t}\n};\n```\n\n### Draw Events\n\nThis leaflet draw plugin exposes the `L.Draw.Event`s found in the [leaflet draw documentation](http://leaflet.github.io/Leaflet.draw/docs/leaflet-draw-latest.html#l-draw-event).\nFor a working example, check out the the demo.\n\nThe following events are provided:\n\n- ```(leafletDrawCreated)```\n- ```(leafletDrawEdited)```\n- ```(leafletDrawDeleted)```\n- ```(leafletDrawStart)```\n- ```(leafletDrawStop)```\n- ```(leafletDrawVertex)```\n- ```(leafletDrawEditStart)```\n- ```(leafletDrawEditMove)```\n- ```(leafletDrawEditResize)```\n- ```(leafletDrawEditVertex)```\n- ```(leafletDrawEditStop)```\n- ```(leafletDrawDeleteStart)```\n- ```(leafletDrawDeleteStop)```\n- ```(leafletDrawToolbarOpened)```\n- ```(leafletDrawToolbarClosed)```\n- ```(leafletDrawMarkerContext)```\n\n### Getting a Reference to the Draw Control\n\nOccasionally, you may need to directly access the Leaflet Draw Control instance.\nFor example, to dynamically change settings or change its behavior.\nThere are a couple of different ways to achieve this depending on what you're trying to do.\n\nThe easiest and most flexible way is to use the output binding ```leafletDrawReady```.\nThis output is invoked after the map is created, the argument of the event being the ```Control.Draw``` instance.\n\nThe second is to get a reference to the leaflet draw directive itself - and there are a couple of ways to do this.\nWith a reference to the directive, you can invoke the ```getDrawControl()``` function to get a reference to the ```Control.Draw``` instance.\n\n#### leafletDrawReady\n\nThis output is emitted when once when the Leaflet Draw Control is initially created inside of the Leaflet Draw directive.\nThe event will only fire when the Control exists and is ready for manipulation.\n\n```angular181html\n<div leaflet\n     leafletDraw\n     [leafletOptions]=\"options\"\n     [leafletDrawOptions]=\"drawOptions\"\n     (leafletDrawReady)=\"onDrawReady($event)\">\n</div>\n```\n\n```typescript\nonDrawReady(drawControl: Draw.Control) {\n\t// Do stuff with map\n}\n```\n\nThis method of getting the draw control makes the most sense if you are using the Leaflet directive inside your own component\nand just need to add some limited functionality or register some event handlers.\n\n#### Inject LeafletDrawDirective into your Component\n\nIn Angular.io, directives are injectable the same way that Services are.\nThis means that you can create your own component or directive and inject the ```LeafletDrawDirective``` into it.\nThis will only work if your custom component/directive exists on the same DOM element and is ordered after the injected LeafletDrawDirective, or if it is on a child DOM element.\n\n```angular181html\n<!-- On the same DOM element -->\n<div leaflet leafletDraw myCustomDirective></div>\n\n<!-- On a child DOM element -->\n<div leaflet leafletDraw>\n\t<div myCustomDirective></div>\n</div>\n```\n\n```typescript\n@Directive({\n   selector: '[myCustomDirective]'\n})\nexport class MyCustomDirective {\n\treadonly #leafletDrawDirective = inject(LeafletDrawDirective);\n\n\tsomeFunction() {\n\t\tif (null !== this.#leafletDrawDirective.getDrawControl()) {\n\t\t\t// Do stuff with the draw control\n\t\t}\n\t}\n}\n```\n\nThe benefit of this approach is it's a bit cleaner if you're interested in adding some reusable capability to the existing leaflet draw directive.\n\n### Showing and Hiding the Draw Control\n\nIf you want to toggle the draw control on and off, you can use the following approach:\n\n```angular181html\n<button (click)=\"shown = !shown\">Show/Hide Control</button>\n<div leaflet style=\"height: 400px;\" [leafletOptions]=\"options\">\n\t@if (shown) {\n\t\t<div leafletDraw [leafletDrawOptions]=\"drawOptions\"></div>\n\t}\n</div>\n```\n\nYou can place the leafletDraw directive on a child element and then use *ngIf to add/remove the draw control from the map.\nWhen ngIf evaluates to false, the child element is removed from the map, which destroys the control.\nWhen it evaluates to true, the child element is added to the map, which recreates the control.\n\n### A Note About Markers\n\nIf you are using Angular CLI or Webpack to package your project, you will need to configure the marker icon as shown in the ```leafletDrawOptions``` example above.\nThe issue has to do with how Leaflet handles icon image loading.\nFor more details on how to set this up, reference the README from [@bluehalo/ngx-leaflet](https://github.com/Bluehalo/ngx-leaflet#a-note-about-markers).\n\n## Contribute\n\nPRs accepted. If you are part of Bluehalo, please make contributions on feature branches off of the ```develop``` branch.\nIf you are outside of Bluehalo, please fork our repo to make contributions and submit PRs against ```develop```.\n\n## License\n\nSee LICENSE in repository for details.\n\n## Credits\n\n**[Leaflet](http://leafletjs.com/)** Is an awesome mapping package.\n**[Leaflet.draw](https://github.com/Leaflet/Leaflet.draw)** Makes drawing shapes on maps super easy.\n","readmeFilename":"README.md"}