topic Re: Scrolling down a page with a map in ArcGIS JavaScript Maps SDK Questions

Scrolling down a page with a map

UdyWa — Wed, 18 May 2016 09:00:21 GMT

I'm using version 4.0 of the ArcGIS API for my maps. I have this problem with maps whenever the page has to be scrolled down to view the map. My map is somewhere in the middle of the page so the user has to scroll down to view it. Then if a certain point was clicked on the map or if a certain area in dragged to zoom in, the pointers the map shows as selection are not the exact points the mouse is pointing at. it points to a location above the mouse pointer.

Here is a sample code.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <title>Add the Compass widget to a basic 2D map - 4.0</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.0/esri/css/main.css"> <script src="https://js.arcgis.com/4.0/"></script> <script> require([ "esri/Map", "esri/views/MapView", "esri/widgets/Compass", "dojo/domReady!" ], function( Map, MapView, Compass ) { var map = new Map({ basemap: "national-geographic" }); var view = new MapView({ container: "viewDiv", scale: 500000, center: [26.26, 39.17], map: map }); /******************************** * Create a compass widget object. *********************************/ var compassWidget = new Compass({ view: view }); // Add the Compass widget to the top left corner of the view view.ui.add(compassWidget, "top-left"); }); </script> </head> <body>  <div style="height:500px;"></div> <div id="viewDiv"></div> </body> </html>

If you run this code you'll see if you scroll down and drag an area (by holding shift and dragging the mouse) it will drag an area above your selection.

Re: Scrolling down a page with a map

FC_Basson — Wed, 18 May 2016 12:16:04 GMT

Your second divider "viewDiv" should be contained in the first one where you specify the height. At the moment it is sitting below the first div.

</div>

Re: Scrolling down a page with a map

UdyWa — Wed, 18 May 2016 12:19:21 GMT

Thats how I want it to be. I put some content in that div (header information). Map div should be below that div rather than inside the div.

Re: Scrolling down a page with a map

FC_Basson — Wed, 18 May 2016 13:02:09 GMT

I tested the exact same layout with the JS version 3.16 API and it does not behave the same way.

Re: Scrolling down a page with a map

UdyWa — Wed, 18 May 2016 13:07:38 GMT

Yes. You are correct. This issue is only in 4.0. I assume this is a bug in 4.0?

Re: Scrolling down a page with a map

FC_Basson — Thu, 19 May 2016 06:55:41 GMT

I get the same result with a Bootstrap grid layout. Thought that would sort it out with stricter CSS rules, but it didn't.

Re: Scrolling down a page with a map

KristianEkenes — Thu, 19 May 2016 23:41:40 GMT

This is a known bug in 4.0. Will be fixed in 4.1.

Re: Scrolling down a page with a map

UdyWa — Fri, 20 May 2016 08:46:14 GMT

Hi,

Thanks for the update. Do you have any idea that when 4.1 will be released?

Re: Scrolling down a page with a map

KristianEkenes — Fri, 20 May 2016 15:46:53 GMT

No specific date set, but you can expect it sometime in the fall of this year.

Re: Scrolling down a page with a map

UdyWa — Fri, 20 May 2016 15:53:48 GMT

Thank you. Would you be able to suggest a workaround for this problem until such a release?

Re: Scrolling down a page with a map

UdyWa — Thu, 06 Oct 2016 12:08:50 GMT

Hi,

I have updated to esir 4.1 from 4.0. But this issue is still there. I check it even in your examples and even worst, the bug is there in your community home page!!! (Community | ArcGIS for Developers ) [Scroll down and try clicking a map location.]

Are you going to fix this anytime soon?

Re: Scrolling down a page with a map

JoshOng — Sun, 23 Oct 2016 17:12:37 GMT

This is a serious issue. We cannot only use the maps at the top of the page. If the map scrolls at all, all user input is shifted upwards. This really needs to be fixed.

Re: Scrolling down a page with a map

JoshOng — Wed, 28 Dec 2016 14:40:05 GMT

It looks like they have fixed this in 4.2 released December 21, 2016, finally. I did a test and it seemed to work even when the page is scrolled down and the map isn't at the top of the page.

The specific fix is mentioned in the release notes here.

BUG-000096543: Map clicks and mouse wheel scrolling works correctly now if the page is scrolled down.

Not sure if it's ready for prime time yet, but it looks like it's getting there.

Re: Scrolling down a page with a map

GeraldGayowsky — Thu, 29 Aug 2019 17:37:49 GMT

This exact same problems exist in 3.X.

Is there any change that this fix will get applied to 3.X?