added bounds to keep view inside map

+ changed marker icon to works unified with cluster

README.md

@@ -1,6 +1,25 @@
 
 # MAP
 
+questions:
+- liens vers les pages
+
+questions traitees:
+- bound la carte limite pour ne pas voir la zone grise
+- quelles infos on mets dans les infowindow
+	- adresse en haut (surtout pour les markers avec plusieurs evenements)
+- filtres: au dessus de la carte
+- zoom : on reste avec le fonctionnement par defaut
+	- est-ce qu'on peut changer la phrase "ctrl + scroll" pour un truc en francais ?
+- comment gerer les mauvaises adresses
+	- verifier la maniere dont je les recuperes, tous les posts devraient avoir un pays
+- comportement des infowindows
+	- centrees, c nickel
+- markers avec plusieurs evenements a la meme adresse
+	- utiliser uniquement les markers qui servent actuellement pour les clusters
+	- quand c'est un cluster, on zoom,
+	- quand c'est plusieurs evenements au meme endroit, on les affiche
+
 todo:
 - add info-window
 - add filter options

srcs/plugins/map_prof/map_prof_hooks.php

@@ -50,9 +50,9 @@ $mp_icon_color = "#ba197a";
 if (isset($mp_settings_icon_color))
 	$mp_icon_color = $mp_settings_icon_color;
 
-$mp_cluster_size_factor = 2.5;
+$mp_icon_size_factor = 2.5;
-if (isset($mp_settings_cluster_size_factor))
+if (isset($mp_settings_icon_size_factor))
-	$mp_cluster_size_factor = $mp_settings_cluster_size_factor;
+	$mp_icon_size_factor = $mp_settings_icon_size_factor;
 
 $mp_coordinates_default = (object)["lat" => 46.227638, "lng" => 2.213749]; // france
 if (isset($mp_settings_coordinates_default))
@@ -65,6 +65,9 @@ if (isset($mp_settings_icon_color))
 if (isset($mp_settings_icon_color_back))
 	$mp_icon_color_back = $mp_settings_icon_color_back;
 
+$mp_icon_stroke_width = 6;
+if (isset($mp_settings_icon_stroke_width))
+	$mp_icon_stroke_width = $mp_settings_icon_stroke_width;
 
 
 /**
@@ -92,7 +95,10 @@ function mp_add_div() {
 	// https://developers.google.com/maps/documentation/javascript/marker-clustering
 	$marker_clusterer = "https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js";
 
-	wp_enqueue_style( 'mp_style',				plugins_url('styles/mp_style.css', __FILE__),			'',						'',	false);
+	wp_enqueue_style('mp_style',				plugins_url('styles/mp_style.css', __FILE__),			'',						'',	false);
+	wp_enqueue_style('mp_style_info_windows',	plugins_url('styles/mp_info_windows.css', __FILE__),	'',						'',	false);
+	wp_enqueue_style('mp_style_zoom',			plugins_url('styles/mp_zoom.css', __FILE__),			'',						'',	false);
+
 	wp_enqueue_script('mp_info_window',			plugins_url('scripts/mp_info_window.js', __FILE__),		'',						'',	false);
 	wp_enqueue_script('mp_create_markers',		plugins_url('scripts/mp_create_markers.js', __FILE__),	'',						'',	false);
 	wp_enqueue_script('mp_draw_clusters',		plugins_url('scripts/mp_draw_clusters.js', __FILE__),	'',						'',	false);
@@ -100,9 +106,28 @@ function mp_add_div() {
 	wp_enqueue_script('mp_init_map',			plugins_url('scripts/mp_init_map.js', __FILE__),		['mp_marker_clusterer'],'',	true);
 	wp_enqueue_script('mp_google_api',			mp_url_api(),											['mp_init_map'],		'',	true);
 
-	mp_add_to_scripts();
+	/*
+		pays
+		ville
+		categorie
+	*/
+	$pays = array();
+	mp_add_to_scripts($pays);
 
-	$mp_api_script  = '<div id="ljdp_map"></div>';
+	$mp_api_script  = '
+		<div id="ljdp_map_wrapper">
+			<div id="ljdp_map"></div>
+			<div id="ljdp_map_filters">
+	';
+	foreach ($pays as $loc) {
+		$mp_api_script .= '<p>';
+		$mp_api_script .= $loc;
+		$mp_api_script .= '</p>';
+	}
+	$mp_api_script .= '
+			</div>
+		</div>
+	';
 
 	return $mp_api_script;
 }

srcs/plugins/map_prof/mp_add_to_scripts.php

@@ -10,13 +10,14 @@ function mp_php_to_js($php_var, $js_var_name) {
 	return $js_var;
 }
 
-function mp_add_to_scripts() {
+function mp_add_to_scripts(&$pays) {
 	global $mp_icon_size;
 	global $mp_icon_color;
 	global $mp_icon_color_back;
-	global $mp_cluster_size_factor;
+	global $mp_icon_size_factor;
 	global $mp_coordinates_default;
-	$events = mp_get_published_events();
+	global $mp_icon_stroke_width;
+	$events = mp_get_published_events($pays);
 	$locations = mp_sort_events($events);
 
 	//wp_add_inline_script('mp_init_map', mp_php_to_js($events, 'events'), 'before');
@@ -24,8 +25,9 @@ function mp_add_to_scripts() {
 	wp_add_inline_script('mp_init_map', mp_php_to_js($mp_icon_size, 'icon_size'), 'before');
 	wp_add_inline_script('mp_init_map', mp_php_to_js($mp_icon_color, 'icon_color'), 'before');
 	wp_add_inline_script('mp_init_map', mp_php_to_js($mp_icon_color_back, 'icon_color_back'), 'before');
-	wp_add_inline_script('mp_init_map', mp_php_to_js($mp_cluster_size_factor, 'cluster_size_factor'), 'before');
+	wp_add_inline_script('mp_init_map', mp_php_to_js($mp_icon_size_factor, 'icon_size_factor'), 'before');
 	wp_add_inline_script('mp_init_map', mp_php_to_js($mp_coordinates_default, 'coordinates_default'), 'before');
+	wp_add_inline_script('mp_init_map', mp_php_to_js($mp_icon_stroke_width, 'icon_stroke_width'), 'before');
 }
 
 ?>

srcs/plugins/map_prof/mp_get_events.php

@@ -127,7 +127,7 @@ function mp_get_published_posts() {
 	return $posts_published;
 }
 
-function mp_fill_fields_value($id) {
+function mp_fill_fields_value($post, $id, &$pays) {
 
 	/*
 	 * get_field is an ACF function
@@ -153,7 +153,8 @@ function mp_fill_fields_value($id) {
 	);
 	$event = (object)[];
 	foreach($fields as $field) {
-		$event->$field = get_field($field, $id);
+		$value = get_field($field, $id);
+		$event->$field = $value;
 	}
 
 	// add mode irl or online (irl: true | false)
@@ -165,15 +166,16 @@ function mp_fill_fields_value($id) {
 	return $event;
 }
 
-function mp_get_published_events() {
+function mp_get_published_events(&$pays) {
 	$posts_list = mp_get_published_posts();
 	$events = [];
 	foreach ($posts_list as $post) {
+		$event = mp_fill_fields_value($post, $post->ID, $pays);
 		$event->id = $post->ID;
 		$event->title = $post->post_title;
-		$event = mp_fill_fields_value($post->ID);
 		array_push($events, $event);
 	}
+	mp_console_log("nombre de posts: " . count($events));
 	return $events;
 }
 

srcs/plugins/map_prof/scripts/mp_create_markers.js

@@ -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(`
+	let icon_circle_radius = 40 - icon_stroke_width / 2;
-		<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}" />
+//	let svg_icon = window.btoa(`
-			<polygon points="35,80 65,80 50,100" fill="${icon_color}" />
+//		<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
-		</svg>
+//			<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}" />
-	let icon_options = {
+//		</svg>
-		url: `data:image/svg+xml;base64,${svg_icon}`,
+//	`);
-		scaledSize: new google.maps.Size(icon_size[0], icon_size[1]),
-	};
 
 	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);
 

srcs/plugins/map_prof/scripts/mp_draw_clusters.js

@@ -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 = [
+			let marker_icon_size = [
-				icon_size[0] + ( cluster_size_factor * (count - 2) ),
+				icon_size[0] + ( icon_size_factor * (count - 2) ),
-				icon_size[1] + ( cluster_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]}">
+				<svg xmlns="http://www.w3.org/2000/svg" width="${marker_icon_size[0]}" height="${marker_icon_size[1]}">
-					<circle cx="50%" cy="50%" r="37%" stroke="${icon_color}" stroke-width="6" fill="${icon_color_back}" />
+					<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",
 			};

srcs/plugins/map_prof/scripts/mp_info_window.js

@@ -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,
+			//disableAutoPan: true,
-			//position: center_position,
+			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);
 	});
 

srcs/plugins/map_prof/scripts/mp_init_map.js

@@ -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();

srcs/plugins/map_prof/settings/mp_optionnals.php

@@ -21,7 +21,7 @@
 	facteur de taille des clusters
 	valeur par defaut "2.5"
    ************************************ */
-//$mp_settings_cluster_size_factor = 4;
+//$mp_settings_icon_size_factor = 4;
 
 
 
@@ -56,4 +56,12 @@
 												// 0.9 : e6
 
 
+
+/* ************************************
+	epaisseur de trait des icones
+	valeurs par defaut "6"
+   ************************************ */
+$mp_settings_icon_stroke_width = 8;
+
+
 ?>

srcs/plugins/map_prof/styles/mp_info_windows.css

@@ -0,0 +1,34 @@
+
+/*
+ *	INFO WINDOW
+ */
+
+
+/*
+	window itself
+	*/
+.gm-style-iw.gm-style-iw-c {
+	padding: 0px !important;
+}
+
+/*
+	triangle
+	*/
+.gm-style-iw-tc {
+	display: none !important;
+}
+
+/*
+	croice
+.gm-ui-hover-effect {
+	display: none !important;
+}
+	*/
+
+/*
+	content
+	*/
+#info_window {
+	margin: 20px;
+}
+

srcs/plugins/map_prof/styles/mp_style.css

@@ -1,3 +1,8 @@
+
+#ljdp_map_wrapper {
+	position: relative;
+}
+
 #ljdp_map {
 	height: 500px;
 	width: 100%;
@@ -7,22 +12,13 @@
 }
 
 
-/*
+#ljdp_map_filters {
- *	styling zoom buttons on map
+	border: 1px solid blue;
- */
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	width: 100%;
+	height: 30px;
+}   
 
-/* hide the rectangular box container */
-div.gmnoprint div {
-	visibility: hidden;
-}
-/* shape buttons in circles */
-button.gm-control-active {
-	visibility: visible;
-	border-radius: 50% !important;
-	background-color: rgb(255, 255, 255) !important;
-}
-/* gap between the buttons */
-button.gm-control-active ~ div {
-	height: 10px !important;
-}
 

srcs/plugins/map_prof/styles/mp_zoom.css

@@ -0,0 +1,24 @@
+
+/*
+ *	ZOOM BUTTONS
+ */
+
+
+/* hide the rectangular box container
+div.gmnoprint div {
+	visibility: hidden;
+}
+*/
+/* shape buttons in circles
+button.gm-control-active {
+	visibility: visible;
+	border-radius: 50% !important;
+	background-color: rgb(255, 255, 255) !important;
+}
+*/
+/* gap between the buttons
+button.gm-control-active ~ div {
+	height: 10px !important;
+}
+*/
+