Generated using TypeDoc
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,
});
diff --git a/classes/GridAlgorithm.html b/classes/GridAlgorithm.html
index dacc4a51..ace0b3ef 100644
--- a/classes/GridAlgorithm.html
+++ b/classes/GridAlgorithm.html
@@ -3,7 +3,7 @@
clustering.
The Grid algorithm does not implement caching and markers may flash as the viewport changes. Instead use SuperClusterAlgorithm.
-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, map})
}
}
diff --git a/classes/MarkerClusterer.html b/classes/MarkerClusterer.html
index 52eb7c53..81cc96ab 100644
--- a/classes/MarkerClusterer.html
+++ b/classes/MarkerClusterer.html
@@ -1,11 +1,11 @@
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
Index
Constructors
constructor
Parameters
__namedParameters: MarkerClustererOptions
Returns MarkerClusterer
Properties
Protected algorithm
Protected clusters
Protected idle
Protected map
Protected markers
on
Protected renderer
Methods
add
Parameters
marker: Marker
Optional noDraw: boolean
Returns void
add
Parameters
markers: Marker[]
Optional noDraw: boolean
Returns void
clear
Parameters
Optional noDraw: boolean
Returns void
on
Returns void
on
Returns void
remove
Parameters
marker: Marker
Optional noDraw: boolean
Returns boolean
remove
Parameters
markers: Marker[]
Optional noDraw: boolean
Returns boolean
render
-
+
Hierarchy
- OverlayViewSafe
- MarkerClusterer
Index
Constructors
constructor
Parameters
__namedParameters: MarkerClustererOptions
Returns MarkerClusterer
Properties
Protected algorithm
Protected clusters
Protected idle
Protected map
Protected markers
on
Protected renderer
Methods
add
Parameters
marker: Marker
Optional noDraw: boolean
Returns void
add
Parameters
markers: Marker[]
Optional noDraw: boolean
Returns void
clear
Parameters
Optional noDraw: boolean
Returns void
on
Returns void
on
Returns void
remove
Parameters
marker: Marker
Optional noDraw: boolean
Returns boolean
remove
Parameters
markers: Marker[]
Optional noDraw: boolean
Returns boolean
render
-
Recalculates and draws all the marker clusters.
-Returns void
Protected render
Returns void
Protected reset
Returns void
Generated using TypeDoc
\ No newline at end of file
+Generated using TypeDoc
Noop algorithm does not generate any clusters or filter markers by the an extended viewport.
-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, map})
}
}
diff --git a/classes/SuperClusterAlgorithm.html b/classes/SuperClusterAlgorithm.html
index 63e633de..486220bc 100644
--- a/classes/SuperClusterAlgorithm.html
+++ b/classes/SuperClusterAlgorithm.html
@@ -1,9 +1,9 @@
SuperClusterAlgorithm | @googlemaps/js-markerclusterer Class SuperClusterAlgorithm
A very fast JavaScript algorithm for geospatial point clustering using KD trees.
Hierarchy
- AbstractAlgorithm
- SuperClusterAlgorithm
Index
Constructors
Properties
Methods
Constructors
constructor
Parameters
__namedParameters: SuperClusterOptions
Returns SuperClusterAlgorithm
Properties
Protected clusters
Protected markers
Protected max
Protected state
Type declaration
zoom: number
Protected super
Methods
calculate
Parameters
input: AlgorithmInput
Returns AlgorithmOutput
cluster
Parameters
__namedParameters: AlgorithmInput
Returns Cluster[]
Protected noop
-
+
Hierarchy
- AbstractAlgorithm
- SuperClusterAlgorithm
Index
Constructors
Properties
Methods
Constructors
constructor
Parameters
__namedParameters: SuperClusterOptions
Returns SuperClusterAlgorithm
Properties
Protected clusters
Protected markers
Protected max
Protected state
Type declaration
zoom: number
Protected super
Methods
calculate
Parameters
input: AlgorithmInput
Returns AlgorithmOutput
cluster
Parameters
__namedParameters: AlgorithmInput
Returns Cluster[]
Protected noop
-
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, map})
}
}
-Parameters
__namedParameters: AlgorithmInput
Returns Cluster[]
Protected transform
Parameters
__namedParameters: ClusterFeature<{ marker: Marker }>
Returns Cluster
Generated using TypeDoc
\ No newline at end of file
+Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Calculates an array of Cluster.
Generated using TypeDoc
The map containing the markers and clusters.
-The mapCanvasProjection enables easy conversion from lat/lng to pixel.
An array of markers to be clustered.
There are some specific edge cases to be aware of including the following:
Generated using TypeDoc
Generated using TypeDoc
A boolean flag indicating that the clusters have not changed.
-The clusters returned based upon the AlgorithmInput.
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
Generated using TypeDoc
An algorithm to cluster markers. Default is SuperClusterAlgorithm. Must
provide a calculate method accepting AlgorithmInput and returning
an array of Cluster.
An object that converts a Cluster into a google.maps.Marker.
Default is DefaultRenderer.
Generated using TypeDoc
Turn a Cluster into a google.maps.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),
});
diff --git a/modules.html b/modules.html
index 9a1a0289..c9bee063 100644
--- a/modules.html
+++ b/modules.html
@@ -1,6 +1,6 @@
-@googlemaps/js-markerclusterer @googlemaps/js-markerclusterer
Index
Enumerations
Classes
Interfaces
Type aliases
Functions
Type aliases
Super
on
Type declaration
Parameters
event: google.maps.MapMouseEvent
cluster: Cluster
map: google.maps.Map
Returns void
Functions
default
Parameters
event: MapMouseEvent
cluster: Cluster
map: Map
Returns void
extend
-
+
@googlemaps/js-markerclusterer @googlemaps/js-markerclusterer
Index
Enumerations
Classes
Interfaces
Type aliases
Functions
Type aliases
Super
on
Type declaration
Parameters
event: google.maps.MapMouseEvent
cluster: Cluster
map: google.maps.Map
Returns void
Functions
default
Parameters
event: MapMouseEvent
cluster: Cluster
map: Map
Returns void
extend
-
Extends a bounds by a number of pixels in each direction.
-Parameters
bounds: LatLngBounds
projection: MapCanvasProjection
pixels: number
Returns LatLngBounds
filter
-
+
Parameters
bounds: LatLngBounds
projection: MapCanvasProjection
pixels: number
Returns LatLngBounds
filter
-
Copyright 2021 Google LLC
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
- Preparing search index...
- The search index is not available
@googlemaps/js-markerclustererClass Cluster
Hierarchy
Index
Constructors
Properties
Accessors
Methods
Constructors
constructor
Parameters
__namedParameters: ClusterOptions
Returns Cluster
Properties
Protected _position
marker
Optional Readonly markers
Accessors
bounds
Returns LatLngBounds
count
Get the count of visible markers.
-Returns number
position
Returns LatLng
Methods
delete
Returns number
position
Returns LatLng
Methods
delete
Cleanup references and remove marker from map.
-Returns void
push
Returns void
push
Add a marker to the cluster.
Parameters
marker: Marker
Returns void
Generated using TypeDoc
- Preparing search index...
- The search index is not available
@googlemaps/js-markerclustererClass ClusterStats
Provides statistics on all clusters in the current render cycle for use in Renderer.render.
-Hierarchy
Index
Constructors
Properties
Constructors
constructor
Parameters
markers: Marker[]
clusters: Cluster[]
Returns ClusterStats
Properties
Readonly clusters
Type declaration
count: number
markers: { max: number; mean: number; min: number; sum: number }
max: number
mean: number
min: number
sum: number
Readonly markers
Type declaration
sum: number
Generated using TypeDoc