Skip to content

Commit

Permalink
fix(renderer): fix marker position (#667)
Browse files Browse the repository at this point in the history
  • Loading branch information
vicb authored Jun 6, 2023
1 parent 248b081 commit fbb8fa8
Showing 1 changed file with 11 additions and 31 deletions.
42 changes: 11 additions & 31 deletions src/renderer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -113,12 +113,13 @@ export class DefaultRenderer implements Renderer {
const color =
count > Math.max(10, stats.clusters.markers.mean) ? "#ff0000" : "#0000ff";

// create svg url with fill color
const svg = `<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" />
</svg>`;
// 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">
<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" />
<text x="50%" y="50%" style="fill:#fff" text-anchor="middle" font-size="50" dominant-baseline="middle" font-family="roboto,arial,sans-serif">${count}</text>
</svg>`;

const title = `Cluster of ${count} markers`,
// adjust zIndex to be above other markers
Expand All @@ -128,33 +129,17 @@ export class DefaultRenderer implements Renderer {
google.maps.marker &&
map.getMapCapabilities().isAdvancedMarkersAvailable
) {
// create cluster SVG element
const div = document.createElement("div");
div.innerHTML = svg;
const svgEl = div.firstElementChild;
svgEl.setAttribute("width", "50");
svgEl.setAttribute("height", "50");

// create and append marker label to SVG
const label = document.createElementNS(
"http://www.w3.org/2000/svg",
"text"
);
label.setAttribute("x", "50%");
label.setAttribute("y", "50%");
label.setAttribute("style", "fill: #FFF");
label.setAttribute("text-anchor", "middle");
label.setAttribute("font-size", "50");
label.setAttribute("dominant-baseline", "middle");
label.appendChild(document.createTextNode(`${count}`));
svgEl.appendChild(label);
svgEl.setAttribute("transform", "translate(0 25)");

const clusterOptions: google.maps.marker.AdvancedMarkerElementOptions = {
map,
position,
zIndex,
title,
content: div.firstElementChild,
content: svgEl,
};
return new google.maps.marker.AdvancedMarkerElement(clusterOptions);
}
Expand All @@ -164,13 +149,8 @@ export class DefaultRenderer implements Renderer {
zIndex,
title,
icon: {
url: `data:image/svg+xml;base64,${window.btoa(svg)}`,
scaledSize: new google.maps.Size(45, 45),
},
label: {
text: String(count),
color: "rgba(255,255,255,0.9)",
fontSize: "12px",
url: `data:image/svg+xml;base64,${btoa(svg)}`,
anchor: new google.maps.Point(25, 25),
},
};
return new google.maps.Marker(clusterOptions);
Expand Down

0 comments on commit fbb8fa8

Please sign in to comment.