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

added bounds to keep view inside map

Browse Source 
+ changed marker icon to works unified with cluster
This commit is contained in:
lenovo
2022-11-07 18:57:05 +01:00
parent 65ab0c455e
commit cfc747bad3
12 changed files with 243 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
srcs/plugins/map_prof/scripts/mp_create_markers.js
View File

@@ -5,26 +5,55 @@ function create_markers(map, locations, infowindow) {
* - let icon_color = ""
* - let icon_color_back = ""
* - let icon_size = [x, y]
* - let cluster_size_factor = Number
* - let icon_stroke_width = Number
*/
let svg_icon = window.btoa(`
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<circle cx="50%" cy="50%" r="27%" stroke="${icon_color}" stroke-width="26" fill="${icon_color_back}" />
<polygon points="35,80 65,80 50,100" fill="${icon_color}" />
</svg>
`);
let icon_options = {
url: `data:image/svg+xml;base64,${svg_icon}`,
scaledSize: new google.maps.Size(icon_size[0], icon_size[1]),
};
let icon_circle_radius = 40 - icon_stroke_width / 2;
// let svg_icon = window.btoa(`
// <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
// <circle cx="50%" cy="50%" r="27%" stroke="${icon_color}" stroke-width="26" fill="${icon_color_back}" />
// <polygon points="35,80 65,80 50,100" fill="${icon_color}" />
// </svg>
// `);
let markers = [];
for (loc of locations) {
let count = loc.events.length;
let marker_icon_size = [
icon_size[0] + ( icon_size_factor * (count - 2) ),
icon_size[1] + ( icon_size_factor * (count - 2) )
];
let svg_icon = 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 icon_options = {
url: `data:image/svg+xml;base64,${svg_icon}`,
scaledSize: new google.maps.Size(marker_icon_size[0], marker_icon_size[1]),
};
let marker_label = {
text: String(count),
color: icon_color,
fontSize: "12px",
fontWeight: "bold",
};
let marker_title = `address of ${count} events`;
let marker = new google.maps.Marker({
position: loc.coordinates,
map: map,
icon: icon_options,
title: marker_title,
label: marker_label,
});
// // hide label if "1" (you must comment the label option in marker)
// if (count > 1)
// marker.setLabel(marker_label);
attach_info_window(map, marker, loc.events, infowindow);

19
srcs/plugins/map_prof/scripts/mp_draw_clusters.js
View File

@@ -5,30 +5,33 @@ function draw_clusters(map, markers) {
* - let icon_color = ""
* - let icon_color_back = ""
* - let icon_size = [x, y]
* - let cluster_size_factor = Number
* - 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 cluster_icon_size = [
icon_size[0] + ( cluster_size_factor * (count - 2) ),
icon_size[1] + ( cluster_size_factor * (count - 2) )
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="${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 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(cluster_icon_size[0], cluster_icon_size[1]),
scaledSize: new google.maps.Size(marker_icon_size[0], marker_icon_size[1]),
};
let cluster_label = {
text: String(count),
color: "#ba197a",
color: icon_color,
fontSize: "12px",
fontWeight: "bold",
};

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

@@ -5,15 +5,51 @@ function attach_info_window(map, marker, events, infowindow) {
* https://stackoverflow.com/questions/11106671/google-maps-api-multiple-markers-with-infowindows
*/
let window_content = '<div id="info_window">';
for (key in events) {
if (key > 0)
window_content += `<hr />`;
let presence = "en ligne";
if (events[key].irl)
presence = "en presentiel";
window_content += `
<p>
${events[key].title}
</p>
<p>
${presence}
</p>
`;
};
window_content += '</div>';
marker.addListener('click', () => {
let view_center = map.getCenter();
let marker_position = marker.getPosition();
console.log("marker position: " + marker_position);
let window_position = view_center;
infowindow.setOptions({
disableAutoPan: true,
//position: center_position,
//disableAutoPan: true,
disableAutoPan: false,
content: window_content,
/* dimensions */
//maxWidth: 400,
//minWidth: 400,
/* center window */
position: window_position,
/* center window */
//position: (map.getCenter()),
//pixelOffset: { width: 50, height: 50 },
//shouldFocus: false,
});
infowindow.setPosition(map.getCenter());
infowindow.setContent("test");
infowindow.open(map);
});

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

@@ -21,19 +21,29 @@ function mp_init_map() {
// default map center to france
let map_center = coordinates_default;
let world_bound = {
north: 80,
south: -80,
west: -180,
east: 180,
};
let map_options = {
/* map options : https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions */
disableDefaultUI: true,
zoomControl: true,
scaleControl: true,
zoom: 2,
//gestureHandling: "cooperative",
gestureHandling: "cooperative",
//gestureHandling: "greedy",
//gestureHandling: "none",
//gestureHandling: "auto",
//disableDoubleClickZoom: "false", //deprecated
//draggable: "true", //deprecated
center: map_center,
restriction: {
latLngBounds: world_bound,
strictBounds: true,
},
}
let map_div = document.getElementById("ljdp_map");
let infowindow = new google.maps.InfoWindow();