Map Panning Not Working - javascript api 3.28

TimSkinner · ‎07-02-2019

I am attempting to upgrade my map application from javascript api version 3.18 to 3.28. Everything works fine except that the mouse panning no longer works on my laptop in Chrome (75.0.3770.100 64bit) or IE11 (11.3024.14393.0 update version 11.0.130 KB4503259). I have checked the examples and tried disabling various things on the map but I can't find what I am doing wrong - could someone take a look at my code and see if they can spot the error/issue?

My map page:

<!DOCTYPE html>
<html lang="en-gb">
<head id="Head1" runat="server">
<title>My Map</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge, IE=11, IE=10, IE=9, IE=8, IE=7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="mobile-web-app-capable" content="yes">
<meta charset="UTF-8" />

<link rel="stylesheet" href="https://js.arcgis.com/3.28compact/esri/css/esri.css">
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.14.0/dojox/mobile/deviceTheme.js"></script>
<link rel="stylesheet" type="text/css" href="https://developers.arcgis.com/javascript/3/jsapi/css/esri/dijit/css/PopupMobile.css" />
<link rel="stylesheet" type="text/css" href="https://community.esri.com/css/MobileMap.css" />
</head>
<body>
<div id="uxMapView" data-dojo-type="dojox/mobile/View" data-dojo-props="selected: true">
<div id="uxMapHeading" data-dojo-type="dojox/mobile/Heading" data-dojo-props="fixed:'top'" style="visibility:hidden;"></div>
<div id="uxMapContentPaneDiv" data-dojo-type="dojox/mobile/ContentPane">
<div id="uxMapXYDiv" data-dojo-type="dojox/mobile/RoundRect" class="MapTopDiv MapXYDiv MapHidden MapText">
<div class="MapTopDivTitle">x,y:</div>
<div class="MapTopDivValue">
<label class="MapTextBold" id="uxMapXYLabel"></label>
</div>
</div>
<div class="MapClear"></div>
<div id="uxMapDragDiv" data-dojo-type="dojox/mobile/RoundRect" class="MapHidden MapBottomDiv">
<p class="MapPara">If you can't see the whole popup window, drag the map.</p>
</div>
<div id="uxBasemapGalleryParentDiv" data-dojo-type="dojox/mobile/RoundRect" class="MapHidden MapMenuDiv">
<div class="MapText" id="uxBasemapGalleryHeading" data-dojo-type="dojox/mobile/Heading">
<h2 class="MapHeader">Switch Basemap:</h2>
<div id="uxBasemapGalleryCloseButton" data-dojo-type="dojox/mobile/ToolBarButton" class="MapRight"
onclick="c_HideDiv('uxBasemapGalleryParentDiv');" title="Close Basemaps">Close</div>
</div>
<div class="MapClear"></div>
<div id="uxBasemapGalleryScrollablePane" data-dojo-type="dojox/mobile/ScrollablePane"
data-dojo-props="height:'0px', fadeScrollBar:false, scrollBar:true, scrollDir:'v', scrollType:0">
<div id="uxBasemapGallery"></div>
</div>
</div>
<div id="uxDrawParentDiv" data-dojo-type="dojox/mobile/RoundRect" class="MapHidden MapMenuDiv">
<div class="MapText" id="uxDrawHeading" data-dojo-type="dojox/mobile/Heading">
<h2 class="MapHeader">Drawing Tools:</h2>
<div id="uxDrawCloseButton" data-dojo-type="dojox/mobile/ToolBarButton" class="MapRight"
onclick="c_HideDiv('uxDrawParentDiv');" title="Close Drawing Tools">Close</div>
</div>
<div class="MapClear"></div>
<div id="uxDrawScrollablePane" class="MapMenuScrollablePane" data-dojo-type="dojox/mobile/ScrollablePane"
data-dojo-props="height:'0px', fadeScrollBar:false, scrollBar:true, scrollDir:'v', scrollType:0">
<div id="uxDrawDiv" data-dojo-type="dojox/mobile/ContentPane" class="MapText MapDrawingMenuPane">
<p class="MapPara MapTextBold">Buffering</p>
<p class="MapText MapPara">
Click the buffer button, add a radius value and select a unit. When you draw on the map a buffer of the selected radius will be added to the symbol.
</p>
<p class="MapPara">
<button id="uxBufferButton" data-dojo-type="dojox/mobile/Button" title="Turn buffering on" alt=""
type="button" onclick="c_ToggleBufferMode();">
Buffering On
</button>
</p>
<p class="MapText MapPara">Radius:</p>
<p class="MapPara MapText">
<input id="uxBufferRadiusInput" type="text" placeHolder="0" disabled="true"/>
</p>
<p class="MapText MapPara">Units:</p>
<p class="MapPara MapText">
<select id="uxBufferUnitsSelect" class="MapText" disabled="true"></select>
</p>
<hr class='MapHorizontalLine'/>
<p class="MapPara MapTextBold">Drawing</p>
<p id="uxDrawStartPara" class="MapText MapPara">Tap an option below, then tap on the map to start</p>
<p id="uxDrawPolygonsPara" class="MapText MapPara">For polygons, tap again to start a new line</p>
<p id="uxDrawEndPara" class="MapText MapPara">Double-tap to finish</p>
<div id="uxDrawList" data-dojo-type="dojox/mobile/EdgeToEdgeList" class="MapText MapList"></div>
<p class="MapPara">
<button id="uxClearDrawingButton" data-dojo-type="dojox/mobile/Button" title="Clear graphics" alt=""
type="button" onclick="c_ClearMeasureGraphics();c_ClearMapGraphics();">
Clear Graphics
</button>
</p>
</div>
</div>
</div>
</div>
</div>
<script src="https://js.arcgis.com/3.28compact/"></script>
<script type="text/javascript" src="Files/main.js"></script>
<form id="form1" runat="server">
<asp:ScriptManager ID="uxMapScriptManager" runat="server">
<Services>
<asp:ServiceReference Path="~/Services/AddressService.asmx" />
</Services>
</asp:ScriptManager>
</form>
</body>
</html>

Associated javsascript (Files/main.js):

var _map = {};
var _basemapLayers = ["_osColour", "_osGreyScale", "_osHistoricE1", "_osHistoricE2", "_osHistoricE3"];
var _osColour, _osGreyScale, _osHistoricE1, _osHistoricE2, _osHistoricE3, _osColourTMS, _osGreyScaleTMS, _dynamicService; // Global map service variables.
var _drawBar;
var _measureBar;
var _scaleBar;
var _basemapGallery;
var _resizeEvt;
var _initialExtent;

function showMapCoordinates(eventArgs) {
try {
require(["dojo/dom", "dojo/domReady!"], function (dom) {
var mapPoint = eventArgs.mapPoint;

var uxMapXYLabel = dom.byId("uxMapXYLabel");

if (uxMapXYLabel !== null && uxMapXYLabel !== undefined) {
uxMapXYLabel.innerHTML = Math.round(mapPoint.x).toString() + ", " + Math.round(mapPoint.y).toString();
}
});
} catch (ex) {
handleError(ex, "method showMapCoordinates");
}
}

function resizeMap() {
try {
require(["dojo/dom", "dojo/has", "dojo/dom-style", "dojox/mobile", "dojo/domReady!"], function (dom, has, domStyle, mobile) {
var viewDisplay = "none";
var mapView = dom.byId("uxMapView");

if (mapView !== null && mapView !== undefined) {
viewDisplay = domStyle.get(dom.byId("uxMapView"), "display");
}

if (viewDisplay === "none") {
return;
}

mobile.hideAddressBar();

_map.resize();

_map.reposition();
});
} catch (ex) {
handleError(ex, "method resizeMap");
}
}

function dynamicServiceLoadHandler(eventArgs) {
try {
require(["esri/dijit/Legend"], function (Legend) {
var legendLayers = [];

legendLayers.push({layer: _dynamicService, title: "The following points of interest have been selected:"});

_legend = new Legend(
{
map: _map,
layerInfos: legendLayers
},
"uxLegendDiv"
);

_legend.startup();
});
} catch (ex) {
handleError(ex, "method dynamicServiceLoadHandler");
}
}

function handleMapClick(eventArgs) {
try {
require(["dojo/_base/array", "esri/graphic", "esri/InfoTemplate", "esri/tasks/IdentifyTask", "esri/tasks/IdentifyParameters"],
function (array, Graphic, InfoTemplate, IdentifyTask, IdentifyParameters) {
var infoWindowContent = "";

infoWindowContent = "<div id='uxInfoWindowScrollablePane' data-dojo-type='dojox/mobile/ContentPane' class='MapDesktopScrollable'>";

var identifyTask = new IdentifyTask("http://mySite.co.uk/server/rest/services/APP/MyNearest/MapServer");
var identifyParams = new IdentifyParameters();

identifyParams.tolerance = 10;
identifyParams.returnGeometry = false;
identifyParams.layerIds = _dynamicService.visibleLayers;
identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_VISIBLE;
identifyParams.width = _map.width;
identifyParams.height = _map.height;
identifyParams.geometry = eventArgs.mapPoint;
identifyParams.mapExtent = _map.extent;

identifyTask.execute(identifyParams, function (idResults) {
_map.infoWindow.clearFeatures();

infoWindowContent += "Some results";
infoWindowContent += "</div>";

if (_map.infoWindow !== null && _map.infoWindow !== undefined) {
var windowTemplate = new InfoTemplate();

if (infoWindowContent !== null && infoWindowContent !== undefined && infoWindowContent !== "") {
windowTemplate.setContent(infoWindowContent);
}

windowTemplate.setTitle("Identify Results");

var windowFeature = new Graphic(eventArgs.mapPoint, null, null, windowTemplate);
_map.infoWindow.setFeatures([windowFeature]);

_map.infoWindow.show(eventArgs.mapPoint, false);
}
}, c_OnXHRError);
});
} catch (ex) {
handleError(ex, "method handleMapClick");
}
}

require(["dojox/mobile",
"dojox/mobile/parser",
"dojox/mobile/compat",
"dojox/mobile/deviceTheme",
"dojox/mobile/Heading",
"dojox/mobile/View",
"dojox/mobile/ContentPane",
"dojox/mobile/Pane",
"dojox/mobile/ScrollableView",
"dojox/mobile/ScrollablePane",
"dojox/mobile/RoundRect",
"dojox/mobile/RoundRectList",
"dojox/mobile/ToolBarButton",
"dojox/mobile/Button",
"dojox/mobile/EdgeToEdgeList",
"dojox/mobile/LongListMixin",
"dojox/mobile/Accordion",
"dojox/mobile/Opener",
"dojox/mobile/ListItem",
"dojox/mobile/EdgeToEdgeCategory",
"dojox/mobile/RoundRectCategory",
"dojox/mobile/TextBox",
"dojo/dom",
"dojo/dom-class",
"dojo/_base/kernel",
"dojo/_base/lang",
"dojo/_base/array",
"dojo/on",
"dojo/ready",
"dojo/i18n!esri/nls/jsapi",
"esri/map",
"esri/sniff",
"esri/IdentityManager",
"esri/urlUtils",
"esri/SpatialReference",
"esri/layers/GraphicsLayer",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/geometry/Extent",
"esri/geometry/Point",
"esri/dijit/Scalebar",
"esri/symbols/PictureMarkerSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleMarkerSymbol",
"esri/Color",
"esri/renderers/SimpleRenderer",
"esri/toolbars/draw",
"esri/dijit/BasemapGallery",
"esri/dijit/BasemapLayer",
"esri/dijit/Basemap",
"esri/layers/TileInfo",
"dojo/domReady!"],
function (mobile, parser, compat, deviceTheme, Heading, View, ContentPane, Pane, ScrollableView, ScrollablePane, RoundRect, RoundRectList,
ToolBarButton, Button, EdgeToEdgeList, LongListMixin, Accordion, Opener, ListItem, EdgeToEdgeCategory, RoundRectCategory, TextBox, dom,
domClass, kernel, lang, array, on, ready, esriBundle, Map, has, IdentityManager, urlUtils, SpatialReference, GraphicsLayer,
ArcGISDynamicMapServiceLayer, ArcGISTiledMapServiceLayer, Extent, Point, Scalebar, PictureMarkerSymbol, SimpleFillSymbol, SimpleLineSymbol,
SimpleMarkerSymbol, Color, SimpleRenderer, draw, BasemapGallery, BasemapLayer, Basemap, TileInfo) {
try {
ready(function () {
parser.parse();
mobile.hideAddressBar();

on(IdentityManager, "dialog-create", function (eventArgs) {
IdentityManager.serverInfos[0].tokenServiceUrl = "http://mySite.co.uk/portal/sharing/rest/generateToken";
});

urlUtils.addProxyRule({
urlPrefix: "http://mySite.co.uk/server/rest/services/",
proxyUrl: "/proxy2/proxy.ashx"
});

_map = new Map("uxMapContentPaneDiv", {
logo: false,
navigationMode: "css-transforms",
autoResize: false,
extent: new Extent({ "xmin": 537000, "ymin": 150000, "xmax": 645000, "ymax": 176000, "spatialReference": { "wkid": 27700 } }),
showAttribution: true,
showInfoWindowOnClick: true,
sliderPosition: "top-right"
});

_initialExtent = _map.extent;

_map.infoWindow.set("id", "uxMapPopup");

_resizeEvt = window.onorientationchange !== undefined && (!has("android") ? "orientationchange" : "resize");

var mapPane = dom.byId("uxMapContentPaneDiv");

if (mapPane !== null && mapPane !== undefined) {
mapPane.addEventListener("touchmove", function (event) {
event.preventDefault();
}, false);
}

var mapMenuButton = dom.byId("uxMapMenuButton");

if (mapMenuButton !== null && mapMenuButton !== undefined) {
mapMenuButton.addEventListener("click", function (event) {
event.preventDefault();
}, false);
}

_dynamicService = new ArcGISDynamicMapServiceLayer("http://mySite.co.uk/server/rest/services/APP/MyNearest/MapServer", {
"id": "_dynamicService",
"opacity": 0.9,
"spatialReference": { "wkid": 27700 }
});

on(_dynamicService, "load", lang.hitch(this, dynamicServiceLoadHandler));

on(_map, "load", lang.hitch(this, mapLoadHandler));
on(_map, "click", lang.hitch(this, handleMapClick));

var xyDiv = dom.byId("uxMapXYDiv");

if (xyDiv !== null && xyDiv !== undefined) {
on(_map, "mouse-move", lang.hitch(this, showMapCoordinates));
on(_map, "mouse-drag-end", lang.hitch(this, showMapCoordinates));
domClass.replace(xyDiv, "MapVisible", "MapHidden");
}

layer = new ArcGISTiledMapServiceLayer("http://mySite.co.uk/server/rest/services/BASEMAPS/OS_Colour/MapServer", {id: "_osColourTMS", visible: true, opacity: 0.9});

if (layer !== null && layer !== undefined) {
layer.initialExtent = _initialExtent;
layer.spatialReference = _initialExtent.spatialReference;

_map.addLayer(layer);
}

var basemapList = [];
var tileInfo = new TileInfo({spatialReference: {"wkid": 27700}});

array.forEach(_basemapLayers, function (baseMapId) {
switch (baseMapId) {
case "_osColour":
_osColour = new BasemapLayer({url: "http://mySite.co.uk/server/rest/services/BASEMAPS/OS_Colour/MapServer", opacity: 0.9});
var colourBasemap = new Basemap({id: baseMapId, layers: [_osColour], title: "Colour", thumbnailUrl: "mySite.co.uk/colourThumbnail"});
basemapList.push(colourBasemap);
break;
case "_osGreyScale":
_osGreyScale = new BasemapLayer({url: "http://mySite.co.uk/server/rest/services/BASEMAPS/OS_Grey/MapServer", opacity: 0.9});
var greyscaleBasemap = new Basemap({id: baseMapId, layers: [_osGreyScale], title: "Black and White", thumbnailUrl: "mySite.co.uk/greyscaleThumbnail"});
basemapList.push(greyscaleBasemap);
break;
case "_osHistoricE1":
_osHistoricE1 = new BasemapLayer({url: "http://mySite.co.uk/server/rest/services/BASEMAPS/OS_Landmark_Epoch1/MapServer", opacity: 0.9});
var historic1Basemap = new Basemap({id: baseMapId, layers: [_osHistoricE1], title: "OS 1871-1890", thumbnailUrl: "mySite.co.uk/historic1Thumbnail.jpg"});
basemapList.push(historic1Basemap);
break;
case "_osHistoricE2":
_osHistoricE2 = new BasemapLayer({url: "http://mySite.co.uk/server/rest/services/BASEMAPS/OS_Landmark_Epoch2/MapServer", opacity: 0.9});
var historic2Basemap = new Basemap({id: baseMapId, layers: [_osHistoricE1], title: "OS 1897-1900", thumbnailUrl: "mySite.co.uk/historic2Thumbnail.jpg"});
basemapList.push(historic2Basemap);
break;
case "_osHistoricE3":
_osHistoricE3 = new BasemapLayer({url: "http://mySite.co.uk/server/rest/services/BASEMAPS/OS_Landmark_Epoch3/MapServer", opacity: 0.9});
var historic3Basemap = new Basemap({id: baseMapId, layers: [_osHistoricE3], title: "OS 1907-1923", thumbnailUrl: "mySite.co.uk/historic3Thumbnail.jpg"});
basemapList.push(historic3Basemap);
break;
}
});

_basemapGallery = new BasemapGallery({showArcGISBasemaps: false, map: _map, basemaps: basemapList}, "uxBasemapGallery");
_basemapGallery.startup();
_basemapGallery.select("_osColour");

_map.addLayers([_dynamicService]);

esriBundle.widgets.legend.NLS_noLegend = "<p class='MapText MapPara'>No points of interest have been selected.<p>";

_drawBar = new draw(_map);

_scaleBar = new Scalebar({
"map": _map,
"attachTo": "top-right",
"scalebarUnit": "dual",
"scalebarStyle": "line"
});

ready(function () {
on(window, "_resizeEvt", lang.hitch(this, function (eventArgs) {
resizeMap();
}));
});
});
} catch (ex) {
handleError(ex, "method init");
}
});