fixed cluster zoom problem with map bounds restriction

README.md

@@ -23,20 +23,20 @@
 - [/] check errors on real site
 - [/] create action to publish all
 - [/] deal with multiplication of filters
-- [ ] deal with error double event irl and online
-- [ ] change appearance of filter according to other filters
 - [/] deal with window size
 
 - [/] la carte ne s'affiche pas sur les pages
 - [/] filtres sur chrome
 - [/] infowindow new design
 - [/] infowindow enlever scroll border
-- [ ] hide filters before css ready
+- [/] hide filters before css ready
 - [x] reduire hauteur du select menu
-- [ ] zoom sur cluster problem
 - [/] dans categories, placer "autres" en bas
 - [/] dans categories, transformer fleches en "autres"
-- [ ] effacer les fenetres, au moins sur le bouton effacer, ou sur mouvement
+- [/] effacer les fenetres, au moins sur le bouton effacer, ou sur mouvement
+- [/] zoom sur cluster problem
+- [ ] change appearance of filter according to other filters
+- [ ] deal with error double event irl and online
 
 #### verifications:
 - api only for this site on fabien's google account

srcs/plugins/map_prof/scripts/mp_create_map.js

@@ -1,8 +1,23 @@
+
+function restrict_map(restrict) {
+	let map_restriction = {
+		latLngBounds: g_world_bound,
+		strictBounds: true,
+	};
+	if (restrict)
+		g_map.setOptions({restriction: map_restriction,});
+	else
+		g_map.setOptions({restriction: null,});
+};
+
 function create_map(map_div) {
 	// default map center to france
 	let map_center = coordinates_default;
 	//	map_center = {lat:-2.515748362923059, lng:32.93366215464864};
-	let world_bound = g_init_bounds;
+	let map_restriction = {
+		latLngBounds: g_world_bound,
+		strictBounds: true,
+	};
 	let map_options = {
 		/* map options : https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions */
 		disableDefaultUI: true,
@@ -19,10 +34,7 @@ function create_map(map_div) {
 		//draggable: "true",				// deprecated
 
 		center: map_center,
-		restriction: {
+		restriction: map_restriction,
-			latLngBounds: world_bound,
-			strictBounds: true,
-		},
 	}
 
 	return new google.maps.Map(map_div, map_options);

srcs/plugins/map_prof/scripts/mp_create_markers.js

@@ -11,13 +11,6 @@ function create_markers(map, locations, infowindow) {
 
 	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) {
 
@@ -54,9 +47,6 @@ function create_markers(map, locations, infowindow) {
 			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

@@ -48,5 +48,11 @@ function draw_clusters(map, markers) {
 		}
 	}
 
-	return new markerClusterer.MarkerClusterer({ map, markers, renderer });
+	let onClusterClick = (_, cluster, map) => {
+		restrict_map(false);
+		map.fitBounds(cluster.bounds);
+		restrict_map(true);
+	};
+
+	return new markerClusterer.MarkerClusterer({ map, markers, renderer, onClusterClick });
 }

srcs/plugins/map_prof/scripts/mp_filter_events.js

@@ -93,6 +93,8 @@ function is_element_unchecked(element) {
 
 function filter_show_only_selection(element, indexes, menu, add = false, zoom_in = true) {
 
+	g_infowindow.close();
+
 	// BAD WORKAROUND solution because we can't actually put onclick event inside select options
 	// on chrome, so I have to recover the indexes another way
 	if (element.type == "select-one") {
@@ -115,7 +117,6 @@ function filter_show_only_selection(element, indexes, menu, add = false, zoom_in
 		g_marker_cluster.clearMarkers(true);
 
 		let marker = g_markers[0];
-//		let position = marker.getPosition();
 		let current_bounds = g_map.getBounds();
 		let bounds = new google.maps.LatLngBounds();
 
@@ -134,9 +135,11 @@ function filter_show_only_selection(element, indexes, menu, add = false, zoom_in
 				g_map.setCenter(position);
 				g_map.setZoom(max_zoom);
 			}
-			else if (indexes_count > 1)
+			else if (indexes_count > 1) {
+				console.log("index_bound");
 				g_map.fitBounds(bounds);
 			}
+		}
 
 	}
 	else if ( Object.keys(g_indexes).length === 0 ) {
@@ -154,10 +157,13 @@ function filter_show_only_selection(element, indexes, menu, add = false, zoom_in
 }
 
 function filter_show_all() {
+	g_infowindow.close();
+
 	g_indexes = {};
 	g_marker_cluster.clearMarkers(true);
 	g_marker_cluster.addMarkers(g_markers);
-	//g_map.fitBounds(g_init_bounds);
+	/* dont use fitBounds because it's not well centered */
+	//g_map.fitBounds(g__init_bounds);
 	g_map.setCenter(coordinates_default);
 	g_map.setZoom(2);
 }

srcs/plugins/map_prof/scripts/mp_init_map.js

@@ -2,14 +2,14 @@
 let g_map = {};
 let g_markers = [];
 let g_marker_cluster = {};
-const g_init_bounds = {
+let g_indexes = {};
+let g_infowindow = {};
+const g_world_bound = {
 	north: 80,
 	south: -80,
 	west: -180,
 	east: 180,
 };
-let g_indexes = {};
-let g_infowindow = {};
 
 function mp_init_map() {
 
@@ -51,26 +51,22 @@ function mp_init_map() {
 	//let filters_div = document.getElementById("ljdp_map_filters");
 	g_infowindow = new google.maps.InfoWindow();
 
-
-	/*
-	 * DRAW MAP
-	 */
-
 	g_map = create_map(map_div);
 	g_markers = create_markers(g_map, locations, g_infowindow);
 	g_marker_cluster = draw_clusters(g_map, g_markers);
 
-	//console.log("locations:");
+	// add listener to close infowindow
-	//console.log(locations);
+	//   https://developers.google.com/maps/documentation/javascript/events
-	//console.log("filters:");
-	//console.log(filters);
-	//console.log("markers:");
-	//console.log(g_markers);
-
-
-	// add listener to close infowindow at any click on map
 	g_map.addListener('click', function() {
 		g_infowindow.close();
 	});
+	g_map.addListener('drag', function() {
+		g_infowindow.close();
+	});
+	g_map.addListener('zoom_changed', function() {
+		g_infowindow.close();
+	});
+
+	//g_map.addListener('clusteringbegin', restrict_map(false));
 
 }