Using Custom SVGs as Map Markers

  • Resolved jenrsd

    (@jenrsd)


    1 month, 1 week ago

    Hi, I’m using Geodirectory on a site that displays walking tours around the city, with the Places being points of interest on the trail. Each trail has a different colour, so all the markers for route A are blue, route B are all green etc. When new tours or places are added, the routes often get rejigged so they don’t get too long or have too many stops.

    We’re currently using custom PNGs for the map markers, but this means I have to remake them every time a trail changes. For example, if a Place moves from route A to route B I have to redo the icon in green, so if 50 places are switching trails then it’s a lot of work to create all the new colours and reupload them. The PNGs also don’t look great at certain resolutions so I’d rather use an SVG so it’s scaleable.

    Using the Font Awesome icons means I can just change the colour and the map pin will recolour itself, except we are using custom icons that don’t have Font Awesome equivalents.

    Is there a way I can use a custom SVG as the map pin? Looking through the plugin code maybe there’s a way of hooking in extra items to the geodir_font_awesome_array function?

    Thanks

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Paolo

    (@paoltaia)

    Hi, developers are looking into your request, we’ll get back to you ASAP.

    Thanks for your patience,

    Plugin Author Stiofan

    (@stiofansisland)

    We do have a hook that fires when a new cat image is added but you might be best just skipping that and instead just filtering the actual URL of the term from a simple function where you can set different SVG urls.

    add_filter('geodir_get_cat_icon', '_my_svg_cat_markers', 10, 4);
    function _my_svg_cat_markers($cat_icon, $term_id, $full_path, $default){


    // target full path 
    if($full_path){
        $new_icons = array(
            '123' => 'https://example.com/marker1.svg',
            '234' => 'https://example.com/marker2.svg',
            '345' => 'https://example.com/marker3.svg',
            '456' => 'https://example.com/marker4.svg',
        );
        
        $cat_icon = !empty($new_icons[$term_id]) ? esc_url($new_icons[$term_id]) : $cat_icon;

    }


        return $cat_icon;
    }

    The above is not tested, but should give you an idea of what is needed, just let me know if you need furthter help.

    Thanks,

    Stiofan

    • This reply was modified 1 month, 1 week ago by Stiofan. Reason: submitted too early
    Thread Starter jenrsd

    (@jenrsd)

    Thanks for getting back to me.

    I’ve tried that filter and it partially works. On the place category backend screen I can see the new icons appearing. However, they are not being re-coloured (all are still B&w, but I’ve used the same SVG files for re-colouring elsewhere so they are definitely fillable) and on the map they are appearing as the default icon (have cleared my local cache and the website cache but no changes).

    Plugin Author Paolo

    (@paoltaia)

    Hi @jenrsd,

    please create a support ticket here, so that we can assign it to a developer.

    Thanks,

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.

Tags