[Support request] Leaflet maps > rendering problem > help with code injection

Home Forums Support [Support request] Leaflet maps > rendering problem > help with code injection

Home Forums Support Leaflet maps > rendering problem > help with code injection

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #368692
    Christian

    Dear Generatepress Support Team,

    I am using Visual Composer pagebuilder Tour (=Tabs) elements all over my website https://zenhub.org
    Inside those Tour elements I have a content tab (called “Location”) containing maps stemming from a plugin “MapsMarker Pro”.
    On opening the respective “Location” Tab, the maps do not render completely. The map container inside the tab thinks it’s smaller than it actually is at the point the map loads, so the map will only cover that area (example page: https://zenhub.org/genealogy/catherine-genno-pages-roshi/ here the tab “Location”).
    The size is checked every time the map is moved, which is why it works once you drag the map a little bit. The MapsMarker plugin developer provided the following Javascript code to fix this behaviour by manually forcing a size check by using the MapsMarker Pro JS API. The code should be added to the onclick or onload event for the tab:

    The MapsMarker plugin developer provided the following Javascript code to fix this behaviour by manually forcing a size check by using the MapsMarker Pro JS API. The code should be added to the onclick or onload event for the tab:

    MMP.maps.toAll(function(map){
    map.invalidateSize();
    });

    The Visual Composer Support gave the following feedback on the correct function:

    The onclick event for the tour can be written as:

    document.ClassName(“vc_tta-tab”).onclick = function() {myFunction()};
    function myFunction() {
    /Put the custom code from the plugin developer here/
    }

    This code should be added via the theme or child theme into the js file which is loaded by the theme on the page.

    Thus the complete code translates into:

    document.ClassName(“vc_tta-tab”).onclick = function() {myFunction()};
    function myFunction() {
    MMP.maps.toAll(function(map){
    map.invalidateSize();
    });
    }

    I tried to add the code as inside a normal text container, I tried the Generate Hooks – until I completely broke the site (no problem, was completely backuped) – however, I am stuck:

    Can you help me out how and where to place this code snippet in order to make the maps inside the tabs container render completely?

    Thank you for your consideration, Best, Chris

    #368854
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Try adding it inside the wp_footer hook in GP Hooks, but inside script tags:

    <script>
       JS in here
    </script>
    #375453
    Christian

    Hi Tom,

    meanwhile I added the code in the wp_footer hook as the following code snippet:

    <script>
    document.ClassName(“vc_tta-tab”).onclick = function() {myFunction()};
    function myFunction() {
    MMP.maps.toAll(function(map){
    map.invalidateSize();
    });
    }
    </script>

    However following all advice does not bring up a change in the incomplete rendering of the map on first opening of the tab.

    So my question is: do you consider the above code snippet a valid or reasonable code snippet? At least my code editor does not find a syntax error…
    Maybe you have any suggestion or advice for me to get to render the maps complete anyway?

    I am very grateful for your consideration,

    Best,
    Chris

    #375764
    Tom
    Lead Developer
    Lead Developer

    The actual JS looks good, however I’m not familiar enough with how the maps are built to know if it would do something or not.

    Have you checked with their developers at all?

    #375800
    Christian

    Tom, thank you for your feedback.
    Yes, I have checked – and am checking again – with the developer of the maps plugin and Visual Composer as well.
    I wanted to make sure I followed your advice closely so I know the problem is not me putting the code snippet with wrong tags or in the wrong location.
    This issue is kind of tricky since two plugins are involved – and the right location inside the GeneratePress theme.
    Thank you for all your help – I’m so happy with GeneratePress…
    Best,
    Chris

    #376198
    Tom
    Lead Developer
    Lead Developer

    No problem at all – let me know if you need anything else from me.

    Glad you’re enjoying GP 🙂

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