Show caegory class in wpgmza-modern-marker-listing-marker-view

New home Forums Pro Add-on Troubleshooting Show caegory class in wpgmza-modern-marker-listing-marker-view

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #77572
    alebaio
    Participant

    Hello,
    I’ve made this map here https://www.oxfamitalia.org/net-for-neet/ with a lot of css custom rules to show the map in this way.
    I have a couple of questions:
    1. is it possible to show the category class on “wpgmza-popout-panel” to style the title with the same belonging category colour? I’ve tried some jquery rules but non of that had work.
    2. using the checkbox category filter, is it possible to show only marker selected without uncheck the then one already checked? With the dropdown filter this is the right behavior.

    Please let me know, expecially on point 1.

    Attachments:
    You must be logged in to view attached files.
    #77596
    Matthew
    Moderator

    Hi Alebaio,

    Thank you for getting in touch with us, we do appreciate your time.

    1. Yes this is possible, thus please see the below custom JS code that adds a ‘data-category’ attribute to the title element in each marker listing item:

    jQuery(function($){
      $(document).on( 'markerlistingupdated.wpgmza', function(){
        let maps = WPGMZA.maps;
    
        for(let map of maps){
          let mapId = map.id;
    
          $(<code>.wpgmaps_mlist_row[mapid=&quot;${mapId}&quot;]</code>).each(function(){
            let row = $(this);
      
            let markerId = row.attr('mid');
            let marker = map.getMarkerByID(markerId);
            if(typeof marker != 'undefined' && marker != null){
              let categories = marker.categories;
        
              let titleEl = row.find('.wpgmza_marker_title');
              titleEl.attr('data-category', categories);
            }
          })
        }
      })
    
      $(document).on('click', '.wpgmza-marker-listing-category-filter input[type="checkbox"]', function(event){
        let filter = $('.wpgmza-marker-listing-category-filter');
    
        filter.find('input[type="checkbox"]').each(function(){
          $(this).prop('checked', false);
        })
    
        $(event.currentTarget).prop('checked', true);
      })
    })

    Please may you save the above code into the “Custom JS” setting block (Maps -> Settings -> Advanced Settings), clear your browser cache and confirm if this helps?

    2. Yes this is also possible with some custom JS code which I have included in the above code snippet, thus please do let me know if this helps?

    I look forward to hearing back from you.

    Kindest Regards,
    Matthew

    #77608
    alebaio
    Participant

    Hi Matthew!
    Thanks for your reply.
    point 2 is working fine.
    point 1 it seems to to add the “data-category” attribute to title.
    I’m already using some custom jquery function ad I’ve made a little modifications to your code, otherwise it gave an error.
    This is the code I’ve used
    jQuery(document).on( ‘markerlistingupdated.wpgmza’, function(){
    let maps = WPGMZA.maps;

    for(let map of maps){
    let mapId = map.id;

    jQuery(“.wpgmaps_mlist_row[mapid=’${mapId}’]”).each(function(){
    let row = jQuery(this);

    let markerId = row.attr(‘mid’);
    let marker = map.getMarkerByID(markerId);
    if(typeof marker != ‘undefined’ && marker != null){
    let categories = marker.categories;

    let titleEl = row.find(‘.wpgmza_marker_title’);
    titleEl.attr(‘data-category’, categories);
    }
    })
    }
    })

    jQuery(document).on(‘click’, ‘.wpgmza-marker-listing-category-filter input[type=”checkbox”]’, function(event){
    let filter = jQuery(‘.wpgmza-marker-listing-category-filter’);

    filter.find(‘input[type=”checkbox”]’).each(function(){
    jQuery(this).prop(‘checked’, false);
    })

    jQuery(event.currentTarget).prop(‘checked’, true);
    })

    Could please check here https://www.oxfamitalia.org/net-for-neet/ and let me know.
    regards.

    alessandro

    #77609
    alebaio
    Participant

    Regarding point 1 I meant that the code seemns NOT to add the category data attribute to the title.

    #77610
    alebaio
    Participant

    hello again,
    it seems tha on firefox markers not shown on map. Is this a kwnowed problem? How can I solve it?

    Let me know.
    thanks

    #77633
    alebaio
    Participant

    HI Matthew,
    could ypu please let me know something about my last questions?
    regards.

    alessandro

    #77636
    Matthew
    Moderator

    Hi Alessandro,

    Thank you for your response.

    It appears that the code was escaped after being sent, and thus when you had implemented it, the wrong quotations were used. Thus please may I ask if you may use the code within my following Gist instead as this is the code unescaped: https://gist.github.com/MatthewCodeCabin/1ffa1950133f7ee842663412d5f646f4

    Once this has been done, please do let me know if this helps?

    Kindest Regards,
    Matthew

    #77643
    alebaio
    Participant

    Hi Matthew,
    I’ve tried with the code on on github but is not still working.
    Anyway, this is a secondary problem, it would be better if it works, but the priority is understand why on firefox point not shown on the map.
    Could dou help me?

    #77644
    alebaio
    Participant

    Always me!
    I’ve fixed the problem in firefox, there wans’t no problem actually, I’had just to set the height size on retina image settings too. Previuos I hade oly set the the witdh.

    So, I’m waiting for youi regarding the other question.

    Thansk.
    Alessandro

    #77656
    Matthew
    Moderator

    Hi Alessandro,

    Thank you for your response.

    I am glad to hear that the retina issue has been resolved.

    With regards to the custom code, I have taken a look at your map page and it appears that the code was saved with normal quotes instead of code quotes.

    I have thus edited the code within the Gist (https://gist.github.com/MatthewCodeCabin/1ffa1950133f7ee842663412d5f646f4) to just use normal string concatenation instead of string interpolation to avoid this issue.

    Please may you replace your current code with the updated code in the Gist above, clear your cache and confirm if this helps?

    I look forward to hearing back from you.

    Kindest Regards,
    Matthew

    #77666
    alebaio
    Participant

    Hi Mathew,
    the new code is working now, but I need the data-category attribute also in the marker’s title in container with this class “wpgmza-popout-panel wpgmza-modern-marker-listing-marker-view wpgmza-open”.

    Now the code you pass me add the data-category attribute just in this container class “wpgmza-modern-marker-listing-list-item-container”.

    I hope I was clear!

    Regards.

    Alessandro

    #77673
    Matthew
    Moderator

    Hi there,

    Thank you for your response.

    Please may you try the updated code within the mentioned Gist and confirm if this helps?

    I look forward to hearing back from you.

    Kindest Regards,
    Matthew

    #77684
    alebaio
    Participant

    I Mathew,
    thanks for updated the custom code but unfortunaly it still not working.

    I’ve also cleaned my site cache but that not the problem.

    Regards.
    Alessandro

    #77699
    Matthew
    Moderator

    Hi Alessandro,

    Thank you for your response.

    I have taken a look and it appears that the data-category attribute has been added to the title element within the infowindow panel as per the screenshot: https://drive.google.com/file/d/1w4ppcMwbD_HmEUNAW_F7ekG3pCtH6eqd/view?usp=sharing

    Please may you confirm if this is correct on your end?

    Kindest Regards,
    Matthew

    #77722
    alebaio
    Participant

    I Matthew,
    sorry for the delay. I’ve checked and it seems ok now!
    Thanks a lot!

    Alessandro

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.