Map Navigation Mouse Offset?

[ChadWilcomb]

I am experiencing an issue where the map navigation functions are showing a large offset between the mouse position and the location where the map zooms into. The following map navigation functions cause the following results:

SHIFT + Drag the mouse to zoom in:

When holding down shift, and dragging a box on the map, the box draws way above the mouse position. The resulting zoom location reflects where the box is drawn rather than the mouse location.

SHIFT + Click to recenter, Double Click to Center and Zoom in, Mouse Scroll Forward to zoom in:

Results in the map zooming in to a location way above (North) of where the user clicked or where the mouse was located when the scroll wheel is turned.


Other Details:

This map also contains a feature layer with a mouseOver tooltip that works exactly as expected (ie- no offset).

This map is embedded in an ASP.NET MVC3 View (.cshtml) and is also inside a jQuery UI Tab layout. I suspect that there could be some CSS related issues, similar maps work fine in a standalone HTML file. How can I troubleshoot this?

Thank you,
Chad

[derekswingley1]

It's CSS (at least it always has been in my experience). Is your app public so others can take a look and possibly narrow down the specific CSS causing the problem? Otherwise, I'd say you've got some trial and error testing ahead of you.

[ChadWilcomb]

It's CSS (at least it always has been in my experience). Is your app public so others can take a look and possibly narrow down the specific CSS causing the problem?

No, unfortunately not.

Otherwise, I'd say you've got some trial and error testing ahead of you.

Are there any classes or elements that I should look for? Any other clues?

[derekswingley1]

I wish I could off some specifics but the problem is usually some css you've included. One place to start is with padding on your map element. If you use a dojo border container and create your map as a content pane this shouldn't be an issue.

[ChadWilcomb]

I haven't been able to find any CSS setting that fixes the problem. I put a simple example on my hosted site. If anyone has an idea what is going on, please help.

http://chadwilcomb.com/maps/test/AGS_jQueryUI.htm

Once again, if you SHIFT + Drag to zoom you will see the large offset between mouse position and zoom box. Also, if you Double Click to Zoom, the map centers far away from where you clicked.

FWIW- The same behavior exists when using the Dojo Accordion as well...

http://chadwilcomb.com/maps/test/AGS_DojoAccordion.htm

Thanks!
Chad

[derekswingley1 · Accepted solution]

Call map.reposition() after your map's div moves around. I did this in the chrome dev tools console and it fixed the zoom window offset problem.

[SrihariManepalli]

This worked for me. Thanks.

[ChadWilcomb]

That did the trick! Thank you so much for following up. I had tried resize but I can't believe I didn't think to try reposition.

[YohanBienvenue]

I also had this issue, but in my case it was because I load the map in the background (so it will already be ready when the user goes to the map page of my webapp), with a visiblity:hidden style on the mapDiv.
It worked fine except for this important offset when I would click the map.

map.reposition() fixed this offset

Has Derek suggested, I suspect some CSS padding/margins or something like that are not taken into account when visibility is "hidden".

[JamesFinerfrock]

I'm also having the same issue.  I've isolated it to be jquery.mobile-1.0.1.min.css...

So, Derek is the smarty here on this one.

Jim