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.