Search code examples
javascriptarcgisesriarcgis-js-api

Scrolling down a page with a ArcGIS map


I'm using version 4.0 of the ArcGIS API for my maps.

whenever map is loaded, User has to scroll down to see the map. This is the first issue i am facing.

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>

Note:- Same issue exist on arcgsi js api sample too... https://developers.arcgis.com/javascript/latest/sample-code/sandbox/sandbox.html?sample=get-started-mapview

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.


Solution

  • I had posted this in one of the ArcGIS forums and got to know this is a bug with 4.0 and will be fixed in 4.1.