topic Re: Gesture on Nexus 7 Table - Chrome Issue in ArcGIS JavaScript Maps SDK Questions

Gesture on Nexus 7 Table - Chrome Issue

GregoryDillon — Thu, 27 Dec 2012 15:30:13 GMT

I just got a new Google Nexus 7 tablet and have been testing my map. This device comes with a default Chrome browser. It does not recognize any of my gestures (pan, pinch, etc) on the map (I using the 3.2 API) in Chrome. I installed FireFox and it works so its not specific to the Nexus 7 table, but rather Chrome. Is there a setting in Chrome or the API to fix this?

Re: Gesture on Nexus 7 Table - Chrome Issue

GregoryDillon — Fri, 28 Dec 2012 22:55:18 GMT

Okay here is an update on this. After removing several layers from the map I discover the gestures started working again. It appears that when you have too many layers the Chrome browser gets to busy to maintain the gestures. I could actually see it get more responsive as layers were removed. This never shows up in the samples because typically they only have 1-3 layers. This is very disturbing! I've tried several alternative browsers and they work, the best being FireFox and Dolphin.

Does anybody have a snippet of Javascript for FireFox's changeorientation event?

Re: Gesture on Nexus 7 Table - Chrome Issue

Anonymous User — Thu, 03 Jan 2013 04:25:07 GMT

Does anybody have a snippet of Javascript for FireFox's changeorientation event?

Hi, are you referring to detecting changes in device orientation?

detecting device orientation

Re: Gesture on Nexus 7 Table - Chrome Issue

GregoryDillon — Tue, 06 Aug 2013 16:05:11 GMT

Yes.   Sorry I'm finally get back to this thread.    I got the orientation to work in Firefox.

Here is my code for anybody interested:

if (MobileDevice == "ANDROID" && MobileDeviceBrowser == "FIREFOX") {
        window.addEventListener("deviceorientation", handleOrientation, true);
    }

function handleOrientation(orientData) {
    var absolute = orientData.absolute;
    var alpha = orientData.alpha;
    var beta = orientData.beta;
    var gamma = orientData.gamma;
    // Do stuff with the new orientation data
    if (screen.width > screen.height) {
        CurrentOrientation = 'Landscape';
    } else {
        CurrentOrientation = 'Portrait';
    }


    if (OldOrientation != CurrentOrientation) {
        RepositionAndResizeMap();
    }

    OldOrientation = CurrentOrientation;
}

function RepositionAndResizeMap() {
    SetWindowOrientation();

    if (MobileDevice == "ANDROID") {

        setTimeout('FixAndroidMenuBar();', 500);
    } else {
        RepositionAndResizeMapPart2();
    }
}

function SetWindowOrientation() {
    if (MobileDevice != "ANDROID" || MobileDeviceBrowser != "FIREFOX") {
        if (window.orientation == 90 || window.orientation == -90) {
            CurrentOrientation = 'Landscape';
        } else {
            CurrentOrientation = 'Portrait';
        }
    }

}

function RepositionAndResizeMapPart2() {

    if (map) {

        var MapDiv = document.getElementById('map');

        MapDiv.style.top = "0px";
        MapDiv.style.left = "0px";
        MapDiv.style.width = "100%";
        MapDiv.style.height = "100%";

        map.reposition();
        TryMapResize();

    }

    AdjustProgressWindow();
}

function TryMapResize() {
    var tbMap = document.getElementById('tbMap');
    if (tbMap.style.display == "none") {
        setTimeout('TryMapResize();', 1000);
    } else {
        map.resize();
        AdjustProgressWindow();
    }
}

function AdjustProgressWindow() {

    var CalcWidth = screen.width;
    var CalcHeight = screen.height;

    if (MobileDevice == "WINDOWS") {
        CalcWidth = typeof window.outerWidth != 'undefined' ? window.outerWidth : document.body.clientWidth;
        CalcHeight = typeof window.outerHeight != 'undefined' ? window.outerHeight : (document.body.clientHeight - 22);

    } else {

        if (CurrentOrientation == 'Landscape') {
            if (CalcWidth < CalcHeight) {
                CalcWidth = screen.height;
                CalcHeight = screen.width;
            }
        } else {
            if (CalcWidth > CalcHeight) {
                CalcWidth = screen.height;
                CalcHeight = screen.width;
            }
        }
    }

    var CenterX = CalcWidth / 2;
    var CenterY = CalcHeight / 2;

    var OffsetY = 170;
    var OffsetX = 120;

    if (CurrentOrientation == 'Landscape') {

        if (MobileDevice == "ANDROID") {
            if (MobileDeviceVersion > "4") {
                OffsetY = 200;
                OffsetX = 230;
            } else {
                OffsetY = 130;
                OffsetX = 60;
            }
        } else if (MobileDevice == "IPOD" || MobileDevice == "IPHONE") {
            OffsetY = 110;
            OffsetX = 75;
        }
    } else {
        if (MobileDevice == "ANDROID") {

            if (MobileDeviceVersion > "4") {
                OffsetY = 320;
                OffsetX = 185;
            } else {
                OffsetY = 170;
                OffsetX = 60;
            }
        } else if (MobileDevice == "IPOD" || MobileDevice == "IPHONE") {
            OffsetY = 110;
            OffsetX = 70;
        }
    }

    var Progress = document.getElementById(ProgressWindow);

    if (Progress != null) {
        Progress.style.top = CenterY - OffsetY + "px";
        Progress.style.left = CenterX - OffsetX + "px";
    }
}

Re: Gesture on Nexus 7 Table - Chrome Issue

GregoryDillon — Tue, 06 Aug 2013 16:10:40 GMT

I have been hoping that Chrome would be fixed this by now on the Nexus 7 (and now they are releasing a new Nexus 7!).    It appears as I mentioned earlier Chrome just can handle alot of layers (ie. Map Web services).

Does anybody have a workaround for this?

Has anybody else seen this behavior?

My site works fine on the FireFox, the native phone browser, Dolphin, basically anything but Chrome on the Nexus 7.    Chrome also fails on my Motorola Razr.   I suspect Chrome on any mobile device fails.   The PC version of Chrome works fine using the mouse (I have not tested on a touch screen).    I also have the site working with IE9 and IE10 on a PC.

Re: Gesture on Nexus 7 Table - Chrome Issue

GregoryDillon — Mon, 20 Jan 2014 18:41:58 GMT

As an update to this thread, sometime in December 2013 Chrome got fixed and can now handle my map.