WordPress.org

Ready to get started?Download WordPress

Forums

Geo Mashup
[resolved] Custom marker: post thumbnail (7 posts)

  1. rashmani
    Member
    Posted 1 year ago #

    Hi there,

    first of all Geo-Mashup is one of my favs! Great stuff!
    Then, I'm having some troubles with setting my posts' thumbnails as markers.
    In my theme's function.php I've added this:

    function lundici_geo_mashup_locations_json_filter( $json_properties, $queried_object ) {
       $post_id = $queried_object->object_id;
       $json_properties['lundici_marker'] = get_the_post_thumbnail($post_id, array(32,24));
    
       return $json_properties;
    }
    
    //add_filter( 'geo_mashup_locations_json_object','lundici_geo_mashup_locations_json_filter', 10, 2 );

    Then, once installed Geo-Mashup Custom plugin, I've added a custom.js file looking like this:

    GeoMashup.addAction( 'objectIcon', function( properties, object ) {
           // Use a special icon, post's thumbnail
           object.icon.image = object.lundici_marker;
    } );

    Instead of thumbnails, I get default GoogleMaps markers, not Geo-Mashup default markers: I've realized something gets broken in passing thumbnail names to custom.js, I've tried urlencoding (in PHP) and decoding (decodeURI, in javascript) image names but no success.
    If I un-comment the add_filter call, I get no markers at all.

    What am I doing wrong?

    Thank you for any help!
    rash*

    http://wordpress.org/extend/plugins/geo-mashup/

  2. rashmani
    Member
    Posted 1 year ago #

    Uhm... Firebug tells me that (in DOM) each GeoMashup.object has property 'lundici_marker' set correctly (to post image), while object.icon.image property is 'undefined'.
    As if my custom.js would not be executed.
    Or... what?

    Cheers,
    rash*

  3. Dylan Kuhn
    Member
    Plugin Author

    Posted 1 year ago #

    I don't promise support for custom code, but I can see a couple of potential hangups. get_the_post_thumbnail() returns HTML, not an image URL. Look at the code for that function to see how it gets the URL. Also, Firebug will tell you if custom.js is loading - if so it will be present in the script tab. You can debug it there also. Good luck!

  4. rashmani
    Member
    Posted 1 year ago #

    Ok, got a solution, still incomplete though.

    In my function.php file, I've put:

    $tmp_img = wp_get_attachment_image_src(get_post_thumbnail_id($post_id), array(32,24));
    $json_properties['lundici_marker'] = $tmp_img[0];

    That gives me the image src. In my custom.js file I have now:

    object.icon.image = object.lundici_marker.replace(/\\/g, "");
    object.icon.iconSize = [ 32, 24 ];

    First line removes backslashes from the url passed over, second line sets marker size.
    Why incomplete then...? Because I do not have an image by that size and my map shows only the upper left corner. Well, right: this is a completely different matter! As far as Geo-Mashup, problem solved.
    Thanks for your help (set me on the right path)!

    Ciao,
    rash*

  5. rashmani
    Member
    Posted 1 year ago #

    Ok, here we go, hope this will help someone looking for the same thing.
    To get images for markers I've installed a plugin (Custom Image Sizes) able to generate custom sized images on the run.
    Then I've added following code to my theme's function.php file:

    function lundici_geo_mashup_locations_json_filter( $json_properties, $queried_object ) {
       $post_id = $queried_object->object_id;
       $tmp_img = wp_get_attachment_image_src(get_post_thumbnail_id($post_id), 'lundici_marker');
       $json_properties['lundici_marker'] = $tmp_img[0];
    
       return $json_properties;
    }
    
    add_image_size('lundici_marker', 36, 27);
    add_filter( 'geo_mashup_locations_json_object','lundici_geo_mashup_locations_json_filter', 10, 2 );

    In my custom.js file I now have:

    GeoMashup.addAction( 'objectIcon', function( properties, object ) {
           // Use a special icon, post's thumbnail
           object.icon.image = object.lundici_marker.replace(/\\/g, "");
           object.icon.iconSize = [ 36, 27 ];
    } );

    That's it!

    Thanks!
    rash*

  6. Dylan Kuhn
    Member
    Plugin Author

    Posted 1 year ago #

    Nice! I think WordPress will create custom image sizes via add_image_size() as long as you call add_theme_support( 'post-thumbnails' ) first.

  7. rashmani
    Member
    Posted 1 year ago #

    Yep, at the moment I've only left to find a way to put a border around my markers but you can see the map in action here: http://lundici.it
    (the border you see it's a fake, it's hand-made on images...)

    Great anyway!
    rash*

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic