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;
}

23 Responses to “How to create a custom marker image for WP Geo”

  1. Sako San says:

    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;
    }

    • Ben says:

      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′?

  2. Sako San says:

    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

  3. Jeff Owens says:

    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?

  4. emersonlenon says:

    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:

    $markers[] = new WPGeo_Marker(
    	'tis_stoplight', // Identifier
    	'TiS Stoplight Marker', // Icon name
    	'Stoplight marker image.', // Icon description
    	21, 48, 10, 44, // width, height, anchorx, anchor y
    	'http://beta.thisintersectionsucks.com/wp-content/uploads/wp-geo/markers/stoplight-marker.png', // Icon image
    	'http://beta.thisintersectionsucks.com/wp-content/uploads/wp-geo/markers/city-marker-blank.png' // Icon shadow image
    );
     
    $markers[] = new WPGeo_Marker(
    	'tis_city_blank', // Identifier
    	'TiS Empty Marker', // Icon name
    	'Empty marker image.', // Icon description
    	21, 48, 10, 44, // width, height, anchorx, anchor y
    	'http://beta.thisintersectionsucks.com/wp-content/uploads/wp-geo/markers/city-marker-blank.png', // Icon image
    	'http://beta.thisintersectionsucks.com/wp-content/uploads/wp-geo/markers/city-marker-blank.png' // Icon shadow image
    );
     
    // You can add multiple markers by repeating the above
    return $markers;

    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.

    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 = 'tis_stoplight';
    	}
    	return $marker_id;
    }

    Thanks

    • Ben says:

      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:

      if ( $marker_id == 'wpgeo_icon_large' ) {
      	$marker_id = 'wpgeo_tis_stoplight';
      }
  5. emersonlenon says:

    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?

  6. Isamenton says:

    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,

    • Ben says:

      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?

  7. isamenton says:

    Thanks Ben…. Yes, I did. Any idea why it doesn’t work ?

  8. Paul says:

    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' );

Leave a Reply