I am a bit puzzled here. I have to below code for my Map.
If I make the browser about half my screen and refresh everything is fine.
If I set the browser to Max size or manually make the browser window larger, the map does not expand to the full browser size?
I thought the below would take care of that.
Is there something else that I need to add.
app.map = new esri.Map("map", {
center: [-77.4329, 37.5410],
zoom: 7,
slider: true,
showAttribution:true,
logo: false,
autoResize: true
});
Solved! Go to Solution.
Jay,
OK Sorry I do see the issue when I have the browser started at a reduced size. I have run into this in the past and here is my workaround:
function adjustMapHeight() {
var availHeight = $(window).height() - 40; //adjust for the header
dom.byId("map").style.height = availHeight + "px";
}
function resizeMap() {
adjustMapHeight();
app.map.resize();
app.map.reposition();
}
resizeEvt = (window.onorientationchange !== undefined && !has('android')) ? "orientationchange" : "resize";
on(window, resizeEvt, resizeMap);
Jay,
Is your map inside a layout dijit?
This is how the HTML is set up
<div id="map" class="map" style="width: 100%; height: 100%;">
<div id="HomeButton"></div>
</div>
Jay,
There must be something else in your code or css that is interfering with the maps resize. Can you post more of your code?
REMOVED as the problem was found below and to safe space in the post this was not needed.
Jay,
I don't see that issue when using your link...
Very interesting....I tested in Chrome and Firefox....when I expand the browser window It does not fully redraw....
hmmmm....it does not do this for you?
Jay,
OK Sorry I do see the issue when I have the browser started at a reduced size. I have run into this in the past and here is my workaround:
function adjustMapHeight() {
var availHeight = $(window).height() - 40; //adjust for the header
dom.byId("map").style.height = availHeight + "px";
}
function resizeMap() {
adjustMapHeight();
app.map.resize();
app.map.reposition();
}
resizeEvt = (window.onorientationchange !== undefined && !has('android')) ? "orientationchange" : "resize";
on(window, resizeEvt, resizeMap);
MODIFICATION.......brb going to test....
Thanks
Jay,
They are fired when the browser window is resized or the orientation is changed (for mobile). I put these in your app and it worked