1

I am having a problem when the div that a MapView is rendered in moves. After moving the div, mouse events do not translate properly to the correct place on the map/screen. These events appear to be translated based on the div’s original position. It looks like the MapView is storing the div’s original position when it is created. I am wondering if there is any way to manually update this after the MapView is created. I do not see any likely methods in the api and have not been able to find any other similar issues.

You can recreate this issue by pasting the following code into the ArcGIS Sandbox. My recreation is based on ESRI’s “Get started with MapView - Create a 2D map”. After pasting the code and pressing Run, zoom into the map by holding the shift key and drawing a box on the map with your mouse. After confirming that everything is okay, tap the “Scoot View” button a few times and try it again to illustrate the issue. You will see that the zoom box does not appear where your mouse is.

I am working on an application where I would like to embed a map on a dashboard made up of movable widgets. I could tear-down and recreate the MapView every time the widget is moved but that seems extreme.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>Get started with MapView - Create a 2D map - 4.1</title>
    <style>
        #viewDiv {
            position: absolute;
            padding: 0;
            margin: 0;
            height: 500px;
            width: 500px;
        }
    </style>
    <link rel="stylesheet" href="https://js.arcgis.com/4.1/esri/css/main.css">
    <script src="https://js.arcgis.com/4.1/"></script>
    <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "dojo/domReady!"
    ], function(Map, MapView) {

      var map = new Map({
        basemap: "streets"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        zoom: 4,
        center: [15, 65]
      });

    });

    var xOffset = 0;

    function scootView() {
        xOffset += 50;
        var x = document.getElementById('viewDiv').style.left = xOffset + "px";
    }
    </script>
</head>
<body>
<button onclick="scootView()">Scoot View</button>
<div id="viewDiv"></div>
</body>
</html>
5
  • I added JSFiddle jsfiddle.net/Eric5385/3hgtfz1q/1
    – EricAZ
    Oct 10, 2016 at 21:58
  • the jsapi development team is aware of this bug and working on a fix. Oct 11, 2016 at 20:41
  • Thank you for the response. I found another, possibly related, issue. The same zoom "rubber band" does not appear to work correctly if the top of the page happens to be scrolled out of view. In the following fiddle, the map sits below an unrelated div. If you scroll down to the map and then try to zoom the rubber band box is in the wrong location. If you scroll back to the top of the page and use the zoom tool on the partially visible map it works fine. If you have a chance to take a look I would appreciate it.
    – EricAZ
    Oct 12, 2016 at 15:07
  • Fiddle: jsfiddle.net/Eric5385/sg57phy3
    – EricAZ
    Oct 12, 2016 at 15:07
  • your second fiddle is pretty much identical to the repro case i logged originally. thanks for reporting it. Oct 12, 2016 at 18:04

1 Answer 1

1

This is a bug which has been fixed in ArcGIS API for JavaScript 4.2.

http://jsbin.com/caxuxu/edit?html,output

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.