topic Re: Resize brower window on mobile app in ArcGIS JavaScript Maps SDK Questions

Resize brower window on mobile app

MayJeff — Tue, 06 Jan 2015 19:40:34 GMT

I try to perform a query search and click on the "view map" to zoom to specific parcel on the map. Everything works fine until you click the "Result button" back to query results list and resize the browser window then try to click on "View Map" again. The map totally shows blank.

Here is my jsfiddle:

Edit fiddle - JSFiddle

Hope someone can give me some ideas.

Thank you.

Re: Resize brower window on mobile app

ChrisSergent — Tue, 06 Jan 2015 20:11:38 GMT

Not sure but if you click on result again and then click map again, the map draws. So, it appears to affect just the first attempt.

Re: Resize brower window on mobile app

MayJeff — Tue, 06 Jan 2015 20:37:42 GMT

Actually it happen every times you resize the browser window on query results list then click the "View Map" button. If you click "Result button" and not resize browser window then able to see a polygon on the map when click "View Map" button.

Really don't know how to fit this. Need Help!

Re: Resize brower window on mobile app

KellyHutchins — Sat, 11 Dec 2021 16:29:09 GMT

The reason this is happening is because its attempting to resize the map when its not visible which causes display issues. To resolve this I made two modifications to your source code. The first was to set the autoResize constructor option for the map to false to prevent the map from trying to resize itself each time the browser size changes.

            map = new esri.Map("map", {
                          basemap: "streets",
                          center: center,
                          zoom: zoom,
                          autoResize:false
                        });

The second update was to add logic to resizeMap to prevent it from trying to resize the map when the map view isn't visible. Here I check the display value and if its equal to none I exit resizeMap without modifying the map height.

  function resizeMap() {
                      //only resize when map view is visible
                      var selected = domStyle.get(dom.byId("mapView"),"display");
                      if(selected === "none"){
                        return;
                      }
                        mobile.hideAddressBar();
                        adjustMapHeight();
                        map.resize();
                        map.reposition();
                    }

Here's a revised version of your code showing those updates.

Mobile Map

Re: Resize brower window on mobile app

MayJeff — Tue, 06 Jan 2015 21:31:54 GMT

Thank you very much for your help.