{"id":21174199,"url":"https://github.com/bluehalo/ngx-leaflet-markercluster","last_synced_at":"2025-05-16T18:06:17.411Z","repository":{"id":19760544,"uuid":"87833823","full_name":"bluehalo/ngx-leaflet-markercluster","owner":"bluehalo","description":null,"archived":false,"fork":false,"pushed_at":"2024-11-25T13:04:07.000Z","size":1261,"stargazers_count":61,"open_issues_count":21,"forks_count":26,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-04-03T19:13:32.911Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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":"2017-04-10T16:34:44.000Z","updated_at":"2025-02-18T15:11:04.000Z","dependencies_parsed_at":"2025-02-03T12:11:08.997Z","dependency_job_id":"f73a7be0-d433-477c-825e-ccf130792910","html_url":"https://github.com/bluehalo/ngx-leaflet-markercluster","commit_stats":{"total_commits":141,"total_committers":12,"mean_commits":11.75,"dds":0.1985815602836879,"last_synced_commit":"e3225a9eca130b20126c5945a52abe1781ff1488"},"previous_names":["asymmetrik/angular2-leaflet-markercluster"],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bluehalo%2Fngx-leaflet-markercluster","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bluehalo%2Fngx-leaflet-markercluster/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bluehalo%2Fngx-leaflet-markercluster/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bluehalo%2Fngx-leaflet-markercluster/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bluehalo","download_url":"https://codeload.github.com/bluehalo/ngx-leaflet-markercluster/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248598358,"owners_count":21131081,"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-11-20T16:53:44.289Z","updated_at":"2025-04-12T16:40:33.433Z","avatar_url":"https://github.com/bluehalo.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Maps"],"readme":"# @bluehalo/ngx-leaflet-markercluster\n\n[![Build Status][travis-image]][travis-url]\n\n[travis-url]: https://travis-ci.org/Asymmetrik/ngx-leaflet-markercluster/\n[travis-image]: https://travis-ci.org/Asymmetrik/ngx-leaflet-markercluster.svg\n\n\u003e Extension to the @bluehalo/ngx-leaflet package for Angular.io\n\u003e Provides leaflet.markercluster integration into Angular.io projects. Compatible with Leaflet v1.x and leaflet.markercluster v1.x\n\n\n## Table of Contents\n- [Install](#install)\n- [Usage](#usage)\n- [Contribute](#contribute)\n- [License](#license)\n\n\n## Install\nInstall the package and its peer dependencies via npm:\n```\nnpm install leaflet @bluehalo/ngx-leaflet\nnpm install leaflet.markercluster @bluehalo/ngx-leaflet-markercluster\n```\n\nIf you intend to use this library in a typescript project (utilizing the typings), you will need to also install the leaflet typings via npm:\n```\nnpm install @types/leaflet @types/leaflet.markercluster\n```\n\n## Usage\nThis plugin is used with the [Angular.io Leaflet plugin](https://github.com/bluehalo/ngx-leaflet).\n\nThe first step is to follow the instructions to get @bluehalo/ngx-leaflet working.\nNext, follow a similar process to install and configure this plugin.\nGenerally, the steps are:\n\n- Install this package and its dependencies (see above).\n- Import the leaflet.markercluster stylesheet (i.e., `node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css` and `.../MarkerCluster.css` for animations).  \n   - Follow the same process as documented in `@bluehalo/ngx-leaflet`.\n- Import the `LeafletMarkerClusterModule` into your Angular application module and local module (if applicable).\n- Create and configure a map (see docs below and/or demo) \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```.\n\n```html\n\u003cdiv style=\"height: 400px;\"\n     leaflet\n     [leafletOptions]=\"options\"\n     [leafletMarkerCluster]=\"markerClusterData\"\n     [leafletMarkerClusterOptions]=\"markerClusterOptions\"\u003e\n\u003c/div\u003e\n```\n\nFinally, to initialize and configure the leaflet markercluster plugin, use the following attribute directives:\n\n### leafletMarkerCluster\nThis attribute is an attribute directive that initiates the marker cluster plugin and binds the marker data. \n\n#### leafletMarkerClusterOptions\nInput binding for the options to be passed directly to the marker cluster plugin upon creation.\nThese options are only currently processed at creation time.\n\nThe options object is passed through to the leaflet.markercluster object.\nTherefore, you can reference [their documentation](https://github.com/Leaflet/Leaflet.markercluster) for help configuring this plugin. \n\n\n### Getting a reference to the MarkerCluster Layer\nThere is an optional output event emitter that will expose the markercluster group being used by the plugin called ```leafletMarkerClusterReady```.\nSee the following example:\n\n```html\n\u003cdiv style=\"height: 400px;\"\n     leaflet\n     [leafletOptions]=\"options\"\n     [leafletMarkerCluster]=\"markerClusterData\"\n     [leafletMarkerClusterOptions]=\"markerClusterOptions\"\n     (leafletMarkerClusterReady)=\"markerClusterReady($event)\"\u003e\n\u003c/div\u003e\n```\n\n```js\nmarkerClusterReady(markerCluster: L.MarkerClusterGroup) {\n\t// Do stuff with group\n}\n```\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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbluehalo%2Fngx-leaflet-markercluster","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbluehalo%2Fngx-leaflet-markercluster","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbluehalo%2Fngx-leaflet-markercluster/lists"}