Basically, I would like to add Label on my map Marker which returns the count of my BuddyPress Members per location (just a number like MarkerClusterer is producing) and when I then when I click on it redirect to a specific Url.
Also, I would like to tweak the MarkerClusterer number to add these numbers together, instead of counting the number of Markers I have inside.
The problem: I am struggling on trying to tweak the functionalities included in the plugin Progress Map and the developer of this one apparently doesn't bother to dirty his hands.
Anyway, this is the kind of result I would like (the white labels in the red spots):
I found the way to retrieve the count of my members per location with the following code:
<?php global $bp;
if ( bp_has_members( bp_ajax_querystring( 'members' ). '&per_page='.sq_option('buddypress_perpage') ) ) :
$region = array();
while ( bp_members() ) : bp_the_member();
$region[] = xprofile_get_field_data( 'Region' , bp_get_member_user_id() );//fetch the text for location
endwhile;
endif; ?>
/* print_r(array_count_values(array_map('strtolower', $region))); */
Here is the call to create the object marker:
/**
* Create the pin object */
var marker_object = cspm_new_pin_object(<?php echo $l; ?>, '<?php echo $post_id; ?>', <?php echo $lat; ?>, <?php echo $lng; ?>, '<?php echo $implode_post_categories; ?>', map_id, '<?php echo $marker_img_by_cat; ?>', '<?php echo $marker_img_size; ?>', '<?php echo $is_child; ?>');
json_markers_data.push(marker_object);
And here the function cpsm_new_pin_object (I guess this is where Google Maps API is used):
function cspm_new_pin_object(i, post_id, lat, lng, post_categories, map_id, marker_img, marker_size, is_child){
/**
* [@map_script_id] | Used only to get map options from the PHP option wp_localize_script()
* @since 3.0 */
var map_script_id = (typeof progress_map_vars.map_script_args[map_id] !== 'undefined') ? map_id : 'initial';
post_lat_lng_coords[map_id][post_id] = lat+'_'+lng;
// Create an object of that post_id and its categories/status for the faceted search
post_lat_lng_coords[map_id]['post_id_'+post_id] = {};
post_ids_and_child_status[map_id][lat+'_'+lng] = is_child;
// Get the current post categories
var post_category_ids = (post_categories != '') ? post_categories.split(',') : '';
// Collect an object of all posts in the map and their categories
// Useful for the faceted search & the search form
post_lat_lng_coords[map_id]['post_id_'+post_id][0] = post_category_ids;
// By default the marker image is the default Google map red marker
var marker_icon = '';
// If the selected marker is the customized type
if(progress_map_vars.map_script_args[map_script_id]['defaultMarker'] == 'customize'){
// Get the custom marker image
// If the marker categories option is set to TRUE, the marker image will be the uploaded marker category image
// If the marker categories option is set to FALSE, the marker image will be the default custom image provided by the plugin
var marker_cat_img = marker_img;
// Marker image size
var marker_img_width = (progress_map_vars.map_script_args[map_script_id]['retinaSupport'] == "true") ? parseInt(marker_size.split('x')[0])/2 : parseInt(marker_size.split('x')[0]);
var marker_img_height = (progress_map_vars.map_script_args[map_script_id]['retinaSupport'] == "true") ? parseInt(marker_size.split('x')[1])/2 : parseInt(marker_size.split('x')[1]);
// Marker image anchor point
var anchor_y = marker_img_height/2;
var anchor_x = marker_img_width/2;
var anchor_point = null;
if(progress_map_vars.map_script_args[map_script_id]['marker_anchor_point_option'] == 'auto')
anchor_point = new google.maps.Point(anchor_x, anchor_y);
else if(progress_map_vars.map_script_args[map_script_id]['marker_anchor_point_option'] == 'manual'){
if(progress_map_vars.map_script_args[map_script_id]['retinaSupport'] == "true"){
anchor_point = new google.maps.Point(
progress_map_vars.map_script_args[map_script_id]['marker_anchor_point'].split(',')[0]/2,
progress_map_vars.map_script_args[map_script_id]['marker_anchor_point'].split(',')[1]/2
);
}else anchor_point = new google.maps.Point(progress_map_vars.map_script_args[map_script_id]['marker_anchor_point'].split(',')[0], progress_map_vars.map_script_args[map_script_id]['marker_anchor_point'].split(',')[1]);
}
// Add retina support
marker_icon = new google.maps.MarkerImage(marker_cat_img, null, null, anchor_point, new google.maps.Size(marker_img_width,marker_img_height));
}
return pin_object = {latLng: [lat, lng], tag: 'post_id__'+post_id, id: post_id+'_'+is_child, options:{ optimized: false, icon: marker_icon, id: post_id, post_id: post_id, is_child: is_child }};
}
Coming of course in his minify version:
cspm_new_pin_object(e,s,a,r,t,i,o,_,p){var n="undefined"!=typeof progress_map_vars.map_script_args[i]?i:"initial";post_lat_lng_coords[i][s]=a+"_"+r,post_lat_lng_coords[i]["post_id_"+s]={},post_ids_and_child_status[i][a+"_"+r]=p;var c=""!=t?t.split(","):"";post_lat_lng_coords[i]["post_id_"+s][0]=c;var m="";if("customize"==progress_map_vars.map_script_args[n].defaultMarker){var l=o,d="true"==progress_map_vars.map_script_args[n].retinaSupport?parseInt(_.split("x")[0])/2:parseInt(_.split("x")[0]),u="true"==progress_map_vars.map_script_args[n].retinaSupport?parseInt(_.split("x")[1])/2:parseInt(_.split("x")[1]),g=u/2,f=d/2,v=null;"auto"==progress_map_vars.map_script_args[n].marker_anchor_point_option?v=new google.maps.Point(f,g):"manual"==progress_map_vars.map_script_args[n].marker_anchor_point_option&&(v="true"==progress_map_vars.map_script_args[n].retinaSupport?new google.maps.Point(progress_map_vars.map_script_args[n].marker_anchor_point.split(",")[0]/2,progress_map_vars.map_script_args[n].marker_anchor_point.split(",")[1]/2):new google.maps.Point(progress_map_vars.map_script_args[n].marker_anchor_point.split(",")[0],progress_map_vars.map_script_args[n].marker_anchor_point.split(",")[1])),m=new google.maps.MarkerImage(l,null,null,v,new google.maps.Size(d,u))}return pin_object={latLng:[a,r],label:'B',tag:"post_id__"+s,id:s+"_"+p,options:{optimized:!1,icon:m,id:s,post_id:s,is_child:p}}}
To summarize, 2 or 3 things here:
- Be able to insert a label (counter) inside my red dots (markers)
- Tweak of the MarkerClusterer plugin to display the total of the other counters (dynamically if we unzoom) instead of the count of markers inside it.
- (additional) add a custom link with a (?) symbol inside a WP "Post" (but I should be able to do it with ACF).
Map Source: https://spanishblackgarlic.com/spanishblackgarlic/