{"id":21956692,"url":"https://github.com/yagajs/leaflet-ng2","last_synced_at":"2025-08-21T03:32:12.793Z","repository":{"id":51123735,"uuid":"72991807","full_name":"yagajs/leaflet-ng2","owner":"yagajs","description":"Angular.io integration of Leaflet","archived":false,"fork":false,"pushed_at":"2021-05-22T15:13:21.000Z","size":2404,"stargazers_count":66,"open_issues_count":12,"forks_count":26,"subscribers_count":13,"default_branch":"develop","last_synced_at":"2025-08-08T18:23:39.242Z","etag":null,"topics":["angular","geo","leaflet","map","spatial","typescript","web-map","yaga"],"latest_commit_sha":null,"homepage":"https://leaflet-ng2.yagajs.org","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yagajs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-11-06T13:17:34.000Z","updated_at":"2023-05-11T13:12:23.000Z","dependencies_parsed_at":"2022-08-24T06:30:58.329Z","dependency_job_id":null,"html_url":"https://github.com/yagajs/leaflet-ng2","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"purl":"pkg:github/yagajs/leaflet-ng2","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yagajs%2Fleaflet-ng2","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yagajs%2Fleaflet-ng2/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yagajs%2Fleaflet-ng2/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yagajs%2Fleaflet-ng2/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yagajs","download_url":"https://codeload.github.com/yagajs/leaflet-ng2/tar.gz/refs/heads/develop","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yagajs%2Fleaflet-ng2/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271420489,"owners_count":24756573,"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","status":"online","status_checked_at":"2025-08-21T02:00:08.990Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["angular","geo","leaflet","map","spatial","typescript","web-map","yaga"],"created_at":"2024-11-29T08:37:41.515Z","updated_at":"2025-08-21T03:32:12.351Z","avatar_url":"https://github.com/yagajs.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# YAGA - leaflet-ng2\n\n[![Build Status](https://travis-ci.org/yagajs/leaflet-ng2.svg?branch=master)](https://travis-ci.org/yagajs/leaflet-ng2)\n[![Coverage Status](https://coveralls.io/repos/github/yagajs/leaflet-ng2/badge.svg?branch=master)](https://coveralls.io/github/yagajs/leaflet-ng2?branch=master)\n[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fyagajs%2Fleaflet-ng2.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2Fyagajs%2Fleaflet-ng2?ref=badge_shield)\n\nYAGA leaflet-ng2 is a granular implementation of the popular [Leaflet](http://leafletjs.com/) framework into the model\nview view controller (MVVC) of [Angular.io](https://angular.io/). It provides a directive for every Leaflet class that belongs to the user interface by inheriting the original Leaflet class and enhancing it with the decorators of Angular and glue-code. With this approach the directives are still extensible and it is possible to write the structure of an app in a descriptive way in a well known markup language,\nHTML5. This is why you mainly need HTML skills for creating a template based geo-app with leaflet-ng2.\n\nIt is easy to enhance this library with one’s own Angular modules, because of its modular structure. It is\neven possible to use the already existing Leaflet plugins on top, because the implementation also detects changes that\nwere made in Leaflet and bind them to Angular’s data model.\n\nThe YAGA Development-Team gives a great importance to tests, test-coverage, documentation, examples and getting started\ntemplates.\n\n## How to use\n\nFirst you have to install this library from npm:\n\n```bash\nnpm install --save @yaga/leaflet-ng2\n```\n\nThis module works like a normal Angular 2 module. You should do something like that:\n\n```typescript\nimport { YagaModule, OSM_TILE_LAYER_URL }   from '@yaga/leaflet-ng2';\nimport { Component, NgModule, PlatformRef } from '@angular/core';\nimport { BrowserModule }                    from '@angular/platform-browser';\nimport { platformBrowserDynamic }           from '@angular/platform-browser-dynamic';\n\nconst platform: PlatformRef = platformBrowserDynamic();\n\n@Component({\n    selector: 'app',\n    template: `\u003cyaga-map\u003e\u003cyaga-tile-layer [(url)]=\"tileLayerUrl\"\u003e\u003c/yaga-tile-layer\u003e\u003c/yaga-map\u003e`\n})\nexport class AppComponent {\n    // Your logic here, like:\n    public tileLayerUrl: string = OSM_TILE_LAYER_URL;\n}\n\n@NgModule({\n    bootstrap:    [ AppComponent ],\n    declarations: [ AppComponent ],\n    imports:      [ BrowserModule, YagaModule ]\n})\nexport class AppModule { }\n\ndocument.addEventListener('DOMContentLoaded', () =\u003e {\n    platform.bootstrapModule(AppModule);\n});\n```\n\n*Do not forget to import the leaflet css!*\n\n\nAfter that you should be able to use the following directives or components:\n\n* `yaga-map` *This must be the root component!*\n* `yaga-attribution-control`\n* `yaga-circle`\n* `yaga-circle-marker`\n* `yaga-div-icon`\n* `yaga-feature-group`\n* `yaga-geojson`\n* `yaga-icon`\n* `yaga-image-overlay`\n* `yaga-layer-group`\n* `yaga-layers-control` with `[yaga-base-layer]` and `[yaga-overlay-layer]`\n* `yaga-marker`\n* `yaga-polygon`\n* `yaga-polyline`\n* `yaga-popup`\n* `yaga-rectangle`\n* `yaga-scale-control`\n* `yaga-tile-layer`\n* `yaga-tooltip`\n* `yaga-zoom-control`\n\n![Structure of the leaflet-ng2 directives](directive-structure.png)\n\nFor further information look at the [api documentation](https://leaflet-ng2.yagajs.org/latest/typedoc/) or the\n[examples](https://leaflet-ng2.yagajs.org/latest/examples/).\n\n\n### Use in combination with a CLI\n\nFor developing we recommend to use a command-line-interface like [`angular-cli`](https://cli.angular.io/) for\nweb-applications or [`ionic`](http://ionicframework.com/) for smartdevice-like apps.\n\n*You can also check out our [ionic-starter templates](https://github.com/yagajs/?q=ionic-starter) on our GitHub account*\n\n#### Start a project with Angular CLI\n\nYou have to perform the followings steps to start a project with the [`angular-cli`](https://cli.angular.io/):\n\n```bash\n# Install the angular-cli to your system\nnpm install -g angular-cli\n# Create a app with the angular-cli\nng new my-yaga-app\n# Switch into the created project directory\ncd my-yaga-app\n# Install @yaga/leaflet-ng2 as project dependency\nnpm install --save @yaga/leaflet-ng2\n```\n\nImport the YAGA module into your app in `app.module.ts`:\n\n```typescript\n// other imports...\nimport { YagaModule } from '@yaga/leaflet-ng2';\n\n// ...\n\n@NgModule({\n  imports: [\n    // other...\n    YagaModule,\n  ],\n  // some other properties...\n)\nexport class AppModule { }\n```\n\n#### Start a project with Ionic CLI\n\nYou have to perform the followings steps to start a project with the [`ionic-cli`](http://ionicframework.com/):\n\n```bash\n# Install the ionic-cli to your system\nnpm install -g ionic\n# Create a app with the ionic-cli (select a template unteractive)\nionic start my-yaga-app\n# Switch into the created project directory\ncd my-yaga-app\n# Install @yaga/leaflet-ng2 as project dependency\nnpm install --save @yaga/leaflet-ng2\n```\n\nImport the YAGA module into your app in `app.module.ts`:\n\n```typescript\n// other imports...\nimport { YagaModule } from '@yaga/leaflet-ng2';\n\n// ...\n\n@NgModule({\n  imports: [\n    // other...\n    YagaModule,\n  ],\n  // some other properties...\n)\nexport class AppModule { }\n```\n\n### Use standard Leaflet plugins\n\nYou are able to integrate other Leaflet plugins (not prepared for the use with Angular) by importing the\nmap directive into your parent directive like this:\n\n```typescript\n@Component({\n    selector: 'app',\n    template: `\u003cyaga-map\u003e\u003c!-- ... --\u003e\u003c/yaga-map\u003e`\n})\nexport class AppComponent implements AfterViewInit {\n    @ViewChild(MapComponent) private mapComponent: MapComponent;\n    public ngAfterViewInit(): void {\n        const myFancyLeafletPlugin = (L as any).myFancyLeafletPlugin({ /* ... */ });\n        this.mapComponent.addSomething(myFancyLeafletPlugin);\n    }\n}\n```\n\n*For further information, take a look at the\n[according issue on GitHub](https://github.com/yagajs/leaflet-ng2/issues/251)*\n\n#### Write as a YAGA Module\n\nTo write an existing extension as a YAGA directive is made as easy as possible. Your Leaflet-Plugin of choice should\nalready have a TypeScript type-definition. At first take a look which Leaflet base-class your Leaflet-Plugin of choice\nimplements. Than copy the implementation and software-tests of the according base-class in this repository and enhance\nit accordingly to the given schema.\n\n#### List of providers\n\n* `MapProvider` - Inject this provider for classes that have to interact with the `Map` class and not with a\n`LayerGroup`. `Controls` typically use the `MapProvider`\n* `LayerGroupProvider` - Inject this provider for classes that implements `Layers`. Note that the `Map` also provides\na `LayerGroupProvider`, but it is `@Host` and you are not able to request a higher one in the dependency-chain.\n* `LayerProvider` - Every class that implements `Layer` should have a `LayerProvider` to give for example `Popup`s the\npossibility to get access to this.\n* `MarkerProvider` - Use this to add `Icon`s.\n\n#### Example\n\nEvery class that extends a layer in Leaflet must provide a `LayerProvider`. Layers in Leaflet needs typically a `Map` or\n`LayerGroup` to have the possibility to add it to that (`layer.addTo(MapOrLayerGroup)`). So every instance of a\n`LayerGroup` must provide a `LayerGroupProvider`.\n\nWith the information of the above mentioned architecture, you have to implement a `LayerGroupDirective` (which is\nextended from Leaflet's `LayerGroup` class, which is - in turn - extended from Leaflet's `Layer`) like this:\n\n```typescript\nimport { Directive, SkipSelf } from '@angular/core';\nimport { LayerGroupProvider, LayerProvider } from '@yaga/leaflet-ng2';\nimport { FeatureGroup } from 'leaflet';\n\n@Directive({\n    providers: [ LayerGroupProvider, LayerProvider ], // Provide a new Layer and LayerGroup\n    selector: 'yaga-feature-group',\n})\nexport class FeatureGroupDirective extends FeatureGroup {\n\n    constructor(\n        @SkipSelf() parentLayerGroupProvider: LayerGroupProvider, // Use SkipSelf to access the parent provider\n        layerGroupProvider: LayerGroupProvider, // Import new Provider to reference this class\n        layerProvider: LayerProvider, // Import new Provider to reference this class\n    ) {\n        super();\n\n        layerProvider.ref = this; // Reference this class to created provider\n        layerGroupProvider.ref = this; // Reference this class to created provider\n\n        this.addTo(parentLayerGroupProvider.ref); // Add it to parent LayerGroup (which can also be a map)\n    }\n}\n```\n\n\n\n## Scripts Tasks\n\nScripts registered in package.json:\n\n* `init`: Install all stuff needed for development (Typings, libs etc.)\n* `clean`: Remove the stuff from init-task\n* `reinit`: Call clean and init\n* `transpile`: Transpile TypeScript Code to JavaScript\n* `lint`: Use the linter for TypeScript Code\n* `test`: Run software- and coverage-tests in node.\n* `browser-test`: Build the tests for the browser.\n* `build-examples`: Build the examples.\n* `doc`: Build the API documentation.\n\n*Every command is also available as dockerized version, by prefixing `docker:` (ex.: `docker:lint`)*\n\n## License\n\nThis library is released under the [ISC License](LICENSE).\n\n\n[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fyagajs%2Fleaflet-ng2.svg?type=large)](https://app.fossa.io/projects/git%2Bgithub.com%2Fyagajs%2Fleaflet-ng2?ref=badge_large)\n\n## Links\n\n* [YAGA-Website](https://yagajs.org)\n* [Project-Website](https://leaflet-ng2.yagajs.org)\n* [Unit-Tests](https://leaflet-ng2.yagajs.org/latest/browser-test/)\n* [Test-Coverage](https://leaflet-ng2.yagajs.org/latest/coverage/)\n* [API-Documentation](https://leaflet-ng2.yagajs.org/latest/typedoc/)\n* [GitHub](https://github.com/yagajs/leaflet-ng2)\n* [NPM](https://www.npmjs.com/package/@yaga/leaflet-ng2)\n* [Workshop with Ionic 2](https://github.com/atd-schubert/leaflet-ng2-workshop-froscon/tags)\n* [Video-Playlist (YouTube)](https://www.youtube.com/playlist?list=PLbpJoccrLTc00EXHFVIMTpIV_mYwb7IZW)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyagajs%2Fleaflet-ng2","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyagajs%2Fleaflet-ng2","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyagajs%2Fleaflet-ng2/lists"}