ionic-team / ionic-team/capacitor-google-maps

feat(markerClusterer): change style

Open
#6 0 comments 3 reactions 0 assignees View on GitHub
triage
Dominant language
TypeScript
Stars
32
Forks
47
PR merge metrics
No merged PRs in 30d

Description

## Feature Request

### Plugin
- capacitor-google-maps

### Description
Being able to change the style of marker clusterer

### Preferred Solution
Being able to change the `render` class while enabling the clustering.

`googleMap.enableClustering(5, customRenderer)`

Then anyone could fiddle with it by passing a custom renderer

```typescript
// Example
import { Cluster, ClusterStats, DefaultRenderer, Marker } from '@googlemaps/markerclusterer';

export class CustomRenderer extends DefaultRenderer {

constructor() {
super()
}

render({ count, position }: Cluster, stats: ClusterStats, map: google.maps.Map): Marker {
const color =
count > Math.max(10, stats.clusters.markers.mean)
? "#ff0000" // <-- Change the color here
: "#0000ff";

// create svg url with fill color
const svg = window.btoa(`
`);

// 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,
});
}
}
````
### Alternatives
We could instantiate a `CustomRenderer` object and be able to change the style & logic of it from other methods.

### Additional Context
- [How to](https://stackoverflow.com/a/76330329/11135174)
- Angular did [found a solution](https://github.com/angular/components/blob/main/src/google-maps/map-marker-clusterer/map-marker-clusterer.ts#L151) to make us being able to change the style.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.