This is a a Javascript/JQuery question that is directly related to the ArcGIS Javascript API…
I have a map div created using a 'data' tag in HTML, which becomes visible on a button click.
(I'll call the map the 'child' and main page the 'parent' although I am not sure that is technically correct in this case?)
I would like to force a resize of the map when a 'fullscreen' button is clicked in the parent page. Generally the map resizes on its own but sometimes it does not…
How can I do this? I did not create a new window with 'window.open' …
My HTML for the child window is:
<div style='width:100%; height:100%'><object type="text/html" style='width:100%; height:100%' data='mapPage.html'>
..and the JS for the fullscreen button :
mapFullscreen.click(function () {
window.child.map.refresh(); // this doesnt seem to do anything
$(mapContainer).animate({
"height": $(window).outerHeight(),
"width": $(window).outerWidth(),
"top": 0,
"left": 0
}, 300, function(){
$(".map-fullscreen").fadeOut();
});
});
Thanks!
Best Answer
You need to call the resize() method on the map object if you change the size of the map div in javascript.