Our map has a toolbar 'home' button with code that grabs extent values from a config file, creates an Extent object from those values, and passes the Extent object to the map's setExtent function. We also call this same code when the map is initialized, by calling the click function for the button. So if we load the map, then click the home button, the map image shifts about 30 or 40 pixels upward. Makes no sense, we are calling the exact same code twice in a row, with the exact same input.

Toolbar.prototype.OnFullExtentClick = function () {
    var viewModel = registry.get('viewmodel');          
    var initial = config.Map.InitialExtent;
    var extent = new esri.geometry.Extent(initial);

We call it once via code in the Init function:


And we execute it again when home button is clicked, via Knockout.js as below

<div id="toolbar">
    <div id="zoomin" class="map-panel" data-bind="click: Toolbar.OnZoomInClick">+</div>
    <div id="fullextent" class="map-panel" data-bind="click: Toolbar.OnFullExtentClick">   </div>
    <div id="zoomout" class="map-panel" data-bind="click: Toolbar.OnZoomOutClick">-</div>

It doesn't seem to matter what values we set for the extent, the "jump" is always the same distance and direction (30 to 40 pixels upwards). My question(s): What are we doing wrong? How can we get it to stop doing this?

-- EDIT -- This problem is specific to IE, does not do this in Chrome. Also, still does it when the setExtent code is replaced by centerAndZoom.

Toolbar.prototype.OnFullExtentClick = function () {
    var viewModel = registry.get('viewmodel');
    var center = new esri.geometry.Point(717714, 972786, new esri.SpatialReference({ wkid: 2223 }));
    viewModel.Map.centerAndZoom(center, 1);
  • Is there any change in the width and/or height of the map div between those two events? A map.resize() or map.reposition() may cause the map to shift, changing the map extent in some way. – raykendo Feb 20 '13 at 18:44
  • Not visibly, but when I tried to check with F12 dev tools, I noticed it was in Compatibility View (but not Quirks mode). Switched to normal IE9 mode, and could no longer inspect the size of the map div (wth??), AND THE PROBLEM GOES AWAY. So, it appears this has something to do with IE9 Compatibility View. – Joe Ballard Feb 20 '13 at 23:05

This is a lame answer, but until I find a better alternative, this will mask the symptom:

var centerPoint = new esri.geometry.Point(config.Map.CenterPoint);
// hack to detect IE9 and adjust centerpoint on initial load.
if (navigator.userAgent.indexOf("Trident 5.0") > -1) {
    centerPoint.y -= 12000;
ViewModel.Map.centerAndZoom(centerPoint, config.Map.Zoom.InitialLevel);

Yes, I know, user agent detection is evil, but in this case it appears to work. (So please don't downvote unless you have a better solution ...)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.