Ask your WordPress questions! Pay money and get answers fast! (more info)

Custom Markers in global map based based on User Custom Fields WordPress

Hi Dylan, hi geomashup users,

I am using

Wordpress V4.2.4
Geo Mashup v1.8.4
Geo Mashup Custom Plugin (latest)
Google Maps v3
Advanced Custom Fields Pro

I build a custom user profile form with address fields and radio buttons to choose what type of business the user has (f.e. fashion, furniture, etc.)

The addresses are correctly shown on a global map, but i cannot bring the custom markers to work which are based on the business type custom field 'imagetype'.

I build the code based on following example:
[[LINK href="https://sites.google.com/site/geomashupwiki/guides/custom-marker-depending-on-a-custom-field-value"]]https://sites.google.com/site/geomashupwiki/guides/custom-marker-depending-on-a-custom-field-value
[[/LINK]]

My code which I have in my functions.php is:

function my_geo_mashup_locations_json_filter( $json_properties, $queried_object ) {

$imagetype = get_user_meta ( $user->ID, 'imagetype', true );


if ( $imagetype == 'fashion' ) {
$json_properties['my_complete'] = 1;
} else if ( $imagetype == 'furniture' ) {
$json_properties['my_complete'] = 2;
} else {
$json_properties['my_complete'] = 3;
}

return $json_properties;
}
add_filter( 'geo_mashup_locations_json_object','my_geo_mashup_locations_json_filter', 10, 2 );



My custom.js is:

GeoMashup.addAction( 'objectIcon', function( properties, object ) {
// Use a special icon in case the custom 'complete' var is set to 1
if ( object.my_complete == 1 ) {
object.icon.image = properties.template_url_path + '/member-icons/icon1.png';
} else if ( object.my_complete == 2 ) {
object.icon.image = properties.template_url_path + '/member-icons/icon2.png';
} else {
object.icon.image = properties.template_url_path + '/member-icons/icon3.png';
}
} );

Answers (3)

2015-09-15

dimadin answers:

Let me first ask you is this part of the code because you use

$imagetype = get_user_meta ( $user->ID, 'imagetype', true );

but don't define $user before?


Jan-Philipp Wittrin comments:

Good point. Thank you. I have edited it like this now, but it is still not working.



function my_geo_mashup_locations_json_filter( $json_properties, $queried_object ) {


$shops = get_users (array( 'role' => 'vendor'));


foreach ($shops as $user) {


$imagetype = get_field ( 'imagetype', 'user_'.$user->ID);


if ( $imagetype == 'fashion' ) {

$json_properties['my_complete'] = 1;

} else if ( $imagetype == 'furniture' ) {

$json_properties['my_complete'] = 2;

} else {

$json_properties['my_complete'] = 3;

}


return $json_properties;
}
}

add_filter( 'geo_mashup_locations_json_object','my_geo_mashup_locations_json_filter', 10, 2 );


dimadin comments:

This is the wrong approach because only value of last user in that array of users you are getting with get_users() is used.

You should now tell us on which page you are using this and in which context so we can know how to get $user.


Jan-Philipp Wittrin comments:

hi dimadin

the links to my website are:


Main Map:
[[LINK href="http://lets.shopacityonline.com/city/berlin/"]]http://lets.shopacityonline.com/city/berlin/[[/LINK]]


Detail Map of User: [[LINK href="http://lets.shopacityonline.com/vendors/lassie-shop/"]]http://lets.shopacityonline.com/vendors/lassie-shop/[[/LINK]]

2015-09-15

Andrea P answers:

try using the proper acf function to retrieve the value of the custom field:

instead of this

$imagetype = get_user_meta ( $user->ID, 'imagetype', true );


use this


$imagetype = get_field ( 'imagetype', 'user_'.$user->ID);


Andrea P comments:

and yes, as pointed out by dimadin, you will have to define the currently looped user id

if that map will be displayed into an author profile page, you should be able to get the id in this way:


function my_geo_mashup_locations_json_filter( $json_properties, $queried_object ) {
global $wp_query;
$looped_user = $wp_query->get_queried_object();

$imagetype = get_field ( 'imagetype', 'user_'.$looped_user->ID);

if ( $imagetype == 'fashion' ) {
$json_properties['my_complete'] = 1;
} else if ( $imagetype == 'furniture' ) {
$json_properties['my_complete'] = 2;
} else {
$json_properties['my_complete'] = 3;
}

return $json_properties;
}
add_filter( 'geo_mashup_locations_json_object','my_geo_mashup_locations_json_filter', 10, 2 );


Jan-Philipp Wittrin comments:

Hi Andrea.

I have integrated the ACF get_field call in my code. But it is still now working. See code now.



function my_geo_mashup_locations_json_filter( $json_properties, $queried_object ) {



$shops = get_users (array( 'role' => 'vendor'));


foreach ($shops as $user) {



$imagetype = get_field ( 'imagetype', 'user_'.$user->ID);



if ( $imagetype == 'fashion' ) {

$json_properties['my_complete'] = 1;

} else if ( $imagetype == 'furniture' ) {

$json_properties['my_complete'] = 2;

} else {

$json_properties['my_complete'] = 3;

}


return $json_properties;
}
}

add_filter( 'geo_mashup_locations_json_object','my_geo_mashup_locations_json_filter', 10, 2 );






Andrea P comments:

I see what you have tried to do, but I think that filter is actually running inside a loop, so you don't have to search for all users id.

the code in which that hook is place should be already being looping the users.

I had a better look at the sample you have followed, and I think that the currently looped user id should be passed by the queried_object parameter:


function my_geo_mashup_locations_json_filter( $json_properties, $queried_object ) {

$user_id = $queried_object->object_id;

$imagetype = get_field ( 'imagetype', 'user_'.$user_id);

if ( $imagetype == 'fashion' ) {
$json_properties['my_complete'] = 1;
} else if ( $imagetype == 'furniture' ) {
$json_properties['my_complete'] = 2;
} else {
$json_properties['my_complete'] = 3;
}
return $json_properties;

}
add_filter( 'geo_mashup_locations_json_object','my_geo_mashup_locations_json_filter', 10, 2 );


but this code would work only if your map is actually already placed into a users loop. can we see the actual page where you have the map? how are you building the map ?


Jan-Philipp Wittrin comments:

Hi Andrea.

Here is the map.

I am building the map with the shortcode. I inject into vars from the url query like this:




<?php

if(isset($wp_query->query_vars['city'])) {
$city = urldecode($wp_query->query_vars['city']);
}

?>


<div id="map-container" style="height:100%">

<?php $map_args = 'zoom=12&add_overview_control=false&auto_info_open=false&add_map_type_control=false&object_name=user&object_ids=1,2,3,4&locality_name=' . $city;
echo GeoMashup::map( $map_args );?>


</div>



The links are:


Main Map:
[[LINK href="http://lets.shopacityonline.com/city/berlin/"]]http://lets.shopacityonline.com/city/berlin/[[/LINK]]


Detail Map of User: [[LINK href="http://lets.shopacityonline.com/vendors/lassie-shop/"]]http://lets.shopacityonline.com/vendors/lassie-shop/[[/LINK]]


Andrea P comments:

have you tried my last code?


Jan-Philipp Wittrin comments:

Yes. Thank you and sorry. It is sadly not working. I guess because the map is not on a profile page but in a page template?


Andrea P comments:

ok it is on a page template, but is it set up to display the users?

I mean, does it work as a normal map which displays users without a specific icon?

it is very important to understand if without the custom function/hook the map is actually working fine and displaying the users.


Jan-Philipp Wittrin comments:

Yes. It works as a normal map. It displays users, but without a specific icon. Check out the first link I posted.

Main Map:
[[LINK href="http://lets.shopacityonline.com/city/berlin/"]]http://lets.shopacityonline.com/city/berlin/[[/LINK]]

If you click on one of the markers it gives you detail infos about the users.


Andrea P comments:

I'm sorry but the link doesn't work..

in any case, if the map is displaying users, then the $queried_object parameter in the hook should be the user, and so that function should work correctly..

are you sure that the rest is set up correctly?
is the second function placed in the right place?
are the images in the right folder? and do they have the right name?


Jan-Philipp Wittrin comments:

Checked the link again, it should work. I have also tried your last code again. It actually does something: it only shows the last user in the array on the map.

I think the JavaScript is correct, I followed religiously the instructions. Also the icon folder is in the right place and the icons have the correct name.


Andrea P comments:

Hello,

do you mean that if you don't place the hook, it shows all the users (everyone with the same icon), while if you put the hook function, it shows only one user?

do all the users actually have something set as the value of the custom field?


Andrea P comments:

in any case, I am still not able to view your page.. it hangs for a while and then redirects to my-account page and then crash..


Jan-Philipp Wittrin comments:

Fixed the link issue. It was a plugin bug. Now the link really works.


Jan-Philipp Wittrin comments:

"Hello, do you mean that if you don't place the hook, it shows all the users (everyone with the same icon), while if you put the hook function, it shows only one user?"


Actually, that was a mistake of mine. It always shows all users, no matter, if I put your code into the functions or not. It is like it is untouched.


Andrea P comments:

ok, so the problem is that it is not changing the icon.

is the icon that is displaying, actually icon3.png? or is it another one?

cause if the filter works, but, we are not retrieving correctly the user-id and field, it should set up the json parameter "my_complete" to be the icon3.png. and then display that one.

if it doesn't, means that the hook is completely skipped, or the other js function (which is what changes the icon) is not working. and therefore the user icon is displayed normally


Jan-Philipp Wittrin comments:

good thinking!

actually the map and the marker are generated by the plugin "geo mashup".

The map as it is now, shows the standard original plugin marker,and not the own 'else'-marker Icon3.png.

Yes it feels like the hook or js function are completely skipped. I get no reaction of them at all.


Andrea P comments:

ok, so the problem is within the tutorial that you have followed.

is that the official wiki of the plugin, isn't it?

the hook has to go in functions.php, and that's ok I think.

the problem might be with the other function.
which if I understood correctly, should be placed within the plugin folder, into a sub-folder called "geo-mashup-custom", and into a file called "custom.js"

but actually, it could be that there is already another filter which is acting after yours, so first of all, I'd try by changing the hook's priority:


add_filter( 'geo_mashup_locations_json_object','my_geo_mashup_locations_json_filter', 99, 2 );


Jan-Philipp Wittrin comments:

I appreciate your analytical thinking.


Yes. It is an official plugin tutorial.

So I added your snippet to the code you gave me before in the functions.php , but there is still no change.

The geo-mashup-custom folder is an extra plugin made by the author of the plugin (update-safe), but to be firm I copied one into the plugin folder.

All-in-all: No change.


Jan-Philipp Wittrin comments:

I wonder if this code gives somehow a clou.

<?php $map_args = 'zoom=12&add_overview_control=false&auto_info_open=false&add_map_type_control=false&object_name=user&object_ids=1,2,3,4&locality_name=' . $city;

echo GeoMashup::map( $map_args );?>


This is how integrate the map.

I see in your code that you use "object_id".

I noticed in that code above, that it needs "object_name=user" to function correctly, the object_ids alone do not give any output.
Could it be that "object_name=user" needs to find place in that functions code?

I am not a very experienced coder, and still learning by doing, but I hope, you understand my idea. Maybe it is nothing, but at least I wanna mention it.


Andrea P comments:

hello,

thanks for the input but I think that the code there is passing the args to the main query built up by the function, but then looking at the tutorial, the hook is filtering the single elements looped, and not the general query.

though, I've never worked with that plugin so I am not expert of how it works, but looking again at those $map_args, I am wondering how they could work..

the only variable value of the args that are passed at the function which makes the map, is the city, and then you are passing 1,2,3,4 as object_ids, which is a static value and means that the map will always consider only those ids to make the map..

can you link a page where they explain how to set up those args?


Jan-Philipp Wittrin comments:

Hello.

I am using the static 1,2,3,4,... as object_ids because i have not yet figured out, how to get these values (the user ids) dynamically.

So far I just throw in all users and then let city value (which is connected to the Custom Field 'city' in the user profile) limit the output of the users. So, users that don't have this particular city value are not shown.

The tag reference of the plugin is this here: [[LINK href="https://github.com/cyberhobo/wordpress-geo-mashup/wiki/Tag-Reference"]]https://github.com/cyberhobo/wordpress-geo-mashup/wiki/Tag-Reference[[/LINK]]


Jan-Philipp Wittrin comments:

Hi Andrea,

you actually gave the right answer. I somehow cannot vote it as correct. I think you should get the $ 15, but that is not up to me.

So this is the correct code:




function my_geo_mashup_locations_json_filter( $json_properties, $queried_object ) {



$user_id = $queried_object->object_id;



$imagetype = get_field ( 'imagetype', 'user_'.$user_id);



if ( $imagetype == 'fashion' ) {

$json_properties['my_complete'] = 1;

} else if ( $imagetype == 'furniture' ) {

$json_properties['my_complete'] = 2;

} else {

$json_properties['my_complete'] = 3;

}

return $json_properties;



}

add_filter( 'geo_mashup_locations_json_object','my_geo_mashup_locations_json_filter', 10, 2 );



Thank you.

2015-09-15

Arnav Joy answers:

you have to check two things first

1. if this returns anything or not $user->ID

2. if this properties.template_url_path + '/member-icons/icon1.png'; and other are valid image path..


Jan-Philipp Wittrin comments:

1. I do not understand.

2. Yes, I would say, it is a valid image path. I have trouble reading javascript. So I must relay on the person who wrote the code. But the path exists like that.