@agm/js-marker-clusterer
- Version 1.1.0
- Published
- 250 kB
- 1 dependency
- MIT license
Install
npm i @agm/js-marker-clusterer
yarn add @agm/js-marker-clusterer
pnpm add @agm/js-marker-clusterer
Overview
Angular Google Maps (AGM) extension for js-marker-clusterer support
Index
Classes
Classes
class AgmJsMarkerClustererModule
class AgmJsMarkerClustererModule {}
class AgmMarkerCluster
class AgmMarkerCluster implements OnDestroy, OnChanges, OnInit, ClusterOptions {}
AgmMarkerCluster clusters map marker if they are near together
### Example
import { Component } from '@angular/core';@Component({selector: 'my-map-cmp',styles: [`agm-map {height: 300px;}`],template: `<agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom"><agm-marker-cluster><agm-marker [latitude]="lat" [longitude]="lng" [label]="'M'"></agm-marker><agm-marker [latitude]="lat2" [longitude]="lng2" [label]="'N'"></agm-marker></agm-marker-cluster></agm-map>`})
constructor
constructor(_clusterManager: ClusterManager);
property averageCenter
averageCenter: boolean;
Whether the center of each cluster should be the average of all markers in the cluster.
property calculator
calculator: CalculateFunction;
A function that calculates the cluster style and text based on the markers in the cluster.
property clusterClick
clusterClick: EventEmitter<void>;
property gridSize
gridSize: number;
The grid size of a cluster in pixels
property imageExtension
imageExtension: string;
property imagePath
imagePath: string;
property maxZoom
maxZoom: number;
The maximum zoom level that a marker can be part of a cluster.
property minimumClusterSize
minimumClusterSize: number;
The minimum number of markers to be in a cluster before the markers are hidden and a count is shown.
property styles
styles: ClusterStyle[];
An object that has style properties.
property zoomOnClick
zoomOnClick: boolean;
Whether the default behaviour of clicking on a cluster is to zoom into it.
class ClusterManager
class ClusterManager extends MarkerManager {}
constructor
constructor(_mapsWrapper: GoogleMapsAPIWrapper, _zone: NgZone);
method addMarker
addMarker: (marker: AgmMarker) => void;
method clearMarkers
clearMarkers: () => Promise<void>;
method createClusterEventObservable
createClusterEventObservable: <T>(eventName: string) => Observable<T>;
method deleteMarker
deleteMarker: (marker: AgmMarker) => Promise<void>;
method getClustererInstance
getClustererInstance: () => Promise<MarkerClustererInstance>;
method init
init: (options: ClusterOptions) => void;
method setAverageCenter
setAverageCenter: (c: AgmMarkerCluster) => void;
method setCalculator
setCalculator: (c: AgmMarkerCluster) => void;
method setGridSize
setGridSize: (c: AgmMarkerCluster) => void;
method setImageExtension
setImageExtension: (c: AgmMarkerCluster) => void;
method setImagePath
setImagePath: (c: AgmMarkerCluster) => void;
method setMaxZoom
setMaxZoom: (c: AgmMarkerCluster) => void;
method setMinimumClusterSize
setMinimumClusterSize: (c: AgmMarkerCluster) => void;
method setStyles
setStyles: (c: AgmMarkerCluster) => void;
method setZoomOnClick
setZoomOnClick: (c: AgmMarkerCluster) => void;
Package Files (4)
Dependencies (1)
Dev Dependencies (0)
No dev dependencies.
Peer Dependencies (3)
Badge
To add a badge like this oneto your package's README, use the codes available below.
You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@agm/js-marker-clusterer
.
- Markdown[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@agm/js-marker-clusterer)
- HTML<a href="https://www.jsdocs.io/package/@agm/js-marker-clusterer"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>
- Updated .
Package analyzed in 4177 ms. - Missing or incorrect documentation? Open an issue for this package.