Base map disappears after rotating/changing orientation

[WolframHaus]

For a better understanding of the issue:
Open this sample: http://help.arcgis.com/en/webapi/javascript/arcgis/samples/mobile_citizenrequest/ in web developers 'responsive design view' of firefox. Use a portrait view, click 'Add' and rotate to landscape view. After that click one of the feature types to get back to the map. But the base map has disappeared!

What's the reason for that? Has anyone an idea?

You can also check this sample on your phone or pad which results in the same problem.

Thanks for any suggestions.

Wolfram

[WolframHaus · Accepted solution]

After a detailed search I found this thread which suggest some solutions:

http://forums.arcgis.com/threads/82287-Hiding-the-map-problems-with-building-a-mobile-application-wi...

Kelly Hutchins (esri) wrote there:

The underlying problem is something we'll provide a solution for at the next release. To fix this issue for now - as others have noted- you should be able to workaround this by setting autoResize to false when you create the map. Once you do this you'll have to do the work of resizing the map when the browser resizes.

I tested the workaround and that works for now with /jsapi/arcgis/3.5/

[KristofferStenersen]

I'm running my map in a jquery mobile tabbed application, and I got into the same situation: My base map gone, and the map's size was reset to 0 when upgrading from 2.8 to 3.5:

I made a small case to repro my issue http://codeviewer.org/view/code:33ce

1) Go to tab 2
2) Go back to tab 1 - map is ok
3) Go to tab 2 - type something in input text box
4) Voila - map is dead.

Confusion level: Extreme.

Disable autoResize was a shot in the blind, but it worked.

[AshishArora]

I'm running my map in a jquery mobile tabbed application, and I got into the same situation: My base map gone, and the map's size was reset to 0 when upgrading from 2.8 to 3.5:

I made a small case to repro my issue http://codeviewer.org/view/code:33ce

1) Go to tab 2
2) Go back to tab 1 - map is ok
3) Go to tab 2 - type something in input text box
4) Voila - map is dead.

Confusion level: Extreme.

Disable autoResize was a shot in the blind, but it worked.

I was facing this issue from last three months. First i observed this behavior with input text box then instead of using ArcGIS JS API 3.4, i used 2.8 and this problem gone.

After few days, i observed that if on mobile device, your current page is other than the map page and as soon as you rotate your device, you map width and height becomes 0 and when you return to the map page again, you only see a blank instead of map.

few guys on this forum suggested to inject width and height to map DIV after setting autoresize to false and set map extent again but what if you have some graphics also placed on map. This doesn't worked at all for me.

Temporary Solution still under testing:

I upgraded to ArcGIS JS API 3.5, Set autoresize to false during map initialization and onOrientation changed event check if the current Page or view is map then only fire map.resize. This way i am able to preserve the height and width of my map and so far it's working and i can navigate between pages or views

Hope no more map surprises 🙂

[KristofferStenersen]

I forgot to note, that the browsers I was able to repro this on was Safari and Chrome on iPhone 4 (6.1.3).