{"id":13808703,"url":"https://github.com/bluehalo/ngx-leaflet","last_synced_at":"2025-05-14T00:06:22.197Z","repository":{"id":13955957,"uuid":"75210682","full_name":"bluehalo/ngx-leaflet","owner":"bluehalo","description":"Core Leaflet package for Angular.io","archived":false,"fork":false,"pushed_at":"2024-11-21T16:16:35.000Z","size":1992,"stargazers_count":789,"open_issues_count":42,"forks_count":134,"subscribers_count":43,"default_branch":"master","last_synced_at":"2025-04-03T10:34:22.628Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bluehalo.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGES.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-11-30T17:30:33.000Z","updated_at":"2025-03-25T16:12:56.000Z","dependencies_parsed_at":"2025-01-01T22:02:31.659Z","dependency_job_id":"f457ba56-b829-4c39-8450-0ecdfc62e1ab","html_url":"https://github.com/bluehalo/ngx-leaflet","commit_stats":{"total_commits":290,"total_committers":27,"mean_commits":10.74074074074074,"dds":"0.17586206896551726","last_synced_commit":"f50b0c385d87b109c1c5c21d78670d79d4a95043"},"previous_names":["asymmetrik/angular2-leaflet","asymmetrik/ngx-leaflet"],"tags_count":66,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bluehalo%2Fngx-leaflet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bluehalo%2Fngx-leaflet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bluehalo%2Fngx-leaflet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bluehalo%2Fngx-leaflet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bluehalo","download_url":"https://codeload.github.com/bluehalo/ngx-leaflet/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248243471,"owners_count":21071054,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-04T01:01:49.709Z","updated_at":"2025-04-10T15:33:25.733Z","avatar_url":"https://github.com/bluehalo.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Maps"],"readme":"# @bluehalo/ngx-leaflet\n\n[![Build Status][travis-image]][travis-url]\n\n[travis-url]: https://travis-ci.org/Asymmetrik/ngx-leaflet/\n[travis-image]: https://travis-ci.org/Asymmetrik/ngx-leaflet.svg?branch=master\n\n\u003e Leaflet packages for Angular.io.\n\u003e Provides flexible and extensible components for integrating Leaflet v0.7.x and v1.x into Angular.io projects.\n\n## Table of Contents\n- [Install](#install)\n- [Usage](#usage)\n- [API](#api)\n- [Extensions](#extensions)\n- [Getting Help](#help)\n- [Contribute](#contribute)\n- [License](#license)\n- [Credits](#credits)\n\n\n\n## Install\nInstall the package and its peer dependencies via npm (or yarn):\n```\nnpm install leaflet\nnpm install @bluehalo/ngx-leaflet\n```\n\nIf you intend to use this library in a typescript project (utilizing the typings), you'll need to install the leaflet typings:\n```\nnpm install --save-dev @types/leaflet\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\n\nNot using the latest version of Angular.io? Have a look in [CHANGES.md](/CHANGES.md) to find the right version for your project.\n\n## Usage\n\u003e NOTE: We've simplified the getting started instructions to be more targeted at the most recent versions of Angular.io and the use of Angular CLI.\n\nGenerally, the steps are:\n\n* Install Leaflet, this library, and potentially the Leaflet typings (see above).\n* Import the Leaflet stylesheet\n* Import the ```LeafletModule``` into your Angular project\n* Create and configure a map (see docs below and/or demo)\n\n\n### Import the Leaflet Stylesheet\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 ```./node_modules/leaflet/dist/leaflet.css```. \nHow you include the stylesheet will depend on your specific setup. Here are a few examples:\n\n#### Direct Import from HTML\nIf you are just building a webpage and not using a bundler for your css, you'll want to directly import the css file in your HTML page.\n\n```html\n\u003chead\u003e\n\t...\n\t\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"./node_modules/leaflet/dist/leaflet.css\"\u003e\n\t...\n\u003c/head\u003e\n```\n\n#### Adding Styles in Angular CLI\nIf you are using Angular CLI, you will need to add the Leaflet CSS file to the styles array contained in ```angular.json```\n\n```json\n{\n\t...\n\t\"styles\": [\n\t\t\"styles.css\",\n\t\t\"./node_modules/leaflet/dist/leaflet.css\"\n\t],\n\t...\n}\n```\n\n#### A Note About Markers\nLeaflet marker URLs don't play well with the Angular CLI build pipeline without some special handling.\nThe demo contained in this project demonstrates how to get around this problem. Here is a rough overview of the steps taken to get them working.\n\n1. Include the leaflet marker assets so they are copied intact to the build output.\n```json\n{\n\t...\n\t\"assets\": [\n\t\t{\n\t\t\t\"glob\": \"**/*\",\n\t\t\t\"input\": \"public\"\n\t\t},\n\t\t{\n\t\t\t\"glob\": \"**/*\",\n\t\t\t\"input\": \"./node_modules/leaflet/dist/images\",\n\t\t\t\"output\": \"assets/\"\n\t\t}\n\t],\n\t...\n}\n```\n\n1. Configure Leaflet to use the asset URLs as custom marker images.\n\n```js\nlet layer = marker([ 46.879966, -121.726909 ], {\n\ticon: icon({\n\t\t...Icon.Default.prototype.options,\n\t\ticonUrl: 'assets/marker-icon.png',\n\t\ticonRetinaUrl: 'assets/marker-icon-2x.png',\n\t\tshadowUrl: 'assets/marker-shadow.png'\n   })\n});\n```\n\n\n### Import LeafletModule\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```js\nimport { LeafletModule } from '@bluehalo/ngx-leaflet';\n\n...\nimports: [\n       ...\n       LeafletModule\n]\n...\n\n```\n\n### Create and Configure a Map\nTo get a basic map to work, you have to:\n\n* Apply the ```leaflet``` attribute directive (see the example below) to an existing DOM element.\n* Style the map DOM element with a height. Otherwise, it'll render with a 0 pixel height.\n* Provide an initial zoom/center and set of layers either via ```leafletOptions``` or by binding to ```leafletZoom```, ```leafletCenter```, and ```leafletLayers```.\n\nTemplate:\n```html\n\u003cdiv style=\"height: 300px;\"\n     leaflet \n     [leafletOptions]=\"options\"\u003e\n\u003c/div\u003e\n```\n\nExample leafletOptions object:\n```js\noptions = {\n\tlayers: [\n\t\ttileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: '...' })\n\t],\n\tzoom: 5,\n\tcenter: latLng(46.879966, -121.726909)\n};\n```\n\nChanges to leafletOptions are ignored after they are initially set.\nThis is because these options are passed into the map constructor, so they can't be changed anyways.\nSo, make sure the object exists before the map is created.\nYou'll want to create the object in ```ngOnInit``` or hide the map DOM element with ```*ngIf``` until you can create the options object.\n\n\n### Add a Layers Control\nThe ```[leafletLayersControl]``` input bindings give you the ability to add the layers control to the map.\nThe layers control lets the user toggle layers and overlays on and off.\n\nTemplate:\n```html\n\u003cdiv style=\"height: 300px;\"\n     leaflet \n     [leafletOptions]=\"options\"\n     [leafletLayersControl]=\"layersControl\"\u003e\n\u003c/div\u003e\n```\n\nExample layersControl object:\n```js\nlayersControl = {\n\tbaseLayers: {\n\t\t'Open Street Map': tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: '...' }),\n\t\t'Open Cycle Map': tileLayer('https://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png', { maxZoom: 18, attribution: '...' })\n\t},\n\toverlays: {\n\t\t'Big Circle': circle([ 46.95, -122 ], { radius: 5000 }),\n\t\t'Big Square': polygon([[ 46.8, -121.55 ], [ 46.9, -121.55 ], [ 46.9, -121.7 ], [ 46.8, -121.7 ]])\n\t}\n}\n```\n\nYou can add any kind of Leaflet layer you want to the ```overlays``` map.\nThis includes markers, shapes, geojson, custom layers from other libraries, etc.\n\n\n### Add Custom Layers (base layers, markers, shapes, etc.)\nThere are several different ways to add layers to the map.\nYou can add layers (baselayers, markers, or custom layers) to the map without showing them in the layer control using the ```[leafletLayers]``` directive.\n\nTemplate:\n```html\n\u003cdiv style=\"height: 300px;\"\n     leaflet\n     [leafletOptions]=\"options\"\n     [leafletLayers]=\"layers\"\u003e\n\u003c/div\u003e\n```\n\nLayers array:\n```js\nlayers = [\n\tcircle([ 46.95, -122 ], { radius: 5000 }),\n\tpolygon([[ 46.8, -121.85 ], [ 46.92, -121.92 ], [ 46.87, -121.8 ]]),\n\tmarker([ 46.879966, -121.726909 ])\n];\n```\n\nYou can also add an individual layer to the map using the ```[leafletLayer]``` directive.\nUsing this approach allows you to use ```*ngFor``` and ```*ngIf``` to control whether individual layers are added to or removed from the map.\n\nTemplate:\n```html\n\u003cdiv style=\"height: 300px;\"\n     leaflet\n     [leafletOptions]=\"options\"\u003e\n     \u003cdiv *ngIf=\"showLayer\" [leafletLayer]=\"layer\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\nLayer:\n```js\nlayer = circle([ 46.95, -122 ], { radius: 5000 });\n```\n\n\n### Dynamically Change Map Layers using [leafletLayers]\n\n\u003e **Layer inputs (arrays and maps) are mutable**\n\u003e Previous versions of this plugin treated layers arrays and layer control objects as immutable data structures.\n\u003e We've changed that behavior.\n\u003e Now, mutable changes to the ```leafletLayers```, ```leafletBaseLayers```, and ```leafletLayersControl``` inputs are detected.\n\nThe plugin is now using internal ngx iterable and key/value differs to detect and track changes to mutable data structures.\nThis approach requires a deep compare of the contents of the data structure (which can be slow when the contents are really big).\nFor immutable data structures, all that is needed is a top-level instance equality check (which is way faster).\nThis change is backwards compatible and was motivated by feedback and confusion.\nWhile there is a performance impact for some use cases, this approach is more intuitive.\n\nThere are at least two good approaches to improving performance when there are a lot of layers bound to the map.\nFirst, you can use the OnPush change detection strategy. There's an example of this in the demo.\nSecond, you can wrap a large number of layers into a Leaflet layer group, which will reduce the number of layers the plugin actually has to track during diffs.\n\n\n### Working with Leaflet Events\nOften, you'll want to make changes based on a map click or other Leaflet interaction.\nThe ngx-leaflet plugin supports several [map events](#map-events) and [layer events](#layer-events) as documented in the API section.\n\nYou may occasionally need to handle events that aren't exposed through the plugin, however.\nWhen that happens, you will need to be aware of how Zones and change detection work to ensure your event handling works as expected.\nTake a look at [A Note About Change Detection](#a-note-about-change-detection) for more details.\nThis is by design and a common thing to deal with when using third party libraries and Angular.\n\n\n## API\nThis section includes more detailed documentation of the functionality of the directives included in this library.\n\n### Advanced Map Configuration\nThere are several input bindings available for configuring the map.\n\n```html\n\u003cdiv leaflet style=\"height: 300px;\"\n     [leafletOptions]=\"options\"\n     [leafletPanOptions]=\"panOptions\"\n     [leafletZoomOptions]=\"zoomOptions\"\n     [leafletZoomPanOptions]=\"zoomPanOptions\"\n     [leafletFitBoundsOptions]=\"fitBoundsOptions\"\u003e\n\u003c/div\u003e\n```\n\n#### [leafletOptions]\nInput binding for the initial leaflet map options (see [Leaflet's](https://leafletjs.com/SlavaUkraini/reference.html#map-option) docs). These options can only be set initially because they are used to create the map. Later changes are ignored.\n\n#### [leafletPanOptions]\nInput binding for pan options (see [Leaflet's](https://leafletjs.com/SlavaUkraini/reference.html#pan-options) docs). These options are stored and used whenever pan operations are invoked.\n\n#### [leafletZoomOptions]\nInput binding for zoom options (see [Leaflet's](https://leafletjs.com/SlavaUkraini/reference.html#zoom-options) docs). These options are stored and used whenever zoom operations are invoked.\n\n#### [leafletZoomPanOptions]\nInput binding for zoom/pan options (see [Leaflet's](https://leafletjs.com/SlavaUkraini/reference.html#zoom/pan-options) docs). These options are stored and used whenever zoom/pan operations are invoked.\n\n#### [leafletFitBoundsOptions]\nInput binding for FitBounds options (see [Leaflet's](https://leafletjs.com/SlavaUkraini/reference.html#fitbounds-options) docs). These options are stored and used whenever FitBounds operations are invoked.\n\n\n### Dynamically changing zoom level, center, fitBounds, etc.\n```html\n\u003cdiv leaflet style=\"height: 300px;\"\n     [leafletOptions]=\"options\"\n     [(leafletZoom)]=\"zoom\"\n     [(leafletCenter)]=\"center\"\n     [leafletFitBounds]=\"fitBounds\"\u003e\n\u003c/div\u003e\n```\n\n#### [(leafletZoom)]: number\nInput and Output binding for the map zoom level.\n\n#### [leafletMaxZoom]: number\nInput binding for the maximum zoom level for the map.\n\n#### [leafletMinZoom]: number\nInput binding for the minimum zoom level for the map.\n\n#### [(leafletCenter)]: LatLng\nInput and Output binding for the map center position.\n\n#### Note: center/zoom operations may interfere with each other\nZoom/Center operations that are applied in rapid succession may interfere with or cancel each other.\nIf both changes are picked up at the same time, the component applies the changes as a map.setView() operation to ensure both are processed.\nAdditionally, if a zoom level or center is applied that is not allowed (e.g., beyond max zoom level or outside of max bounds), Leaflet will determine the new value.\n\n#### [leafletFitBounds]: LatLngBounds\nInput bind a ```LatLngBounds``` value that will be applied to the map using ```Map.setFitBounds()```.\nThis operation has no output binding because the input fitBounds usually results in a slightly different map bounds.\n\n#### [leafletMaxBounds]: LatLngBounds\nInput bind a ```LatLngBounds``` value that will be applied to the map using ```Map.setMaxBounds()```.\n\n\n### Simple Layer Management: Setting Baselayers\nThere is a convenience input binding for setting the baselayers on the map called ```[leafletBaseLayers]```.\nYou can also provide ```[leafletLayersControlOptions]``` if you want to show the control on the map that allows you to switch between baselayers.\nIf you plan to show more than just baselayers, you should use the more advanced layers controls described in *Advanced Layer Management* below.\n\nFor an example of the basic map setup, you should check out the *Simple Base Layers* demo.\n\n```html\n\u003cdiv leaflet style=\"height: 300px;\"\n     [leafletOptions]=\"options\"\n     [leafletBaseLayers]=\"baseLayers\"\n     [leafletLayersControlOptions]=\"layersControlOptions\"\u003e\n\u003c/div\u003e\n```\n\n#### [leafletBaseLayers]: Control.LayersObject\nInput bind an ```Control.LayersObject``` to be synced to the map.\n\n```js\nbaseLayers: {\n\t'layer1': Layer,\n\t'layer2': Layer\n}\n```\n\nOn changes, the component syncs the baseLayers on the map with the layers in this object.\nSyncing is performed by tracking the current baselayer and on changes, searching the map to see if any of the current baselayers is added to the map.\nIf it finds a baselayer that is still added to the map, it will assume that is still the baselayer and leave it.\nIf none of the baselayers can be found on the map, it will add the first layer it finds in the ```Control.LayersObject``` and use that as the new baselayer.\nLayers are compared using instance equality.\n\nIf you use this directive, you can still manually use the ```[leafletLayers]``` directive, but you will not be able to use the ```[leafletLayersControl]``` directive.\nThis directive internally uses the layers control, so if you add both, they'll interfere with each other.\nBecause it uses ```control.layers``` under the hood, you can still provide options for the layers control.   \n\n\n#### [leafletLayersControlOptions]\nInput binding for Control.Layers options (see [Leaflet's](https://leafletjs.com/SlavaUkraini) docs).\nThese options are passed into the layers control constructor on creation.\n\n\n### Advanced Layer Management: Layers, and Layers Control\nThe ```[leafletLayers]``` and ```[leafletLayersControl]``` input bindings give you direct access to manipulate layers and the layers control.\nWhen the array bound to ```[leafletLayers]``` is changed, the directive will synchronize the layers on the map to the layers in the array.\nThis includes tile layers and any added shapes. \n\nThe ```[leafletLayersControl]``` input binding allows you to provide a set of base layers and overlay layers that can be managed within leaflet using the layers control.\nWhen the user manipulates the control via Leaflet, Leaflet will automatically manage the layers, but the input bound layer array isn't going to get updated to reflect those changes.\n\nSo, use ```[leafletLayers]``` to add a collection of layers to the map. \nAnd, use ```[leafletLayersControl]``` to allow users to optionally turn layers/overlays on and off.\n\nFor an example of using the layers controls, you should check out the *Layers and Layer Controls* demo.\n\n```html\n\u003cdiv leaflet style=\"height: 300px;\"\n     [leafletOptions]=\"options\"\n     [leafletLayers]=\"layers\"\n     [leafletLayersControl]=\"layersControl\"\n     [leafletLayersControlOptions]=\"layersControlOptions\"\u003e\n\u003c/div\u003e\n```\n\n#### [leafletLayers]: Layer[]\nInput bind an array of all layers to be synced (and made visible) in the map.\n\nOn changes, the component syncs the layers on the map with the layers in this array.\nSyncing is performed by selectively adding or removing layers.\nLayers are compared using instance equality.\nAs a result of how the map is synced, the order of layers is not guaranteed to be consistent as changes are made.\n\n\n#### [leafletLayersControl]: Control.Layers\nInput bind a Control.Layers specification. The object contains properties for each of the two constructor arguments for the Control.Layers constructor.\n\n```js\nlayersControl: {\n\tbaseLayers: {\n\t\t'layerName': Layer\n\t},\n\toverlays: {\n\t\t'overlayName': Layer\n\t}\n}\n```\n\n#### [leafletLayersControlOptions]\nInput binding for Control.Layers options (see [Leaflet's](https://leafletjs.com/SlavaUkraini) docs).\nThese options are passed into the constructor on creation.\n\n\n### Advanced Layer Management: Individual Layers and *ngFor / *ngIf\nThe ```[leafletLayer]``` input bindings gives you the ability to add a single layer to the map.\nWhile this may seem limiting, you can nest elements inside the map element, each with a ```[leafletLayer]``` input. \nThe result of this is that each layer will be added to the map.\nIf you add a structural directive - ```*ngFor``` or ```*ngIf``` - you can get some added flexibility when controlling layers.  \n\n```html\n\u003cdiv leaflet style=\"height: 300px;\"\n     [leafletOptions]=\"options\"\u003e\n\t\u003cdiv *ngFor=\"let l of layers\" [leafletLayer]=\"l\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\nIn this example, each layer in the ```layers``` array will create a new child ```div``` element.\nEach element will have a ```[leafletLayer]``` input binding, which will result in the layer being added to the map.\nFor more details, you should check out the *Layers and ngFor* demo.\n\nThere are several layer events that are available when you are using this approach to controlling layers.\n\n### Layer Events\nWhen you are using the ```[leafletLayer]``` directive to add a layer, you can also access output bindings for layer events.\nTwo events that are currently exposed include: ```(leafletLayerAdd)``` and ```(leafletLayerRemove)```.\nEach of these emits a ```LeafletEvent``` object.\n\n\n### Map Events\nLeaflet exposes a lot of map events including map zoom, map move, and mouse interactions.\nThe plugin exposes several of the most common events.\nFor each of these events, the event is emitted in the Angular Zone, so you shouldn't have to do anything extra to get change detection to work.\nFor a working example, check out the events section of the demo.\n\n#### Mouse Interactions: LeafletMouseEvent\nThe following events are provided:\n* ```(leafletClick)```\n* ```(leafletDoubleClick)```\n* ```(leafletMouseDown)```\n* ```(leafletMouseUp)```\n* ```(leafletMouseMove)```\n* ```(leafletMouseOver)``` \n* ```(leafletMouseOut)``` \n\n#### Map Zoom and Move: LeafletEvent\nThe following events are provided:\n* ```(leafletMapMove)```\n* ```(leafletMapMoveStart)```\n* ```(leafletMapMoveEnd)```\n* ```(leafletMapZoom)```\n* ```(leafletMapZoomStart)```\n* ```(leafletMapZoomEnd)```\n\n\n\n### Getting a Reference to the Map\nOccasionally, you may need to directly access the Leaflet map instance.\nFor example, to call ```invalidateSize()``` when the map div changes size or is shown/hidden.\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 ```leafletMapReady```.\nThis output is invoked after the map is created, the argument of the event being the ```Map``` instance.\n\nThe second is to get a reference to the leaflet directive itself - and there are a couple of ways to do this.\nWith a reference to the directive, you can invoke the ```getMap()``` function to get a reference to the ```Map``` instance.\n\n\n#### (leafletMapReady): Map\nThis output is emitted when once when the map is initially created inside of the Leaflet directive.\nThe event will only fire when the map exists and is ready for manipulation.\n\n```html\n\u003cdiv leaflet\n     [leafletOptions]=\"options\"\n     (leafletMapReady)=\"onMapReady($event)\"\u003e\n\u003c/div\u003e\n```\n\n```js\nonMapReady(map: Map) {\n\t// Do stuff with map\n}\n```\n\nThis method of getting the map 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\n#### Inject LeafletDirective into your Component\nThis is the more advanced technique and it won't always work depending on your setup.\nIn particular, this will likely not work unless you are writing your own third-party library that extends the functionality of `ngx-leaflet`.\nIf this approach does not work for you, try using the `leafletMapReady` event described above.\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 ```LeafletDirective``` into it.\nThis will only work if your custom component/directive exists on the same DOM element and is ordered after the injected LeafletDirective, or if it is on a child DOM element.\n\n\n```html\n\u003c!-- On the same DOM element --\u003e\n\u003cdiv leaflet myCustomDirective\u003e\n\u003c/div\u003e\n\n\u003c!-- On a child DOM element --\u003e\n\u003cdiv leaflet\u003e\n\t\u003cdiv myCustomDirective\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n```js\n@Directive({\n\tselector: '[myCustomDirective]'\n})\nexport class MyCustomDirective {\n\tleafletDirective: LeafletDirective;\n\n\tconstructor(leafletDirective: LeafletDirective) {\n\t\tthis.leafletDirective = leafletDirective;\n\t}\n\n\tsomeFunction() {\n\t\tif (null != this.leafletDirective.getMap()) {\n\t\t\t// Do stuff with the map\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 map directive.\nAs mentioned above, it might not work depending on how you are packaging your component.\nThis is how the ```@bluehalo/ngx-leaflet-draw``` and ```@bluehalo/ngx-leaflet-d3``` packages work, so you can use them as references.\n\n\n### A Note About Change Detection\nChange detection is at the core of how Angular works.\nAngular.io uses Zone.js to scope how and when (events, actions, etc.) to trigger change detection.\nIt's important to scope it carefully because change detection can be fairly expensive, so you don't want it to happen constantly.\n\nLibraries like ngx-leaflet have to decide what to do inside and outside of the Angular zone, balancing convenience and performance.\nLeaflet registers handlers for a lot of mouse events. \nTo mitigate the performance impact of constantly running change detection on all mouse events (including mousemove), ngx-leaflet runs most of the Leaflet code outside of the Angular zone.\nThe impact of this is that Angular won't automatically detect changes that you make inside of a Leaflet event callback.\n\nThe solution is to either make sure that Angular relevant changes are made inside of Angular's zone or to manually tell Angular to detect changes.\n\n#### Running Inside of Angular's Zone\nLeaflet event handlers run outside of Angular's zone, where changes to input bound fields will not be detected automatically.\nTo ensure your changes are detected and applied, you need to make those changed inside of Angular's zone.\nFortunately, this is extremely easy.\n\n```js\nfitBounds: any = null;\ncircle = circle([ 46.95, -122 ], { radius: 5000 });\n\n// Inject the Change Detector into your component\nconstructor(private zone: NgZone) {}\n\nngOnInit() {\n\n\t// The 'add' event callback handler happens outside of the Angular zone\n\tthis.circle.on('add', () =\u003e {\n\n\t\t// But, we can run stuff inside of Angular's zone by calling NgZone.run()\n\t\t// everything inside the arrow function body happens inside of Angular's zone, where changes will be detected\n\t\tthis.zone.run(() =\u003e {\n\t\t\tthis.fitBounds = this.circle.getBounds();\n\t\t});\n\n\t});\n}\n``` \n\n#### Manually Triggering Change Detection\nAnother option is to manually tell the change detector to detect changes.\nThe drawback to this option is that it is less precise.\nThis will trigger change detection for this component and all of its children.\n\n```js\nfitBounds: any = null;\ncircle = circle([ 46.95, -122 ], { radius: 5000 });\n\n// Inject the Change Detector into your component\nconstructor(private changeDetector: ChangeDetectorRef) {}\n\nngOnInit() {\n\n\t// The 'add' event callback happens outside of the Angular zone\n\tthis.circle.on('add', () =\u003e {\n\n\t\t// Because we're outside of Angular's zone, this change won't be detected\n\t\tthis.fitBounds = this.circle.getBounds();\n\n\t\t// But, it will if we tell Angular to detect changes \n\t\tthis.changeDetector.detectChanges();\n\n\t});\n}\n```\n\n## Extensions\nThere are several libraries that extend the core functionality of ngx-leaflet:\n* [Leaflet Draw](https://github.com/BlueHalo/ngx-leaflet-draw)\n* [Leaflet Markercluster](https://github.com/BlueHalo/ngx-leaflet-markercluster)\n* [Leaflet D3 (Hexbins)](https://github.com/BlueHalo/ngx-leaflet-d3)\n\n\n## \u003ca name=\"help\"\u003eGetting Help\u003c/a\u003e\nHere's a list of articles, tutorials, guides, and help resources:\n* [ngx-leaflet on Stack Overflow](https://stackoverflow.com/questions/tagged/ngx-leaflet)\n* [High-level intro to @bluehalo/ngx-leaflet](https://github.com/BlueHalo/ngx-leaflet/wiki)\n* [Using @bluehalo/ngx-leaflet in Angular CLI projects](https://github.com/BlueHalo/ngx-leaflet/wiki/Getting-Started-Tutorial)\n* [Integrating 3rd Party Leaflet Libraries with @bluehalo/ngx-leaflet and @angular/cli](https://github.com/BlueHalo/ngx-leaflet/wiki/Integrating-Plugins)\n\n\n## Contribute\nPRs accepted. If you are part of BlueHalo, please make contributions on feature branches off of the ```develop``` branch. If you are outside of BlueHalo, please fork our repo to make contributions.\n\n\n## License\nSee LICENSE in repository for details.\n\n\n## Credits\n**[Leaflet](http://leafletjs.com/)** Is an awesome mapping package.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbluehalo%2Fngx-leaflet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbluehalo%2Fngx-leaflet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbluehalo%2Fngx-leaflet/lists"}