Full map not loading

  • Hello,

    Firstly, thanks a lot for your plugin. You’re doing an awesome job!

    I’ve got a problem with the map loading on my website. The full map isn’t loading, only part of it (see here).

    Before posting this, I’ve had a look around other support tickets opened here and discussions on Stack Overflow (like this one) and noticed that many others had this problem.

    On Stack Overflow there’s a solution to run map.invalidateSize() when the page layout is stable. I’ve noticed someone else also open a ticket here asking you where to put that code (see here), but your answer isn’t clear enough for me. I still don’t understand where to put the code.

    A bit more context. Our website is running MyListing theme and the syntax we’re using for the map to appear is this one. At the moment we don’t have any caching plugins or anything else that could interfere and cause this issue.

    I’d really appreciate some help with this.

    Thanks in advance!

    P.S.: Sometimes the whole map is loaded, so maybe when you try, it will be loaded. Try loading a few times, or other pages.

    The page I need help with: [log in to see the link]

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

  • I have the exact same problem on https://www.ebsnet.de .

    Loading the page with caching disabled (either via the developer tools or using CTRL+F5) helps to reproduce the issue.

    Resizing the browser window triggers a redraw and the map will be rendered correctly.

    I’d love some pointers on how to execute invalidateSize() on map created using this plugin.

    Thread Starter Vlad.C

    (@vladc-1)

    Not sure this plugin is still supported. It’s been a month and a half since I asked the question.. A shame.

    Plugin Author bozdoz

    (@bozdoz)

    The solution here lies in the FAQ on github:

    https://github.com/bozdoz/wp-plugin-leaflet-map#how-can-i-add-another-leaflet-plugin

    The title is How Can I Add Another Leaflet Plugin, but really it’s How Can I Execute Any Arbitrary JavaScript.

    So, just guessing here, but you should be able to add this to your functions.php:

    add_action('leaflet_map_loaded', 'custom_leaflet_loaded');
function custom_leaflet_loaded() {
  // custom js
  wp_enqueue_script('custom_leaflet', get_theme_file_uri( '/js/custom-leaflet.js' ), Array(), '1.0', true);
}

    and your /js/custom-leaflet.js file should have something like this:

    
(function () {
  function main() {
    if (!window.WPLeafletMapPlugin) {
      console.log('no plugin found!');
      return;
    }

    function invalidateMaps() {
      var maps = window.WPLeafletMapPlugin.maps;
      
      for (var i = 0, len = maps.length; i < len; i++) {
        var map = maps[i];
        map.whenReady(function () {
          this.addControl(new L.Control.Fullscreen());
        });
      }
    }

    invalidateMaps();

    window.addEventListener('resize', invalidateMaps);
  }

  window.addEventListener('load', main);
})();

    Hope that helps.

    Thanks for your reply.

    While this helps in that I now got a reference to every map created by the plugin, calling this.invalidateSize(); inside the whenReady callback does not seem to fix the issue at hand…

    Thread Starter Vlad.C

    (@vladc-1)

    Thank you for your answer, @bozdoz. I really do appreciate it.

    The above code only solved the issue for Chrome. The maps are still not loading correctly in Firefox, Opera & Edge.

    Why is that?

    Plugin Author bozdoz

    (@bozdoz)

    Not sure. I’ve heard a couple of claims that it doesn’t work in Safari, but I don’t think I’ve been able to reproduce it. Also, I only test in firefox, so ideally it ought to at least work in Firefox.

    For now, we worked around it by setting the map witdh to 150%. This way, the tiles that cannot be loaded are outside the visible screen. The map marker is not in the center now, but it’s a compromise…

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Full map not loading’ is closed to new replies.