cluster markers works

+ they are personalizable
+ cluster icon grow without getting fat
+ js function for errors
+ scripts dont enqueue on all pages
+ php array of event function more light without coordinates
- coordinates not yet retrieved by js

srcs/plugins/map_prof/scripts/mp_errors_map.js

@@ -0,0 +1,7 @@
+function print_error(error) {
+	let div_map = document.getElementById("ljdp_map");
+	let p_err = document.createElement('p');
+
+	p_err.textContent = error;
+	div_map.after(p_err);
+}

srcs/plugins/map_prof/scripts/mp_init_map.js

@@ -1,61 +1,114 @@
 function mp_init_map() {
 
 	/*
-	 * following variable are created by mp_locations.php
-	 * - let locations = [{lat:xxx, lng:xxx}, {}...]
-	 * - let icon_url
-	 * - let icon_size[x, y]
+	 * following variable are created by mp_add_to_script.php
+	 * - let events = [{}, {}...]
+	 * - let icon_url = ""
+	 * - let icon_cluster_url = ""
+	 * - let icon_color = ""
+	 * - let icon_size = [x, y]
 	 */
 
+	/*
+	 * SETTINGS
+	 */
+
+	//print_error("error");
+	console.log("hello");
+
 	// default map center to france
 	let map_center = {lat:46.227638, lng:2.213749};
-	if (locations.length > 0)
-		map_center = locations[0];
+	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: "greedy",
+		//gestureHandling: "none",
+		//gestureHandling: "auto",
+		//disableDoubleClickZoom: "false",	//deprecated
+		//draggable: "true",				//deprecated
+		center: map_center,
+	}
 
-	let map = new google.maps.Map(
-		document.getElementById("ljdp_map"),
-		{
-			// mpa options : https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions
-
-			// maps controls :
-			disableDefaultUI: true,
-			zoomControl: true,
-			scaleControl: true,
-
-			// other controls :
-			zoom: 5,
-			//gestureHandling: "cooperative",
-			//gestureHandling: "greedy",
-			gestureHandling: "none",
-			//gestureHandling: "auto",
-			//disableDoubleClickZoom: "false",
-			//draggable: "true",
-			center: map_center,
-		}
-	);
-	//map.addListener("zoom_changed", () => {
-	//	// do nothing ?
-	//});
-	let marker, icon, label;
-	icon = {
-		url: icon_url,
+	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="#ba197a" stroke-width="26" fill="#ffffff80" />
+			<polygon points="35,80 65,80 50,100" fill="#ba197a" />
+		</svg>
+	`);
+	let icon_options = {
+		url: `data:image/svg+xml;base64,${svg_icon}`,
 		scaledSize: new google.maps.Size(icon_size[0], icon_size[1]),
 	};
-	label = {
-//		text: String(count),
-		text: "hello",
-//		color: icon_label_color,
+	let label_options = {
+		//text: String(count),
+		text: "?",
+		//color: icon_label_color,
 		fontSize: "12px",
 	};
+
+
+
+	/*
+	 * DRAW MAP
+	 */
+
+	let map = new google.maps.Map(document.getElementById("ljdp_map"), map_options);
 	let markers = [];
-	for (loc of locations) {
+	for (ev of events) {
 		marker = new google.maps.Marker({
-			position: loc,
+			position: ev.coordinates,
 			map: map,
-			icon: icon,
-	//		label: label,
+			icon: icon_options,
+			//label: label_options,
 		});
 		markers.push(marker);
 	};
-	new markerClusterer.MarkerClusterer({ map, markers });
+
+
+	/*
+	 * DRAW CLUSTERS
+	 */
+
+	let renderer = {
+		render({ count, position }, stats) {
+
+			/* CLUSTERS SETTINGS */
+
+			let cluster_icon_size = [
+				icon_size[0] + ( 2.5 * (count - 2) ),
+				icon_size[1] + ( 2.5 * (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="#ba197a" stroke-width="6" fill="#ffffff80" />
+				</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 });
 }