Support » Plugin: RVM - Responsive Vector Maps » Map shows only after resize

  • Hello,

    thank you for the great plugin. Amazing usefulness and saves a lot of work.

    I ran into an issue and hope that you can help me with it. I am using Elementor page builder for my website and for the most part everything works with the maps. However, when I insert a map into the Elementor tab widget, it’s not working properly.

    You can see what I mean here: https://naturhausmittel.de/organspende-statistik-deutschland-europa/organspende-infografik

    The maps are not shown, but as soon as I resize the window or switch into developer tools (which essentially resizes too) the map is displayed correctly!

    I tried some different things:
    Tab #1 contains a map of Germany with no width setting
    Tab #2 contains a map of Europe with the Map Width setting set to 350px. It shows the canvas in the right size but the map itself is very small.

    Can you help?

    Best Regards

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

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author Enrico Urbinati

    (@enrico-urbinati)

    Hi Wondering,

    thanks for contacting me!
    I think Elementor uses ajax to load pages and the javascript managing the map dimensions (depending on content) are delayed some how (in fact they are loaded second time).

    I’ve already faced such similar issue, now let’s see if is the same case of Elementor (or could be your theme).
    May I ask you to do this test for me?

    Open rvm_shortcode.php, go to raw 466 where you should find:

    if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
                                                   $output .= '}); $("#' . $rvm_selected_map . '-map-' . $map_id . '").css( "background" , "none"  ); },5000);' ;
                                                   //$output .= '});});});';
                                       }

    this function delay the rendering of the map of 5 sec (5000ms): try to increase that value progressively and see if it works!

    Just let me know, please.
    And good luck.

    Hello Enrico,

    Thank you for your reply. I ran the test, but with no luck. I increased the delay to 7000, 16000, 25000 and 1000000 ms.

    However, for me the code is on line 416 and not 466. Was that a typo, or do I have a different file?

    I also tried decreasing the value incrementally to 4000. For every test value I deactivated the RVM plugin before editing the php-file just to be sure.

    The test was run on another WordPress installation with the default Twenty Seventeen theme and with only Elementor and RVM as installed plugins. It shows the same behaviour, with the map showing after resizing the browser window.

    When I set a fixed width for the map (like in Tab #2) the map is loaded, it is just not sized properly. I am not a very technical person, so I assumed it might have to do with the responsiveness/sizing. Also, when I set Map Padding in the settings, it seems to load the map, but only a little fraction is visible. I added a new map in Tab #3 for you to see.

    I have also done some research and found some solutions dealing more in the resizing direction. But I dont know if they are applicable here or where I would edit the code:
    https://github.com/zurb/twentytwenty/issues/31
    http://help.dimsemenov.com/discussions/royalslider-wordpress/2751-slider-do-not-display-correctly-until-i-resize-browser-window
    Specific for Elementor Tabs: https://wordpress.org/support/topic/not-showing-in-elementor-tabs/

    Elementor support gave me an answer on this issue with a screenshot with DevTools with the following message: “I checked your page and I could see that on page load, the map (svg) has initial width and height of 100 which is why it does not appear until resized. I’m afraid you would need to contact the plugin developer to report and address the issue since we do not have control over the codes behind their shortcode.”

    If you have any other clues on how to resolve this, I would really appreciate it.

    Best regards

    Plugin Author Enrico Urbinati

    (@enrico-urbinati)

    Hi Wandering,

    thanks for checking.
    Can you please try giving a 100% to map width?

    Yes, I tried this before posting too.

    The result is similar as when setting a set width. You can view it under the new tab 4 on my page.

    Please let me know if there is more tests I can do or information I can send you.
    The tab feature is also included in the free version of Elementor, in case you want to run tests yourself.

    Plugin Author Enrico Urbinati

    (@enrico-urbinati)

    Hi Wondering,

    sorry but for the moment I have so fats solution for this. The easiest yet not elegant solution would be reloading the page once loaded, in order to have the map with correct sizes.

    This would be a temporary solution till you or me succeed in finding a proper solution!

    Hi Enrico,

    that’s a shame. Can you explain a bit more what you think the problem is that causes this behaviour? Maybe then I can find a solution, but right now I don’t know where to look and what else to try.

    Reloading the page does not help, as it reverts back to the same view. Only resizing solves the problem. Is there a way I could insert some code, that resizes the map automatically after loading the page?

    I could ask another programmer to have a look, but it’s cheaper to buy a different premium plugin. I like the functionality of RVM and the pricing model with the maps I can buy. Since I am looking to create many maps in the future I would like to have a one-fits all solution.

Viewing 6 replies - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.