0

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.

2 Answers 2

0

this is happening because you are granting viewDiv 100% height and width in the <style> block near the top of your app and forcing a div which previously took up the entire visible screen below another div whose style is declared inline to have a height of 500px.

in general, css is a pain. tutorials online can help.

you can find a working example which makes exclusive use of non-percentage heights here.

2
  • But still, if you scroll down offset break again. May 19, 2016 at 9:00
  • oh wow. thats a bug and the team is working on a fix. May 27, 2016 at 21:36
0

I wrote to Esri team and they told this is a bug on 4.0. And it will be fixed with 4.1, which will be released fall this year (2016).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.