Scrolling down a page with a map

6804
13
Jump to solution
05-18-2016 02:00 AM
UdyWa
by
New Contributor III

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>
<!-- add div for test-->
<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.

Tags (1)
1 Solution

Accepted Solutions
JoshOng
New Contributor II

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.

View solution in original post

13 Replies
FC_Basson
MVP Regular Contributor

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 style="height:500px;">

  <div id="viewDiv"></div>

</div>

0 Kudos
UdyWa
by
New Contributor III

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.

0 Kudos
FC_Basson
MVP Regular Contributor

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

0 Kudos
UdyWa
by
New Contributor III

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

0 Kudos
FC_Basson
MVP Regular Contributor

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

0 Kudos
KristianEkenes
Esri Regular Contributor

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

UdyWa
by
New Contributor III

Hi,

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

0 Kudos
KristianEkenes
Esri Regular Contributor

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

0 Kudos
UdyWa
by
New Contributor III

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

0 Kudos