Zooming with mouse wheel/double-click forces pan

[RobertMartin2]

Hi everyone,

I have a map that I'm initializing off-screen and sliding in using jQuery. For some reason zooming in with the scroll wheel or by double-clicking causes the map to simultaneously pan down (or pan up when zooming out). Using the slider controls works fine. Also if I disable the animation and create it on-screen it zooms normally. I'm guessing it has something to do with the relative position of the map to where it was created, but I don't imagine I have much control over that. Does anyone have any thoughts on this?

Here's how I'm styling the map:

#map {
 bottom: -450px;
 height: 450px;
 position: fixed;
 width: 100%;
}

And this is my animation function:

toggleMap: function() {
 // New bottom value
 var newBottom;

 if (isShowing) {
  newBottom = -MAP_HEIGHT;
 }
 else {
  newBottom = 0;
 }

 // Set this here in case they reverse the animation before it finishes
 isShowing = !isShowing;

 // Change link text
 $('#gis-link').text(!isShowing ? 'show' : 'hide');

 // Animate
 $map.animate({
  bottom: newBottom
 });
},

Thanks!

[GISDev1]

Does this occur on all browsers and client devices or just particular configurations?

I would need to see more of the code in order to help you out, such as the resize map functions you might be using.

[RobertMartin2]

Hi Dev,

I'm developing in Chrome 29.0.1547.66 but it happens in Firefox 24.0 as well. I'm not explicitly calling any resize functions -- in fact the only code I have so far is creating the map and adding some layers.

This is how I create the map:

require(['esri/map'], function(Map) {
 // Create and add map div
 $('<div/>', {id: 'map'}).appendTo('#bounds');

 // Reference map div
 $map = $('#map');

 // Create map
 map = new Map('map', {
  logo: false,
 });

 // Add tiled layers
 addLayers();
});

The code to add the layers is rather long but I'm basically just forming URLs, creating layer objects, and passing them to map.AddLayer(). There are 3 tiled layers and 1 dynamic. They all work fine as long as the map is in a fixed on-screen position.


Thanks again.

[RobertMartin2]

Derek of the JS team was kind enough to point me in the right direction:

map.reposition();

Boom! No more pan.