Display map on action

Resolved sjusjak
(@sjusjak)

4 years, 5 months ago

Hello.

I am facing an issue. Let’s say that due to the business logic there is a scenario in which Traveler’s Map at the time of the loading is under invisible div (display: none). In such case it usually loads bugged (once it becomes visible) and user is not able to use it at all – it looks like only two left top tiles are loaded (like 1/16 of full map), as shown on the screenshot:

View post on imgur.com

To overcome this problem and also in the attempt of increasing speed load, I was trying to load shortcode on certain action but it didn’t work (with some jquery + php + do_shortcode function). I mean the function itself seemed to work fine as it returned the result of do_shortcode(‘[travelers-map]’) and was adding it to certain div but the map wasn’t interactive at all. I am not so familiar with PHP and I am afraid I am doing something wrong, maybe due to echoing do_shortcode result and then adding static code to div.

Anyways, is there any possibility of kinda refreshing, reloading the map at click of button for example with jquery?

Viewing 2 replies - 1 through 2 (of 2 total)

Plugin Author Camille V
(@socrapop)

4 years, 5 months ago
Dear @sjusjak,

This is a known Leaflet “issue” (I don’t think they plan to fix this).
On initialisation, Leaflet maps are calculating their own container size, so the tiles are loaded in that container size.

The size is not refreshed automatically by Leaflet on a container programatical resizing or on a div appearing with CSS. It’s only refreshed on window resizing (if you shrink your browser window or change orientation on a smartphone)

To refresh programatically, you need to call in javascript map.invalidateSize(), map being your leaflet map object.

You can find here how to interact with the Travelers Map objects: https://camilles-travels.com/get-started-with-travelers-map-wordpress-plugin/#dev-documentation

So in your case, if you want to bind a code to the event that removes display:none on the map container, you can use:
```
// cttm_map is an array of all the maps included in the page, so we loop through each.
  for (let i = 0; i < cttm_map.length; i++) {
    //You can now interact with the map object.
    cttm_map[i].invalidateSize();
  }
}, false);
```
As for loading Travelers’ Map via an Ajax call, I have not written code to do that and I think it might need some custom development to implement. The markers are loaded via “wp_localize_script” which is loaded on page load I think (I’m not sure of anything right now, I did not test anything ^^’)
Thread Starter sjusjak
(@sjusjak)

4 years, 5 months ago

@socrapop Thank you very much for quick response. It works like a charm 😉 Simple, yet the desired effect was accomplished.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Display map on action’ is closed to new replies.