Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(defaultRenderer): enable color change #871

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat(defaultRenderer): enable color change #871

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 13 additions & 3 deletions src/renderer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,8 +75,8 @@ export class DefaultRenderer implements Renderer {
* // change color if this cluster has more markers than the mean cluster
* const color =
* count > Math.max(10, stats.clusters.markers.mean)
* ? "#ff0000"
* : "#0000ff";
* ? this.overMeanColor // "#ff0000"
* : this.underMeanColor; // "#ff0000"
*
* // create svg url with fill color
* const svg = window.btoa(`
Expand Down Expand Up @@ -104,14 +104,24 @@ export class DefaultRenderer implements Renderer {
* });
* ```
*/
underMeanColor: string
overMeanColor: string

constructor(underMeanColor = "#0000ff", overMeanColor = "#ff0000") {
super()

this.underMeanColor = underMeanColor
this.overMeanColor = overMeanColor
}

public render(
{ count, position }: Cluster,
stats: ClusterStats,
map: google.maps.Map
): Marker {
// change color if this cluster has more markers than the mean cluster
const color =
count > Math.max(10, stats.clusters.markers.mean) ? "#ff0000" : "#0000ff";
count > Math.max(10, stats.clusters.markers.mean) ? this.overMeanColor : this.underMeanColor;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
count > Math.max(10, stats.clusters.markers.mean) ? this.overMeanColor : this.underMeanColor;
count > Math.max(10, stats.clusters.markers.mean) ? var(--over-mean) : var(--under-mean);

Wondering if it would be easier to just change the hex values to css variables.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@behunin they didn't accept my original pull request, not sure what to do to make them look at this issue :/

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jpoehnelt Could you poke whomever google has assigned to this product right now? How can we get some traction here?


// create svg literal with fill color
const svg = `<svg fill="${color}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" width="50" height="50">
Expand Down