59 lines
1.6 KiB
JavaScript
59 lines
1.6 KiB
JavaScript
function draw_clusters(map, markers) {
|
|
|
|
/*
|
|
* following variable are created by mp_add_to_script.php
|
|
* - let icon_color = ""
|
|
* - let icon_color_back = ""
|
|
* - let icon_size = [x, y]
|
|
* - let icon_size_factor = Number
|
|
* - let icon_stroke_width = Number
|
|
*/
|
|
|
|
let icon_circle_radius = 40 - icon_stroke_width / 2;
|
|
|
|
let renderer = {
|
|
render({ count, position }, stats) {
|
|
|
|
/* CLUSTERS SETTINGS */
|
|
|
|
let marker_icon_size = [
|
|
icon_size[0] + ( icon_size_factor * (count - 2) ),
|
|
icon_size[1] + ( icon_size_factor * (count - 2) )
|
|
];
|
|
let cluster_svg = window.btoa(`
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="${marker_icon_size[0]}" height="${marker_icon_size[1]}">
|
|
<circle cx="50%" cy="50%" r="${icon_circle_radius}%" stroke="${icon_color}" stroke-width="${icon_stroke_width}" fill="${icon_color_back}" />
|
|
</svg>
|
|
`);
|
|
let cluster_icon = {
|
|
url: `data:image/svg+xml;base64,${cluster_svg}`,
|
|
scaledSize: new google.maps.Size(marker_icon_size[0], marker_icon_size[1]),
|
|
};
|
|
let cluster_label = {
|
|
text: String(count),
|
|
color: icon_color,
|
|
fontSize: "12px",
|
|
fontWeight: "bold",
|
|
};
|
|
let cluster_title = `Cluster of ${count} markers`;
|
|
let cluster_zIndex = Number(google.maps.Marker.MAX_ZINDEX) + count;
|
|
|
|
return new google.maps.Marker({
|
|
position,
|
|
icon: cluster_icon,
|
|
label: cluster_label,
|
|
title: cluster_title,
|
|
zIndex: cluster_zIndex,
|
|
});
|
|
}
|
|
}
|
|
|
|
let onClusterClick = (_, cluster, map) => {
|
|
restrict_map(false);
|
|
map.fitBounds(cluster.bounds);
|
|
restrict_map(true);
|
|
};
|
|
|
|
return new markerClusterer.MarkerClusterer({ map, markers, renderer, onClusterClick });
|
|
}
|