Leaflet folder is no longer loaded?

Tangible Blocks
1

I had a leaflet folder whose markers were dynamically loaded from Custom Post types. This morning I discovered that, totally out of the blue, the map no longer loads and only displays a list of marker data. What could have happened?

My code for the template is:

<div class="">

[leaflet-map address="Elst, Nederland" height="350px" fitbounds dragging scrollwheel]
  
  <Loop type=Locaties>
    [leaflet-marker address="<Field adres />, <Field plaats />" iconUrl="/wp-content/uploads/2023/01/voetencentrum-flipse-marker-40x60-4.png"] 
    
    <div class="locaties__kaart__popup--card">
      
      <If field=aanduiding_pand><Field aanduiding_pand /></If>
   <span> <Field adres />
  <Field postcode /> <Field plaats /></span>
      
      <If field=tip_bereikbaarheid >
        <Field tip_bereikbaarheid />
      </If>
    <div class="kaart-locaties__popup--button"><a href="{Field url}">Bekijk onze locatie <Field title /></a>  </div>
      </div>
      [/leaflet-marker]
  </Loop>


  </div>

In the inspector, I see no errors or issues. Here you can see the situation in the staging environment.

2

Hi Ita,
There was a patch that removed support for shortcodes in the L&L editor without use of the <Shortcode> tag. I’m not sure how the tag will interact with your wrapping shortcode, but could you try wrapping both the opening and closing tag with the shortcode tag like so:

<Shortcode>[leaflet-marker address="<Field adres />, <Field plaats />" iconUrl="/wp-content/uploads/2023/01/voetencentrum-flipse-marker-40x60-4.png"]</Shortcode>

<Shortcode>[/leaflet-marker]</Shortcode>
3

To clarify, the fact that shortcodes previously worked was actually a bug and the official method has always been to use the shortcode tag, it just happened to work without them as a fluke due to how WordPress was trying to run shortcodes everywhere even where it shouldn’t.
That behavior caused a lot of other problems (like L&L not working properly in FSE) that mean we can’t re-introduce the ability to run shortcodes outside of designated tags in the future.
Sorry if the change caused an inconvenience here!

1 Like
4

Hi Julia,

Thanks for your response!!! You are awesome!!! I tried it right away and now have the map with the markers visible again!!!

Only there remains a list below the map, with data that was originally in a pop-up (visible after hover the marker). I did put shortcode tags around it, but it doesn’t work here. Do you perhaps know the solution for this as well?

Cheers,
Ita

5

Hi Gabriel,

Thanks for your clarification! I was never aware that I would have to use shortcode tags. I’ll be updating my other project with markers on a leaflet card right away…!

Cheers,
Ita

6

Hi Ita,
I think I’d need a bit more context to help fix this. If you want to PM me with a link to the page or login credentials (or if not, a copy of your template code), I can take a look and try to help :slight_smile:

7

Hi Julia,

I just sent you a message; did you receive it? Many thanks in advance!!!

Cheers,
Ita

8

Fixed it! It seems like I should have suggested that you wrap the wrapping shortcode from start to end tag in a single <Shortcode> tag :slight_smile:

For future reference, here is the working version of the template:

<div class="">

  <Shortcode>[leaflet-map address="Elst, Nederland" height="350px" fitbounds dragging scrollwheel]</Shortcode>

  <Loop type=Locaties>
    <Shortcode>
    [leaflet-marker address="<Field adres />, <Field plaats />" iconUrl="/wp-content/uploads/2023/01/voetencentrum-flipse-marker-40x60-4.png"] 

    <div class="locaties__kaart__popup--card">

      <If field=aanduiding_pand><Field aanduiding_pand /></If>
      <span> <Field adres />
        <Field postcode /> <Field plaats /></span>

      <If field=tip_bereikbaarheid >
        <Field tip_bereikbaarheid />
      </If>
      <div class="kaart-locaties__popup--button"><a href="{Field url}">Bekijk onze locatie <Field title /></a>  </div>
    </div>
    [/leaflet-marker]
    </Shortcode>
  </Loop>


</div>

Glad I could help!

9

Hi Julia!

I am immensely grateful for your help! I never for 1 moment had the idea that I should use a shortcode tag. And indeed, based on your first response, I thought the tags should be around each individual element (that didn’t make it any clearer, :crazy_face:)

But just to be sure, so from now on I should start using that shortcode tag with all Tangible templates, at the beginning + end?

I’m going to change my other templates (also within my other project) right away too!

Have a wonderful day!
Ita

10

If you’re running shortcodes, the shortcodes should be wrapped in the tag, if it’s a wrapping shortcode, the entire section wrapped in those shortcodes should be enclosed in a shortcode tag so:

<Shortcode>[my-shortcode]</Shortcode>

and

<Shortcode>
  [my-wrapping-shortcode]
    ...
  [/my-wrapping-shortcode]
</Shortcode>
1 Like
11

Hi Julia,

Thank you! I’ll play around with the tags in other templates.

Have a nice weekend!
Ita

1 Like