Monday, 19th July 2010 at 8:05 pm | 23 Comments »
Since the 3.2 release of WP Geo it is possible to easily add new marker icons via a filter, either in your theme’s functions.php file or as a plugin.
I would suggest that if you are creating a marker icon specifically for your theme you add it your theme’s functions.php file. However, it is possible to create a set of markers packaged in a single plugin – ideal if you want to share your icons by releasing them on the WordPress plugin repository. If you do this please tag it as ‘wp-geo’ to make it easier to find in the plugin repository.
Creating a new markers
To add new markers you need to use the wpgeo_markers filter.
add_filter( 'wpgeo_markers', 'my_example_wpgeo_markers' ); function my_example_wpgeo_markers( $markers ) { $markers[] = new WPGeo_Marker( 'my_example_large', // Identifier 'My Example Large Marker', // Icon name 'This is my large marker image.', // Icon description 44, 48, 10, 34, // width, height, anchorx, anchor y 'path-to-my-plugin-or-theme/images/my_icon.png', // Icon image 'path-to-my-plugin-or-theme/images/my_icon_shadow.png' // Icon shadow image ); // You can add multiple markers by repeating the above return $markers; } |
Using Your Markers
You can use the wpgeo_marker_icon filter to display your icon and display in in various conditions based on the three parameters:
- $marker_id (String)
- $post (Object)
- $context (widget, wpgeo_map, post, multiple)
Example 1:
Replacing the default large marker with your custom marker image:
add_filter( 'wpgeo_marker_icon', 'replace_large_marker', 10, 3 ); function replace_large_marker( $marker_id, $post, $context ) { if ( $marker_id == 'wpgeo_icon_large' ) { $marker_id = 'my_example_large'; } return $marker_id; } |
Example 2:
Replacing all widget markers:
add_filter( 'wpgeo_marker_icon', 'replace_widget_marker', 10, 3 ); function replace_widget_marker( $marker_id, $post, $context ) { if ( $context == 'widget' ) { $marker_id = 'my_example_large'; } return $marker_id; } |
Example 3:
Replacing markers for posts in a specific category:
add_filter( 'wpgeo_marker_icon', 'replace_category_marker', 10, 3 ); function replace_category_marker( $marker_id, $post, $context ) { if ( in_category( 'my-category', $post ) ) { $marker_id = 'my_example_large'; } return $marker_id; } |
I have a problem with Example 3: Replacing markers for posts in a specific category
I created new markers with
function my_example_wpgeo_markers( $markers ) end it works in my admin panel. I can see my new markers.
But when I try to use new markets in my posts I see nothing on my “post map” and my maps on widget place (sidebar) is destroyed (i see map of all word without scrolling)
My code in function.php for category id 1
add_filter( 'wpgeo_marker_icon', 'replace_category_marker', 10, 3 );function replace_category_marker( $marker_id, $post, $context ) {
if ( in_category( '1', $post ) ) {
$marker_id = 'my_markers_1';
}
return $marker_id;
}
Does it work normally if you comment out the line that sets the $marker_id?
function replace_category_marker( $marker_id, $post, $context ) {if ( in_category( '1', $post ) ) {
//$marker_id = 'my_markers_1';
}
return $marker_id;
}
Was the marker you created in the first step definitely called ‘my_markers_1′?
Does it work normally if you comment out the line that sets the $marker_id? – Yes
Was the marker you created in the first step definitely called ‘my_markers_1′? Yes
This is a part of my code from function.php:
I’t works. I see new marker in admin panel.
And my code of function replace_category
add_filter( 'wpgeo_marker_icon', 'replace_category_marker', 10, 3 ); function replace_category_marker( $marker_id, $post, $context ) { if ( in_category( '1', $post ) ) { $marker_id = 'my_fortress'; } return $marker_id; }It works only when comment out the line that sets the $marker_id
Do you have a link where I can see this not working?
This should now work in WP Geo 3.2.1
Unfortunately does not work. see it on zabytki.klodzko.pl
I have made some more fixes. You can see the changes here.
You can download the latest development files here.
I saw in the plugin settings page that custom markers must still use the same anchor position. Does the method you’ve outlined above allow me to use my own anchor positions?
Yes, if you look at the code where you create the marker you can set the width, height and anchor points:
44, 48, 10, 34, // width, height, anchorx, anchor yOK. Within the plugin settings it says you must use the current anchor settings, so I wasn’t sure if that was still true. Thanks for the quick response!
Jeff, yes, that only applies if you’re just replacing an existing marker image. If you use the filter then you can set your custom anchor points.
Ben,
I am trying to load custom markers and it isn’t working. I followed all the steps above by editing my theme’s functions.php file. Here is the code creating the marker:
And I am trying to replace the default just to test it (ideally I want to load a different marker for each custom post type), but it doesn’t change the default marker.
Thanks
I think there is current an issue where you have to prefix your market id with ‘wpgeo_’ when you call it in the filter. For example:
So I deleted everything I had before and started over to take another stab at this
Here is my code
add_filter( 'wpgeo_markers', 'tis_custom_markers' );function tis_custom_markers( $markers ) {
$markers[] = new WPGeo_Marker(
'wpgeo_stoplight_marker', // Identifier
'Intersection Marker', // Icon name
'This is a marker for intersections.', // Icon description
40, 48, 20, 44, // width, height, anchor x, anchor y
'http://beta.thisintersectionsucks.com/wp-content/uploads/markers/stoplight-marker.png', // Icon image
'http://beta.thisintersectionsucks.com/wp-content/uploads/markers/stoplight-shadow.png' // Icon shadow image
);
// You can add multiple markers by repeating the above
return $markers;
}
add_filter( 'wpgeo_marker_icon', 'replace_large_marker', 10, 3 );
function replace_large_marker( $marker_id, $post, $context ) {
if ( $marker_id == 'wpgeo_icon_large' ) {
$marker_id = 'wpgeo_stoplight_marker';
}
return $marker_id;
}
And no markers load at all. As you can see I added the prefix wpgeo_ first to the replace large marker function and when that didn’t work to the marker identifier itself above.
Any ideas what I am doing wrong?
Oh yeah, one other thing, I am using the 3.3.dev version of the plugin because with the 3.2.3 I got the “You need a new API key” popup error.
Hello,
I created 3markers to replace yours : large marker, small marker and dot marker. Because I’m no developer, know nothing at coding and I’m really stubborn, I named my markers exactly the same as those of WP Geo and uploaded them into the appropriate WP Geo markers folder. However, I still get the WP Geo old markers, not mine. How is it possible ? why isn’t it using mine ?
Thanks,
When you install WP Geo it should make copies of the marker images to a folder into the wp-content/uploads/wp-geo/markers/ folder. Did you replace the images in there?
Thanks Ben…. Yes, I did. Any idea why it doesn’t work ?
Hmm, do you have a link to the site I can check?
http://www.jardins-sans-secret.com
It’s password protected – can you email me some login details.
How about adding image thumbnails instead for custom content? (ie Realty or travel locations) Heres the code:
function my_wpgeo_markers( $markers ) {$custom = new WP_Query();
$custom->query('post_type=custom_post_type_name&posts_per_page=-1');
$i = 1;
while ($custom->have_posts()) : $custom->the_post();
$title = get_the_title();
$content = get_the_content();
$slug = basename(get_permalink());
$slug = str_replace("-", "_", $slug);
$post_id = get_the_ID();
$thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'thumbnail' );
$url = $thumb['0'];
$thumb_shadow = "add_image_here.png";
$imageurl = get_post_meta( $post_id, 'first_gallery_image_meta_box', TRUE );
$markers[$i] = new WPGeo_Marker(
$slug, // custom post slug
$title, // readable marker text
$content, // info text
30, 30, 10, 34, // width, height, anchorx, anchor y
$url, //image url
$thumb_shadow //image shadow
);
$i++;
endwhile;
return $markers;
}
add_action( 'wpgeo_markers', 'my_wpgeo_markers' );