ionic-team / ionic-team/capacitor-google-maps
feat(markerClusterer): change style
- 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
Assessment
This issue has not been assessed yet.