nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

Find more posts tagged with

Accepted answers

derekswingley1

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.

All comments

SrihariManepalli

This worked for me. Thanks.

IrisGreen

I had the same issue, I am developing the app in Visual Studio 2010. this issue persist while testing locally (in VS Application server) , however after publishing the application in IIS the problem vanished. Let me know if any has faced the same or can throw some more light.

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

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".

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.

derekswingley1

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.

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

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

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

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.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.