Changing the venue map icon


The following tutorial on how to change a venue map icon is fairly straightforward, but it would be great to see an add-on which makes it simple for any user to upload and select an icon for their venue. If you have a go at making one, I’d love to know!

Since Event Organiser 2.1 you can now change the icon of the venue, using the eventorganiser_venue_marker hook:

add_filter( 'eventorganiser_venue_marker', 'my_venue_map_icon', 10, 2 );
function my_venue_map_icon( $icon, $venue_id ){
       return 'http://yoursite.com/url/to/venue/map/icon.png';
}

The hook filters the url of the image you wish to use. You can use:

  • plugins_url() (see codex) – to get the url to an image in a plug-in
  • get_stylesheet_directory_uri() (see codex) – to get the url to an image in your theme
  • wp_upload_dir() (see codex) – to get the url to an image in your uploads directory
  • wp_get_attachment_url() (see codex) to get the url of a particular attachment

As an example, suppose I’ve created a subdirectory in my uploads directory called mapicons, which contains the icon venue-icon.png:

add_filter( 'eventorganiser_venue_marker', 'my_venue_map_icon', 10, 2 );
function my_venue_map_icon( $icon, $venue_id ){
    $uploads = wp_upload_dir();
    $url = $uploads['baseurl']; // Something like www.yoursite.com/wp-content/uploads
    return $url.'/mapicons/venue-icon.png';
}

You can also display different icons for different venues. For example, let’s suppose I have an icon for each venue, with filenames venue-icon-[venue-slug].pnp. The following chooses the appropriate icon based on the venue (if it cannot be found it uses a generic venue-icon.png icon from the above example.

add_filter( 'eventorganiser_venue_marker', 'my_venue_map_icon', 10, 2 );
function my_venue_map_icon( $icon, $venue_id ){

    //Get uploads directory path & url
    $uploads = wp_upload_dir();
    $basedir = $uploads['basedir'];
    $url = $uploads['baseurl']; // Something like www.yoursite.com/wp-content/uploads

    //Get venue slug from ID
    $venue = eo_get_venue_by( 'id', $venue_id );
    $slug = $venue->slug;

    //If icon venue-icon-[slug].png exists, use that
    if( file_exists( $basedir.'/mapicons/venue-icon-'.$slug.'.png' ) ){
        return $url.'/mapicons/venue-icon-'.$slug.'.png';
    }

    //Couldn't find venue-specific icon, use generic fallback
    return $url.'/mapicons/venue-icon.png';
}

You can return null to keep the default Google maps icon.

You could, query the venue to find which event is occurring next at that venue, and use its category to decide which icon to use. I’ll leave the details to you :).

How will you use it?

PS. Here’s a great source of free Google map icons. Enjoy!

Comments (1)

Comments are closed.