diff --git a/classes/Cluster.html b/classes/Cluster.html index fca6d990..ca1a15a0 100644 --- a/classes/Cluster.html +++ b/classes/Cluster.html @@ -1,4 +1,4 @@ -Cluster | @googlemaps/js-markerclusterer

Class Cluster

Constructors

constructor +Cluster | @googlemaps/js-markerclusterer

Class Cluster

Constructors

constructor

Properties

_position marker? markers? @@ -7,7 +7,7 @@ position

Methods

delete push -

Constructors

constructor

Properties

Protected _position

_position: LatLng

Optional marker

marker?: Marker

Optional Readonly markers

markers?: Marker[]

Accessors

bounds

  • get bounds(): LatLngBounds

  • Returns LatLngBounds

count

  • get count(): number

  • Get the count of visible markers.

    -

    Returns number

position

Methods

delete

  • delete(): void

  • Cleanup references and remove marker from map.

    -

    Returns void

push

  • push(marker): void

  • Add a marker to the cluster.

    -

    Parameters

    Returns void

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc

\ No newline at end of file +

Constructors

constructor

Properties

Protected _position

_position: LatLng

Optional marker

marker?: Marker

Optional Readonly markers

markers?: Marker[]

Accessors

bounds

  • get bounds(): LatLngBounds

  • Returns LatLngBounds

count

  • get count(): number

  • Get the count of visible markers.

    +

    Returns number

position

Methods

delete

  • delete(): void

  • Cleanup references and remove marker from map.

    +

    Returns void

push

  • push(marker): void

  • Add a marker to the cluster.

    +

    Parameters

    Returns void

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc

\ No newline at end of file diff --git a/classes/ClusterStats.html b/classes/ClusterStats.html index feb30e48..d3f18d8a 100644 --- a/classes/ClusterStats.html +++ b/classes/ClusterStats.html @@ -1,5 +1,5 @@ ClusterStats | @googlemaps/js-markerclusterer

Class ClusterStats

Provides statistics on all clusters in the current render cycle for use in Renderer.render.

-

Constructors

constructor +

Constructors

constructor

Properties

clusters markers -

Constructors

constructor

Properties

Readonly clusters

clusters: {
    count: number;
    markers: {
        max: number;
        mean: number;
        min: number;
        sum: number;
    };
}

Type declaration

  • count: number
  • markers: {
        max: number;
        mean: number;
        min: number;
        sum: number;
    }
    • max: number
    • mean: number
    • min: number
    • sum: number

Readonly markers

markers: {
    sum: number;
}

Type declaration

  • sum: number

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc

\ No newline at end of file +

Constructors

constructor

Properties

Readonly clusters

clusters: {
    count: number;
    markers: {
        max: number;
        mean: number;
        min: number;
        sum: number;
    };
}

Type declaration

  • count: number
  • markers: {
        max: number;
        mean: number;
        min: number;
        sum: number;
    }
    • max: number
    • mean: number
    • min: number
    • sum: number

Readonly markers

markers: {
    sum: number;
}

Type declaration

  • sum: number

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc

\ No newline at end of file diff --git a/classes/DefaultRenderer.html b/classes/DefaultRenderer.html index aa159e77..4e24273f 100644 --- a/classes/DefaultRenderer.html +++ b/classes/DefaultRenderer.html @@ -1,7 +1,7 @@ -DefaultRenderer | @googlemaps/js-markerclusterer

Class DefaultRenderer

Implements

Constructors

constructor +DefaultRenderer | @googlemaps/js-markerclusterer

Class DefaultRenderer

Implements

Constructors

constructor

Methods

render

Constructors

constructor

Methods

render

  • render(__namedParameters, stats, map): Marker

  • The default render function for the library used by MarkerClusterer.

    Currently set to use the following:

    // change color if this cluster has more markers than the mean cluster
    const color =
      count > Math.max(10, stats.clusters.markers.mean)
        ? "#ff0000"
        : "#0000ff";

    // create svg url with fill color
    const svg = window.btoa(`
    <svg fill="${color}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240">
      <circle cx="120" cy="120" opacity=".6" r="70" />
      <circle cx="120" cy="120" opacity=".3" r="90" />
      <circle cx="120" cy="120" opacity=".2" r="110" />
      <circle cx="120" cy="120" opacity=".1" r="130" />
    </svg>`);

    // create marker using svg icon
    return new google.maps.Marker({
      position,
      icon: {
        url: `data:image/svg+xml;base64,${svg}`,
        scaledSize: new google.maps.Size(45, 45),
      },
      label: {
        text: String(count),
        color: "rgba(255,255,255,0.9)",
        fontSize: "12px",
      },
      // adjust zIndex to be above other markers
      zIndex: 1000 + count,
    });
    -

    Parameters

    Returns Marker

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc

\ No newline at end of file +

Parameters

Returns Marker

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc

\ No newline at end of file diff --git a/classes/GridAlgorithm.html b/classes/GridAlgorithm.html index 5f269bb2..29a5ff95 100644 --- a/classes/GridAlgorithm.html +++ b/classes/GridAlgorithm.html @@ -2,7 +2,7 @@ clustering.

The Grid algorithm does not implement caching and markers may flash as the viewport changes. Instead use SuperClusterAlgorithm.

-

Hierarchy

Constructors

constructor +

Hierarchy

  • AbstractViewportAlgorithm
    • GridAlgorithm

Constructors

constructor

Properties

clusters gridSize maxDistance @@ -13,8 +13,8 @@ calculate cluster noop -

Constructors

constructor

Properties

Protected clusters

clusters: Cluster[] = []

Protected gridSize

gridSize: number

Protected maxDistance

maxDistance: number

Protected maxZoom

maxZoom: number

Protected state

state: {
    zoom: number;
} = ...

Type declaration

  • zoom: number

Protected viewportPadding

viewportPadding: number = 60

Methods

Protected addToClosestCluster

  • addToClosestCluster(marker, map, projection): void

  • Parameters

    • marker: Marker
    • map: Map
    • projection: MapCanvasProjection

    Returns void

calculate

Protected cluster

Protected noop

  • noop<T>(__namedParameters): Cluster[]

  • Helper function to bypass clustering based upon some map state such as +

Constructors

constructor

Properties

Protected clusters

clusters: Cluster[] = []

Protected gridSize

gridSize: number

Protected maxDistance

maxDistance: number

Protected maxZoom

maxZoom: number

Protected state

state: {
    zoom: number;
} = ...

Type declaration

  • zoom: number

Protected viewportPadding

viewportPadding: number = 60

Methods

Protected addToClosestCluster

calculate

Protected cluster

Protected noop

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc

\ No newline at end of file +

Type Parameters

Parameters

Returns Cluster[]

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc

\ No newline at end of file diff --git a/classes/MarkerClusterer.html b/classes/MarkerClusterer.html index 86d59e6e..e05afb5c 100644 --- a/classes/MarkerClusterer.html +++ b/classes/MarkerClusterer.html @@ -1,6 +1,6 @@ MarkerClusterer | @googlemaps/js-markerclusterer

Class MarkerClusterer

MarkerClusterer creates and manages per-zoom-level clusters for large amounts of markers. See MarkerClustererOptions for more details.

-

Hierarchy

  • OverlayViewSafe
    • MarkerClusterer

Constructors

constructor +

Hierarchy

  • OverlayViewSafe
    • MarkerClusterer

Constructors

constructor

Properties

algorithm clusters idleListener @@ -18,9 +18,9 @@ render renderClusters reset -

Constructors

constructor

Properties

Protected algorithm

algorithm: Algorithm

See

MarkerClustererOptions.algorithm

-

Protected clusters

clusters: Cluster[]

Protected idleListener

idleListener: MapsEventListener

Protected map

map: Map

See

MarkerClustererOptions.map

-

Protected markers

markers: Marker[]

onClusterClick

onClusterClick: onClusterClickHandler

See

MarkerClustererOptions.onClusterClick

-

Protected renderer

renderer: Renderer

See

MarkerClustererOptions.renderer

-

Methods

addMarker

addMarkers

clearMarkers

onAdd

onRemove

removeMarker

removeMarkers

render

Protected renderClusters

Protected reset

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc

\ No newline at end of file +

Constructors

constructor

Properties

Protected algorithm

algorithm: Algorithm

See

MarkerClustererOptions.algorithm

+

Protected clusters

clusters: Cluster[]

Protected idleListener

idleListener: MapsEventListener

Protected map

map: Map

See

MarkerClustererOptions.map

+

Protected markers

markers: Marker[]

onClusterClick

onClusterClick: onClusterClickHandler

See

MarkerClustererOptions.onClusterClick

+

Protected renderer

renderer: Renderer

See

MarkerClustererOptions.renderer

+

Methods

addMarker

addMarkers

clearMarkers

onAdd

onRemove

removeMarker

removeMarkers

render

Protected renderClusters

Protected reset

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc

\ No newline at end of file diff --git a/classes/MarkerUtils.html b/classes/MarkerUtils.html index 0acb1266..afe8c3c1 100644 --- a/classes/MarkerUtils.html +++ b/classes/MarkerUtils.html @@ -1,9 +1,9 @@ MarkerUtils | @googlemaps/js-markerclusterer

Class MarkerUtils

util class that creates a common set of convenience functions to wrap shared behavior of Advanced Markers and Markers.

-

Constructors

constructor +

Constructors

constructor

Methods

getPosition getVisible isAdvancedMarker isAdvancedMarkerAvailable setMap -

Constructors

constructor

Methods

Static getPosition

Static getVisible

Static isAdvancedMarker

  • isAdvancedMarker(marker): marker is AdvancedMarkerElement

  • Parameters

    Returns marker is AdvancedMarkerElement

Static isAdvancedMarkerAvailable

  • isAdvancedMarkerAvailable(map): boolean

  • Parameters

    • map: Map

    Returns boolean

Static setMap

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc

\ No newline at end of file +

Constructors

constructor

Methods

Static getPosition

Static getVisible

Static isAdvancedMarker

Static isAdvancedMarkerAvailable

Static setMap

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc

\ No newline at end of file diff --git a/classes/NoopAlgorithm.html b/classes/NoopAlgorithm.html index b6dccd5d..2d051502 100644 --- a/classes/NoopAlgorithm.html +++ b/classes/NoopAlgorithm.html @@ -1,11 +1,11 @@ NoopAlgorithm | @googlemaps/js-markerclusterer

Class NoopAlgorithm

Noop algorithm does not generate any clusters or filter markers by the an extended viewport.

-

Hierarchy

  • AbstractAlgorithm
    • NoopAlgorithm

Constructors

constructor +

Hierarchy

  • AbstractAlgorithm
    • NoopAlgorithm

Constructors

constructor

Properties

maxZoom

Methods

calculate cluster noop -

Constructors

constructor

Properties

Protected maxZoom

maxZoom: number

Methods

calculate

Protected cluster

Protected noop

  • noop<T>(__namedParameters): Cluster[]

  • Helper function to bypass clustering based upon some map state such as +

Constructors

constructor

Properties

Protected maxZoom

maxZoom: number

Methods

calculate

Protected cluster

Protected noop

  • noop<T>(__namedParameters): Cluster[]

  • Helper function to bypass clustering based upon some map state such as zoom, number of markers, etc.

     cluster({markers, map}: AlgorithmInput): Cluster[] {
       if (shouldBypassClustering(map)) {
         return this.noop({markers})
       }
    }
    -

    Type Parameters

    Parameters

    • __namedParameters: T

    Returns Cluster[]

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc

\ No newline at end of file +

Type Parameters

Parameters

Returns Cluster[]

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc

\ No newline at end of file diff --git a/classes/SuperClusterAlgorithm.html b/classes/SuperClusterAlgorithm.html index f2c4df74..44cc6aae 100644 --- a/classes/SuperClusterAlgorithm.html +++ b/classes/SuperClusterAlgorithm.html @@ -1,6 +1,6 @@ SuperClusterAlgorithm | @googlemaps/js-markerclusterer

Class SuperClusterAlgorithm

A very fast JavaScript algorithm for geospatial point clustering using KD trees.

See

https://www.npmjs.com/package/supercluster for more information on options.

-

Hierarchy

  • AbstractAlgorithm
    • SuperClusterAlgorithm

Constructors

constructor +

Hierarchy

  • AbstractAlgorithm
    • SuperClusterAlgorithm

Constructors

constructor

Properties

clusters markers maxZoom @@ -10,8 +10,8 @@ cluster noop transformCluster -

Constructors

constructor

Properties

Protected clusters

clusters: Cluster[]

Protected markers

markers: Marker[]

Protected maxZoom

maxZoom: number

Protected state

state: {
    zoom: number;
} = ...

Type declaration

  • zoom: number

Protected superCluster

superCluster: Supercluster<AnyProps, AnyProps>

Methods

calculate

cluster

Protected noop

  • noop<T>(__namedParameters): Cluster[]

  • Helper function to bypass clustering based upon some map state such as +

Constructors

constructor

Properties

Protected clusters

clusters: Cluster[]

Protected markers

markers: Marker[]

Protected maxZoom

maxZoom: number

Protected state

state: {
    zoom: number;
} = ...

Type declaration

  • zoom: number

Protected superCluster

superCluster: Supercluster<AnyProps, AnyProps>

Methods

calculate

cluster

Protected noop

  • noop<T>(__namedParameters): Cluster[]

  • Helper function to bypass clustering based upon some map state such as zoom, number of markers, etc.

     cluster({markers, map}: AlgorithmInput): Cluster[] {
       if (shouldBypassClustering(map)) {
         return this.noop({markers})
       }
    }
    -

    Type Parameters

    Parameters

    • __namedParameters: T

    Returns Cluster[]

Protected transformCluster

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc

\ No newline at end of file +

Type Parameters

Parameters

Returns Cluster[]

Protected transformCluster

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc

\ No newline at end of file diff --git a/classes/SuperClusterViewportAlgorithm.html b/classes/SuperClusterViewportAlgorithm.html index c297a80b..7757c17a 100644 --- a/classes/SuperClusterViewportAlgorithm.html +++ b/classes/SuperClusterViewportAlgorithm.html @@ -1,6 +1,6 @@ SuperClusterViewportAlgorithm | @googlemaps/js-markerclusterer

Class SuperClusterViewportAlgorithm

A very fast JavaScript algorithm for geospatial point clustering using KD trees.

See

https://www.npmjs.com/package/supercluster for more information on options.

-

Hierarchy

  • AbstractViewportAlgorithm
    • SuperClusterViewportAlgorithm

Constructors

constructor +

Hierarchy

  • AbstractViewportAlgorithm
    • SuperClusterViewportAlgorithm

Constructors

constructor

Properties

clusters markers maxZoom @@ -11,8 +11,8 @@ cluster noop transformCluster -

Constructors

constructor

Properties

Protected clusters

clusters: Cluster[]

Protected markers

markers: Marker[]

Protected maxZoom

maxZoom: number

Protected state

state: SuperClusterViewportState

Protected superCluster

superCluster: Supercluster<AnyProps, AnyProps>

Protected viewportPadding

viewportPadding: number = 60

Methods

calculate

cluster

Protected noop

  • noop<T>(__namedParameters): Cluster[]

  • Helper function to bypass clustering based upon some map state such as +

Constructors

constructor

Properties

Protected clusters

clusters: Cluster[]

Protected markers

markers: Marker[]

Protected maxZoom

maxZoom: number

Protected state

state: SuperClusterViewportState

Protected superCluster

superCluster: Supercluster<AnyProps, AnyProps>

Protected viewportPadding

viewportPadding: number = 60

Methods

calculate

cluster

Protected noop

  • noop<T>(__namedParameters): Cluster[]

  • Helper function to bypass clustering based upon some map state such as zoom, number of markers, etc.

     cluster({markers, map}: AlgorithmInput): Cluster[] {
       if (shouldBypassClustering(map)) {
         return this.noop({markers})
       }
    }
    -

    Type Parameters

    Parameters

    • __namedParameters: T

    Returns Cluster[]

Protected transformCluster

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc

\ No newline at end of file +

Type Parameters

Parameters

Returns Cluster[]

Protected transformCluster

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc

\ No newline at end of file diff --git a/enums/MarkerClustererEvents.html b/enums/MarkerClustererEvents.html index 54c764fd..d18aead0 100644 --- a/enums/MarkerClustererEvents.html +++ b/enums/MarkerClustererEvents.html @@ -1,4 +1,4 @@ -MarkerClustererEvents | @googlemaps/js-markerclusterer

Enumeration MarkerClustererEvents

Enumeration Members

CLUSTERING_BEGIN +MarkerClustererEvents | @googlemaps/js-markerclusterer

Enumeration MarkerClustererEvents

Enumeration Members

CLUSTERING_BEGIN CLUSTERING_END CLUSTER_CLICK -

Enumeration Members

CLUSTERING_BEGIN

CLUSTERING_BEGIN: "clusteringbegin"

CLUSTERING_END

CLUSTERING_END: "clusteringend"

CLUSTER_CLICK

CLUSTER_CLICK: "click"

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc

\ No newline at end of file +

Enumeration Members

CLUSTERING_BEGIN

CLUSTERING_BEGIN: "clusteringbegin"

CLUSTERING_END

CLUSTERING_END: "clusteringend"

CLUSTER_CLICK

CLUSTER_CLICK: "click"

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc

\ No newline at end of file diff --git a/functions/defaultOnClusterClickHandler.html b/functions/defaultOnClusterClickHandler.html index 360feac0..d644e630 100644 --- a/functions/defaultOnClusterClickHandler.html +++ b/functions/defaultOnClusterClickHandler.html @@ -1 +1 @@ -defaultOnClusterClickHandler | @googlemaps/js-markerclusterer

Function defaultOnClusterClickHandler

  • defaultOnClusterClickHandler(event, cluster, map): void

  • Parameters

    • event: MapMouseEvent
    • cluster: Cluster
    • map: Map

    Returns void

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file +defaultOnClusterClickHandler | @googlemaps/js-markerclusterer

Function defaultOnClusterClickHandler

  • defaultOnClusterClickHandler(event, cluster, map): void

  • Parameters

    • event: MapMouseEvent
    • cluster: Cluster
    • map: Map

    Returns void

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file diff --git a/functions/extendBoundsToPaddedViewport.html b/functions/extendBoundsToPaddedViewport.html index bdaf7947..c8c415b8 100644 --- a/functions/extendBoundsToPaddedViewport.html +++ b/functions/extendBoundsToPaddedViewport.html @@ -1,2 +1,2 @@ extendBoundsToPaddedViewport | @googlemaps/js-markerclusterer

Function extendBoundsToPaddedViewport

  • extendBoundsToPaddedViewport(bounds, projection, numPixels): LatLngBounds

  • Extends a bounds by a number of pixels in each direction

    -

    Parameters

    • bounds: LatLngBounds
    • projection: MapCanvasProjection
    • numPixels: number

    Returns LatLngBounds

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file +

Parameters

Returns LatLngBounds

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file diff --git a/functions/filterMarkersToPaddedViewport.html b/functions/filterMarkersToPaddedViewport.html index 95a446a4..e58d01f1 100644 --- a/functions/filterMarkersToPaddedViewport.html +++ b/functions/filterMarkersToPaddedViewport.html @@ -2,4 +2,4 @@

Parameters

Returns Marker[]

The list of markers in the padded viewport

-

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file +

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file diff --git a/functions/getPaddedViewport.html b/functions/getPaddedViewport.html index dd2128f4..b6318562 100644 --- a/functions/getPaddedViewport.html +++ b/functions/getPaddedViewport.html @@ -1,2 +1,2 @@ getPaddedViewport | @googlemaps/js-markerclusterer

Function getPaddedViewport

  • getPaddedViewport(bounds, projection, pixels): [number, number, number, number]

  • Gets the extended bounds as a bbox [westLng, southLat, eastLng, northLat]

    -

    Parameters

    • bounds: LatLngBounds
    • projection: MapCanvasProjection
    • pixels: number

    Returns [number, number, number, number]

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file +

Parameters

Returns [number, number, number, number]

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file diff --git a/index.html b/index.html index d0004c01..953c5402 100644 --- a/index.html +++ b/index.html @@ -1,47 +1,56 @@ -@googlemaps/js-markerclusterer

@googlemaps/js-markerclusterer

Google Maps JavaScript MarkerClusterer

npm -Build +@googlemaps/js-markerclusterer

@googlemaps/js-markerclusterer

npm +Tests/Build Status Release +Stable codecov -GitHub contributors semantic-release -

-

Description

The library creates and manages per-zoom-level clusters for large amounts of markers.

+solidarity

+

GitHub contributors +Discord +GitHub License

+

Google Maps JavaScript MarkerClusterer

Description

The library creates and manages per-zoom-level clusters for large amounts of markers.

Try the demo

screenshot

-

See the history section and migration section for how this library relates to @google/markerclusterer and @googlemaps/markerclustererplus.

-

Install

Available via npm as the package @googlemaps/markerclusterer.

+

See the history section and migration section for how this library relates to @google/markerclusterer and @googlemaps/markerclustererplus.

+

Requirements

+

Installation

Install the @googlemaps/markerclusterer NPM package with:

npm i @googlemaps/markerclusterer

Alternativly you may add the umd package directly to the html document using the unpkg link.

<script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>

When adding via unpkg, the MarkerClusterer can be accessed at markerClusterer.MarkerClusterer.

-

TypeScript

This library uses the official TypeScript typings for Google Maps Platform, @types/google.maps.

+

TypeScript

This library uses the official TypeScript typings for Google Maps Platform, @types/google.maps.

npm i -D @types/google.maps
-

Documentation

The reference documentation is generated from the TypeScript definitions.

-

Examples

import { MarkerClusterer } from "@googlemaps/markerclusterer";

// use default algorithm and renderer
const markerCluster = new MarkerClusterer({ map, markers });
+
Documentation
The documentation is generated from the TypeScript definitions.

+
Usage
Examples
import { MarkerClusterer } from "@googlemaps/markerclusterer";

// use default algorithm and renderer
const markerCluster = new MarkerClusterer({ map, markers });
 

 
View the package in action:

 
    
-
  • Algorithm Comparisons - This example demonstrates the different algorithms. Please note that spacing and many other options can be changed for each algorithm. 
    
+
  • Algorithm Comparisons - This example demonstrates the different algorithms. Please note that spacing and many other options can be changed for each algorithm.
    
 
    • 
 
  • Renderer Usage - This example demonstrates different renderers similar to the image below.
    
 
    • 
 

 
Screen Shot 2021-09-28 at 1 41 06 PM

-
History
This library has a heritage in @google/markerclusterer and @googlemaps/markerclustererplus, originally made available on code.google.com and then transferred to GitHub at https://github.com/googlemaps/v3-utility-library. The following is an approximate timeline.

+
History
This library has a heritage in @google/markerclusterer and @googlemaps/markerclustererplus, originally made available on code.google.com and then transferred to GitHub at https://github.com/googlemaps/v3-utility-library. The following is an approximate timeline.

 
-
Migration
The API of @googlemaps/markerclusterer has changed in a number of ways from @googlemaps/markerclustererplus.

+
Migration
The API of [@googlemaps/markerclusterer][@googlemaps/markerclusterer] has changed in a number of ways from @googlemaps/markerclustererplus.

 
    
 
  • The MarkerClusterer class now accepts an algorithm and renderer parameter to allow for more flexibility. The interface looks like the following:
    • 
 

@@ -49,9 +58,16 @@
  • The MarkerClusterer accepts a single options argument instead of positional parameters.
    • -
  • The traditional GridAlgorithm is still supported, but is not the default. The default is supercluster which uses k-d trees for improved performance.
    • +
  • The traditional GridAlgorithm is still supported, but is not the default. The default is supercluster which uses k-d trees for improved performance.
  • Styling of clusters has been simplifed and moved to the renderer interface.
  • The MarkerClusterer class is still an instance of google.maps.OverlayView, but uses google.maps.Markers instead of google.maps.Overlay to render the clusters. This solves issues related to the usage of map panes and click handlers.
  • @googlemaps/markerclusterer supports Marker and Map a11y improvements.
-

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc

\ No newline at end of file +

Contributing

Contributions are welcome and encouraged! If you'd like to contribute, send us a pull request and refer to our code of conduct and contributing guide.

+

Terms of Service

This library uses Google Maps Platform services. Use of Google Maps Platform services through this library is subject to the Google Maps Platform Terms of Service.

+

This library is not a Google Maps Platform Core Service. Therefore, the Google Maps Platform Terms of Service (e.g. Technical Support Services, Service Level Agreements, and Deprecation Policy) do not apply to the code in this library.

+

Support

This library is offered via an open source license. It is not governed by the Google Maps Platform Support [Technical Support Services Guidelines, the SLA, or the Deprecation Policy. However, any Google Maps Platform services used by the library remain subject to the Google Maps Platform Terms of Service.

+

This library adheres to semantic versioning to indicate when backwards-incompatible changes are introduced. Accordingly, while the library is in version 0.x, backwards-incompatible changes may be introduced at any time.

+

If you find a bug, or have a feature request, please file an issue on GitHub. If you would like to get answers to technical questions from other Google Maps Platform developers, ask through one of our developer community channels. If you'd like to contribute, please check the contributing guide.

+

You can also discuss this library on our Discord server.

+

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc

\ No newline at end of file diff --git a/interfaces/Algorithm.html b/interfaces/Algorithm.html index 0d098445..b312edbc 100644 --- a/interfaces/Algorithm.html +++ b/interfaces/Algorithm.html @@ -1,4 +1,4 @@ -Algorithm | @googlemaps/js-markerclusterer

Interface Algorithm

interface Algorithm {
    calculate: ((__namedParameters) => AlgorithmOutput);
}

Properties

calculate +Algorithm | @googlemaps/js-markerclusterer

Interface Algorithm

interface Algorithm {
    calculate: ((__namedParameters) => AlgorithmOutput);
}

Properties

calculate

Properties

calculate

calculate: ((__namedParameters) => AlgorithmOutput)

Calculates an array of Cluster.

Type declaration

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc

\ No newline at end of file +

Parameters

Returns AlgorithmOutput

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc

\ No newline at end of file diff --git a/interfaces/AlgorithmInput.html b/interfaces/AlgorithmInput.html index 83cbbc79..1dfc973b 100644 --- a/interfaces/AlgorithmInput.html +++ b/interfaces/AlgorithmInput.html @@ -1,12 +1,12 @@ -AlgorithmInput | @googlemaps/js-markerclusterer

Interface AlgorithmInput

interface AlgorithmInput {
    map: Map;
    mapCanvasProjection: MapCanvasProjection;
    markers: Marker[];
}

Properties

map +AlgorithmInput | @googlemaps/js-markerclusterer

Interface AlgorithmInput

interface AlgorithmInput {
    map: Map;
    mapCanvasProjection: MapCanvasProjection;
    markers: Marker[];
}

Properties

map mapCanvasProjection markers

Properties

map

map: Map

The map containing the markers and clusters.

-

mapCanvasProjection

mapCanvasProjection: MapCanvasProjection

The mapCanvasProjection enables easy conversion from lat/lng to pixel.

+

mapCanvasProjection

mapCanvasProjection: MapCanvasProjection

The mapCanvasProjection enables easy conversion from lat/lng to pixel.

See

MapCanvasProjection

-

markers

markers: Marker[]

An array of markers to be clustered.

+

markers

markers: Marker[]

An array of markers to be clustered.

There are some specific edge cases to be aware of including the following:

  • Markers that are not visible.
-

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc

\ No newline at end of file +

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc

\ No newline at end of file diff --git a/interfaces/AlgorithmOptions.html b/interfaces/AlgorithmOptions.html index b14b1823..b58579a3 100644 --- a/interfaces/AlgorithmOptions.html +++ b/interfaces/AlgorithmOptions.html @@ -1,2 +1,2 @@ -AlgorithmOptions | @googlemaps/js-markerclusterer

Interface AlgorithmOptions

interface AlgorithmOptions {
    maxZoom?: number;
}

Properties

maxZoom? -

Properties

Optional maxZoom

maxZoom?: number

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc

\ No newline at end of file +AlgorithmOptions | @googlemaps/js-markerclusterer

Interface AlgorithmOptions

interface AlgorithmOptions {
    maxZoom?: number;
}

Properties

maxZoom? +

Properties

Optional maxZoom

maxZoom?: number

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc

\ No newline at end of file diff --git a/interfaces/AlgorithmOutput.html b/interfaces/AlgorithmOutput.html index 1fe4b900..59ffe110 100644 --- a/interfaces/AlgorithmOutput.html +++ b/interfaces/AlgorithmOutput.html @@ -1,5 +1,5 @@ -AlgorithmOutput | @googlemaps/js-markerclusterer

Interface AlgorithmOutput

interface AlgorithmOutput {
    changed?: boolean;
    clusters: Cluster[];
}

Properties

changed? +AlgorithmOutput | @googlemaps/js-markerclusterer

Interface AlgorithmOutput

interface AlgorithmOutput {
    changed?: boolean;
    clusters: Cluster[];
}

Properties

changed? clusters

Properties

Optional changed

changed?: boolean

A boolean flag indicating that the clusters have not changed.

-

clusters

clusters: Cluster[]

The clusters returned based upon the AlgorithmInput.

-

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc

\ No newline at end of file +

clusters

clusters: Cluster[]

The clusters returned based upon the AlgorithmInput.

+

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc

\ No newline at end of file diff --git a/interfaces/ClusterOptions.html b/interfaces/ClusterOptions.html index 02ebcec8..e5fdcf06 100644 --- a/interfaces/ClusterOptions.html +++ b/interfaces/ClusterOptions.html @@ -1,3 +1,3 @@ -ClusterOptions | @googlemaps/js-markerclusterer

Interface ClusterOptions

interface ClusterOptions {
    markers?: Marker[];
    position?: LatLng | LatLngLiteral;
}

Properties

markers? +ClusterOptions | @googlemaps/js-markerclusterer

Interface ClusterOptions

interface ClusterOptions {
    markers?: Marker[];
    position?: LatLng | LatLngLiteral;
}

Properties

markers? position? -

Properties

Optional markers

markers?: Marker[]

Optional position

position?: LatLng | LatLngLiteral

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc

\ No newline at end of file +

Properties

Optional markers

markers?: Marker[]

Optional position

position?: LatLng | LatLngLiteral

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc

\ No newline at end of file diff --git a/interfaces/GridOptions.html b/interfaces/GridOptions.html index 18d08784..7dd4e495 100644 --- a/interfaces/GridOptions.html +++ b/interfaces/GridOptions.html @@ -1,10 +1,10 @@ -GridOptions | @googlemaps/js-markerclusterer

Interface GridOptions

interface GridOptions {
    gridSize?: number;
    maxDistance?: number;
    maxZoom?: number;
    viewportPadding?: number;
}

Hierarchy

  • ViewportAlgorithmOptions
    • GridOptions

Properties

gridSize? +GridOptions | @googlemaps/js-markerclusterer

Interface GridOptions

interface GridOptions {
    gridSize?: number;
    maxDistance?: number;
    maxZoom?: number;
    viewportPadding?: number;
}

Hierarchy

  • ViewportAlgorithmOptions
    • GridOptions

Properties

gridSize? maxDistance? maxZoom? viewportPadding? -

Properties

Optional gridSize

gridSize?: number

Optional maxDistance

maxDistance?: number

Max distance between cluster center and point in meters.

+

Properties

Optional gridSize

gridSize?: number

Optional maxDistance

maxDistance?: number

Max distance between cluster center and point in meters.

Default

10000
-

Optional maxZoom

maxZoom?: number

Optional viewportPadding

viewportPadding?: number

The number of pixels to extend beyond the viewport bounds when filtering +

Optional maxZoom

maxZoom?: number

Optional viewportPadding

viewportPadding?: number

The number of pixels to extend beyond the viewport bounds when filtering markers prior to clustering.

-

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc

\ No newline at end of file +

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc

\ No newline at end of file diff --git a/interfaces/MarkerClustererOptions.html b/interfaces/MarkerClustererOptions.html index 3f945cd0..fe4dc3b8 100644 --- a/interfaces/MarkerClustererOptions.html +++ b/interfaces/MarkerClustererOptions.html @@ -1,4 +1,4 @@ -MarkerClustererOptions | @googlemaps/js-markerclusterer

Interface MarkerClustererOptions

interface MarkerClustererOptions {
    algorithm?: Algorithm;
    algorithmOptions?: AlgorithmOptions;
    map?: Map;
    markers?: Marker[];
    onClusterClick?: onClusterClickHandler;
    renderer?: Renderer;
}

Properties

algorithm? +MarkerClustererOptions | @googlemaps/js-markerclusterer

Interface MarkerClustererOptions

interface MarkerClustererOptions {
    algorithm?: Algorithm;
    algorithmOptions?: AlgorithmOptions;
    map?: Map;
    markers?: Marker[];
    onClusterClick?: onClusterClickHandler;
    renderer?: Renderer;
}

Properties

algorithm? algorithmOptions? map? markers? @@ -7,6 +7,6 @@

Properties

Optional algorithm

algorithm?: Algorithm

An algorithm to cluster markers. Default is SuperClusterAlgorithm. Must provide a calculate method accepting AlgorithmInput and returning an array of Cluster.

-

Optional algorithmOptions

algorithmOptions?: AlgorithmOptions

Optional map

map?: Map

Optional markers

markers?: Marker[]

Optional onClusterClick

onClusterClick?: onClusterClickHandler

Optional renderer

renderer?: Renderer

An object that converts a Cluster into a google.maps.Marker. +

Optional algorithmOptions

algorithmOptions?: AlgorithmOptions

Optional map

map?: Map

Optional markers

markers?: Marker[]

Optional onClusterClick

onClusterClick?: onClusterClickHandler

Optional renderer

renderer?: Renderer

An object that converts a Cluster into a google.maps.Marker. Default is DefaultRenderer.

-

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc

\ No newline at end of file +

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc

\ No newline at end of file diff --git a/interfaces/Renderer.html b/interfaces/Renderer.html index 563e89e4..75e473f2 100644 --- a/interfaces/Renderer.html +++ b/interfaces/Renderer.html @@ -1,6 +1,6 @@ -Renderer | @googlemaps/js-markerclusterer

Interface Renderer

interface Renderer {
    render(cluster, stats, map): Marker;
}

Implemented by

Methods

render +Renderer | @googlemaps/js-markerclusterer

Interface Renderer

interface Renderer {
    render(cluster, stats, map): Marker;
}

Implemented by

Methods

render

Methods

render

  • render(cluster, stats, map): Marker

  • Turn a Cluster into a Marker.

    Below is a simple example to create a marker with the number of markers in the cluster as a label.

    return new google.maps.Marker({
      position,
      label: String(markers.length),
    });
    -

    Parameters

    Returns Marker

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc

\ No newline at end of file +

Parameters

Returns Marker

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc

\ No newline at end of file diff --git a/interfaces/SuperClusterViewportOptions.html b/interfaces/SuperClusterViewportOptions.html index ae94f8d1..884e1ae6 100644 --- a/interfaces/SuperClusterViewportOptions.html +++ b/interfaces/SuperClusterViewportOptions.html @@ -1,4 +1,4 @@ -SuperClusterViewportOptions | @googlemaps/js-markerclusterer

Interface SuperClusterViewportOptions

interface SuperClusterViewportOptions {
    viewportPadding?: number;
}

Hierarchy (view full)

Properties

viewportPadding? +SuperClusterViewportOptions | @googlemaps/js-markerclusterer

Interface SuperClusterViewportOptions

interface SuperClusterViewportOptions {
    viewportPadding?: number;
}

Hierarchy (view full)

Properties

viewportPadding?

Properties

Optional viewportPadding

viewportPadding?: number

The number of pixels to extend beyond the viewport bounds when filtering markers prior to clustering.

-

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc

\ No newline at end of file +

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc

\ No newline at end of file diff --git a/interfaces/SuperClusterViewportState.html b/interfaces/SuperClusterViewportState.html index 4f1c5d4f..f90ea734 100644 --- a/interfaces/SuperClusterViewportState.html +++ b/interfaces/SuperClusterViewportState.html @@ -1,3 +1,3 @@ -SuperClusterViewportState | @googlemaps/js-markerclusterer

Interface SuperClusterViewportState

interface SuperClusterViewportState {
    view: [number, number, number, number];
    zoom: number;
}

Properties

view +SuperClusterViewportState | @googlemaps/js-markerclusterer

Interface SuperClusterViewportState

interface SuperClusterViewportState {
    view: [number, number, number, number];
    zoom: number;
}

Properties

view zoom -

Properties

view

view: [number, number, number, number]

zoom

zoom: number

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc

\ No newline at end of file +

Properties

view

view: [number, number, number, number]

zoom

zoom: number

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc

\ No newline at end of file diff --git a/types/Marker.html b/types/Marker.html index edca3cc7..4a13dc00 100644 --- a/types/Marker.html +++ b/types/Marker.html @@ -1,2 +1,2 @@ Marker | @googlemaps/js-markerclusterer

Type alias Marker

Marker: google.maps.Marker | google.maps.marker.AdvancedMarkerElement

Supports markers of either either "legacy" or "advanced" types.

-

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file +

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file diff --git a/types/SuperClusterOptions.html b/types/SuperClusterOptions.html index 9e808332..16ee4c02 100644 --- a/types/SuperClusterOptions.html +++ b/types/SuperClusterOptions.html @@ -1 +1 @@ -SuperClusterOptions | @googlemaps/js-markerclusterer

Type alias SuperClusterOptions

SuperClusterOptions: SuperCluster.Options<{
    [name: string]: any;
}, {
    [name: string]: any;
}>

Type declaration

  • [name: string]: any

Type declaration

  • [name: string]: any

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file +SuperClusterOptions | @googlemaps/js-markerclusterer

Type alias SuperClusterOptions

SuperClusterOptions: SuperCluster.Options<{
    [name: string]: any;
}, {
    [name: string]: any;
}>

Type declaration

  • [name: string]: any

Type declaration

  • [name: string]: any

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file diff --git a/types/onClusterClickHandler.html b/types/onClusterClickHandler.html index 76cddd08..458d64b2 100644 --- a/types/onClusterClickHandler.html +++ b/types/onClusterClickHandler.html @@ -1 +1 @@ -onClusterClickHandler | @googlemaps/js-markerclusterer

Type alias onClusterClickHandler

onClusterClickHandler: ((event, cluster, map) => void)

Type declaration

    • (event, cluster, map): void

    • Parameters

      • event: google.maps.MapMouseEvent
      • cluster: Cluster
      • map: google.maps.Map

      Returns void

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file +onClusterClickHandler | @googlemaps/js-markerclusterer

Type alias onClusterClickHandler

onClusterClickHandler: ((event, cluster, map) => void)

Type declaration

    • (event, cluster, map): void

    • Parameters

      • event: google.maps.MapMouseEvent
      • cluster: Cluster
      • map: google.maps.Map

      Returns void

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file