pro/2023_WEBSITE_jipf
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

infowindow centered

Browse Source
This commit is contained in:
lenovo
2022-11-06 20:57:55 +01:00
parent 767aa3eff7
commit 65ab0c455e
4 changed files with 63 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
srcs/plugins/map_prof/scripts/mp_draw_clusters.js Normal file
View File

@@ -0,0 +1,49 @@
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 cluster_size_factor = Number
*/
let renderer = {
render({ count, position }, stats) {
/* CLUSTERS SETTINGS */
let cluster_icon_size = [
icon_size[0] + ( cluster_size_factor * (count - 2) ),
icon_size[1] + ( cluster_size_factor * (count - 2) )
];
let cluster_svg = window.btoa(`
<svg xmlns="http://www.w3.org/2000/svg" width="${cluster_icon_size[0]}" height="${cluster_icon_size[1]}">
<circle cx="50%" cy="50%" r="37%" stroke="${icon_color}" stroke-width="6" fill="${icon_color_back}" />
</svg>
`);
let cluster_icon = {
url: `data:image/svg+xml;base64,${cluster_svg}`,
scaledSize: new google.maps.Size(cluster_icon_size[0], cluster_icon_size[1]),
};
let cluster_label = {
text: String(count),
color: "#ba197a",
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,
});
}
}
new markerClusterer.MarkerClusterer({ map, markers, renderer });
}

9
srcs/plugins/map_prof/scripts/mp_info_window.js
View File

@@ -6,8 +6,15 @@ function attach_info_window(map, marker, events, infowindow) {
*/
marker.addListener('click', () => {
infowindow.setOptions({
disableAutoPan: true,
//position: center_position,
//pixelOffset: { width: 50, height: 50 },
//shouldFocus: false,
});
infowindow.setPosition(map.getCenter());
infowindow.setContent("test");
infowindow.open(map, marker);
infowindow.open(map);
});
}

52
srcs/plugins/map_prof/scripts/mp_init_map.js
View File

@@ -16,10 +16,6 @@ function mp_init_map() {
* - let cluster_size_factor = Number
*/
/*
* SETTINGS
*/
console.log("locations:");
console.log(locations);
@@ -42,8 +38,6 @@ function mp_init_map() {
let map_div = document.getElementById("ljdp_map");
let infowindow = new google.maps.InfoWindow();
/*
* DRAW MAP
*/
@@ -51,46 +45,10 @@ function mp_init_map() {
let map = new google.maps.Map(map_div, map_options);
let markers = create_markers(map, locations, infowindow);
/*
* DRAW CLUSTERS
*/
// add listener to close infowindow at any click on map
map.addListener('click', function() {
infowindow.close();
});
let renderer = {
render({ count, position }, stats) {
/* CLUSTERS SETTINGS */
let cluster_icon_size = [
icon_size[0] + ( cluster_size_factor * (count - 2) ),
icon_size[1] + ( cluster_size_factor * (count - 2) )
];
let cluster_svg = window.btoa(`
<svg xmlns="http://www.w3.org/2000/svg" width="${cluster_icon_size[0]}" height="${cluster_icon_size[1]}">
<circle cx="50%" cy="50%" r="37%" stroke="${icon_color}" stroke-width="6" fill="${icon_color_back}" />
</svg>
`);
let cluster_icon = {
url: `data:image/svg+xml;base64,${cluster_svg}`,
scaledSize: new google.maps.Size(cluster_icon_size[0], cluster_icon_size[1]),
};
let cluster_label = {
text: String(count),
color: "#ba197a",
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,
});
}
}
new markerClusterer.MarkerClusterer({ map, markers, renderer });
draw_clusters(map, markers);
}