Okay
  Public Ticket #2419405
category squared icons
Closed

Comments

  •  2
    laboulbene started the conversation
    May 27, 2020 at 6:16pm

    Hi,

    is there a way to replace on the map view, the squared icons for categories by a png icon ?

    it is essential for me to get custom icons for categories.

    Thanks by advance

    Ludovic

  •  783
    Zhivko replied
    May 28, 2020 at 9:41am

    Hi,

    It's possible via filter.

    Place the code in your theme functions.php file:

    add_action('wp_footer', function() {
        ?>
        <script type="text/javascript">
            (function($){
                
                if (typeof $.stecExtend === 'undefined') {
                    return;
                }
                
                $.stecExtend(function(m){
                    m.$instance.on('stecMapMarkerIcon', function(e, data){
                    
                    // Custom map icon image
                        var image = 'http://...'; 

                        data.temp.stecMapMarkerIcon = image;
                    });
                });
                
            })(window.jQuery);
        </script>
        <?php
    });

    Make sure to enter correct url to your png image.

    Stachethemes Developer

  •  2
    laboulbene replied
    May 28, 2020 at 1:14pm

    Works fine, thank you very much :-)

    It seems that code replace the square for categories by the desired image.

    Is there a way to duplicate a part of that code to have the ability tu setup a personal image for each category using category #id for example ?

    Thanks in advance,

    Ludovic

  •  783
    Zhivko replied
    May 28, 2020 at 1:22pm

    Yes, via switch.

    add_action('wp_footer', function() {
        ?>
        <script type="text/javascript">
            (function ($) {
            if (typeof $.stecExtend === 'undefined') {
                    return;
                }
            $.stecExtend(function (m) {
                    m.$instance.on('stecMapMarkerIcon', function (e, data) {
                    var image = 'http://...'; // default image

                        var firstCategoryId = data.event.category.length > 0 ? data.event.category[0].id : false;
                    switch (firstCategoryId) {
                            
                            case 20:
                            image = 'http://...'; // image for category id # 20
                            break;
                                
                            case 19:
                            image = 'http://...'; // image for category id # 19
                            break;
                    }
                    data.temp.stecMapMarkerIcon = image;
                    });
                });
        })(window.jQuery);
        </script>
        <?php
    });


    Stachethemes Developer

  •  2
    laboulbene replied
    May 28, 2020 at 1:52pm

    It is awesome ! thank you very much :-)

    have very nice day.

    Ludovic