[World Map] World map image zooms out whenever I open a popup

[World Map] World map image zooms out whenever I open a popup

  
Forge Component
(4)
Published on 2015-07-30 by Gonçalo Borrêga
4 votes
Published on 2015-07-30 by Gonçalo Borrêga

Hi

I've successfully implemented the widget on the page and it works really well.  I've placed in a webblock which is displayed within a tab.    I uses popup editors for my data input.  WHen I close the popup and return to the world map tab, the image size is reduced and only visible in the upper left corner.  See attached image.

How do I prevent this from happening ?



Solution

Hi Bilal,

Before anything else make sure you're Ajax Refreshing the map after the source data is changed. If that is not enough, that's probably happening because when the map is being rendered the actual size of the container is not known yet (e.g. the tab content is not visible, so the map thinks the full width/height cannot be used)

To solve that, here are a few options (depending on your logic some may apply differently):

If you can load the tab on demand

Use the Tab's property LoadOnClick - Set it to True. This will make the contents of the Tab (in this case the map) only render once the tab is clicked (so the browser already knows the size of the inner container). If you set it to true nothing else should be required.


If there's other logic (e.g. your map is inside an If)

The map has a javascript function that allows recalculating its own size, after the rendering logic is finished. You can call it in javascript as mapObject.updateSize()

Ensure that you call the updateSize function on the map. Some examples on how to do this:

1. Add the following as an unexcaped expression on the page 

"<script type='text/javascript'>
$(function(){
    $('.Tabs__tab').click(function(){ 
        if( typeof(mapObject) != 'undefined') mapObject.updateSize();
    });
});
</script>"

This will register an event handler for each Tab so that when you change tab the mapObject is resized

2. Manually run the javascript when you need it

For example, when closing the modal, add also a "RunJavaScript" action (you can get it by referencing the HTTPRequestHandler extension). In the RunJavaScript parameter add the following

if( typeof(mapObject) != 'undefined') mapObject.updateSize();

This will update the size of the map right after your logic


Attached a small working example - you can test it at https://borrega.outsystemscloud.com/TestMap

Hope this helps.

Solution

Thanks Goncalo

I'm on version 9 and using the RichWidgets tabs.  I used your reasoning and resolved the issue by refreshing the container with the map on Tab Activation.  


Regards

Bilal