Skip to content

Commit

Permalink
feat(google-maps): switch to non-deprecated API for clustering
Browse files Browse the repository at this point in the history
The marker clusterer component is currently based on the `@googlemaps/markerclustererplus` package which is deprecated. These changes rewrite the component to use `@googlemaps/markerclusterer` instead.

BREAKING CHANGES:
The new clustering package doesn't offer the same set of public APIs. As a result, the following inputs to the `MapMarkerClusterer` component have been removed:
* `ariaLabelFn`
* `averageCenter`
* `batchSizeIE`
* `calculator`
* `clusterClass`
* `enableRetinaIcons`
* `gridSize`
* `ignoreHidden`
* `imageExtension`
* `imagePath`
* `imageSizes`
* `maxZoom`
* `minimumClusterSize`
* `styles`
* `title`
* `zIndex`
* `zoomOnClick`
* `options`
The new recommended way of customizing the cluster is to use the `renderer` and `algorithm` inputs.

Fixes angular#23695.
  • Loading branch information
crisbeto committed Apr 29, 2022
1 parent fb4e395 commit 8de478e
Show file tree
Hide file tree
Showing 9 changed files with 326 additions and 901 deletions.
2 changes: 1 addition & 1 deletion src/dev-app/google-map/google-map-demo.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
(mapMousemove)="handleMove($event)"
(mapRightclick)="handleRightclick()"
[mapTypeId]="mapTypeId">
<map-marker-clusterer [imagePath]="markerClustererImagePath">
<map-marker-clusterer>
<map-marker #firstMarker="mapMarker"
[position]="center"
(mapClick)="clickMarker(firstMarker)"></map-marker>
Expand Down
3 changes: 0 additions & 3 deletions src/dev-app/google-map/google-map-demo.ts
Original file line number Diff line number Diff line change
Expand Up @@ -119,9 +119,6 @@ export class GoogleMapDemo {
google.maps.MapTypeId.TERRAIN,
];

markerClustererImagePath =
'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m';

directionsResult?: google.maps.DirectionsResult;

constructor(private readonly _mapDirectionsService: MapDirectionsService) {}
Expand Down
2 changes: 1 addition & 1 deletion src/dev-app/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@

<script src="zone.js/dist/zone.js"></script>
<script src="https://www.youtube.com/iframe_api"></script>
<script src="https://unpkg.com/@googlemaps/markerclustererplus/dist/index.min.js"></script>
<script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>
<script>
(function loadGoogleMaps() {
// Key can be set through the `GOOGLE_MAPS_KEY` environment variable.
Expand Down
12 changes: 5 additions & 7 deletions src/google-maps/map-marker-clusterer/README.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
#MapMarkerClusterer
# MapMarkerClusterer

The `MapMarkerClusterer` component wraps the [`MarkerClusterer` class](https://googlemaps.github.io/js-markerclustererplus/classes/markerclusterer.html) from the [Google Maps JavaScript MarkerClustererPlus Library](https://github.com/googlemaps/js-markerclustererplus). The `MapMarkerClusterer` component displays a cluster of markers that are children of the `<map-marker-clusterer>` tag. Unlike the other Google Maps components, MapMarkerClusterer does not have an `options` input, so any input (listed in the [documentation](https://googlemaps.github.io/js-markerclustererplus/index.html) for the `MarkerClusterer` class) should be set directly.
The `MapMarkerClusterer` component wraps the [`MarkerClusterer` class](https://googlemaps.github.io/js-markerclusterer/classes/MarkerClusterer.html) from the [Google Maps JavaScript MarkerClusterer Library](https://github.com/googlemaps/js-markerclusterer). The `MapMarkerClusterer` component displays a cluster of markers that are children of the `<map-marker-clusterer>` tag. Unlike the other Google Maps components, MapMarkerClusterer does not have an `options` input, so any input (listed in the [documentation](https://googlemaps.github.io/js-markerclusterer/) for the `MarkerClusterer` class) should be set directly.

## Loading the Library

Like the Google Maps JavaScript API, the MarkerClustererPlus library needs to be loaded separately. This can be accomplished by using this script tag:
Like the Google Maps JavaScript API, the MarkerClusterer library needs to be loaded separately. This can be accomplished by using this script tag:

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

Additional information can be found by looking at [Marker Clustering](https://developers.google.com/maps/documentation/javascript/marker-clustering) in the Google Maps JavaScript API documentation.
Expand All @@ -26,8 +26,6 @@ export class GoogleMapDemo {
center: google.maps.LatLngLiteral = {lat: 24, lng: 12};
zoom = 4;
markerPositions: google.maps.LatLngLiteral[] = [];
markerClustererImagePath =
'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m';

addMarker(event: google.maps.MapMouseEvent) {
this.markerPositions.push(event.latLng.toJSON());
Expand All @@ -42,7 +40,7 @@ export class GoogleMapDemo {
[center]="center"
[zoom]="zoom"
(mapClick)="addMarker($event)">
<map-marker-clusterer [imagePath]="markerClustererImagePath">
<map-marker-clusterer>
<map-marker *ngFor="let markerPosition of markerPositions"
[position]="markerPosition"></map-marker>
</map-marker-clusterer>
Expand Down
Loading

0 comments on commit 8de478e

Please sign in to comment.