Why do I have to reload the page to display the map correctly?

Question

I asked this question already here, unfortunately the problem could not be solved, so I ask here :)

I've got a JQM page in which I show a map. Stupidly, to show the map correctly, I have to reload the page.

This is how the map gets displayed on the first load of the page: Site before reload

And this is how it gets displayed after refreshing the page: Site before reload

Here is my code:

var map;
    require([
                "esri/map",
                "dojo/dom",
                "esri/layers/ArcGISTiledMapServiceLayer",
                "dojo/domReady!"
            ],
            function (Map, dom, Tiled) {
                map = new Map("map", {
                    logo: false,
                    minZoom: 1,
                    maxZoom: 11
                });
                var luftbild = new Tiled(URL);
                map.addLayer(luftbild);
    });

And this is how I style the map:

<style>
    html, body, #map {
        padding: 0;
        margin: 0;
        height: 100%;
    }
</style>

And how I display it:

<div data-role="page" style="background-color:red" ...>
    <!--Header-->
        ....
    <!--/Header-->
    <!--Content-->
        <div id="map">
        </div>
    <!--/Content-->
</div>

EDIT:

After putting this code of line:

$(document).on("pageshow","#page",function(){ // initialize map and show
});

the Map looks like this now: enter image description here

Is it possible to set the width and height to 100%?

If you go directly to the link where the map is will it show correctly without reloading? You may also look at this answer and see if it helps http://stackoverflow.com/a/17676873/2220391 — Spokey, Oct 16 '14 at 12:06
You need to initialize map on `pagecontainershow` event, when page is fully visible. You may also need to adjust map's height based on viewport's height or any other preference. `height: 100%;` won't work the way you want. http://stackoverflow.com/a/22001257/1771795 — Omar, Oct 16 '14 at 12:41

score 3 · Accepted Answer · answered Oct 16 '14 at 12:42

Map needs a canvas with defined width and height. In Jquery mobile handles pages differently than normal html pages. i.e. one page (i.e. div with data-role=page) is visible at a time, others are not. So initializing map on any page should be done with jquery mobile specific page event called pageshow

$(document).on("pageshow","#page",function(){ // initialize map and show
});

Why do I have to reload the page to display the map correctly?

1 Answers1