Graphic items not refreshing when dragging MapView

249 Views Asked by At

Is there any way to make the centered point to move whilst dragging the map? It seems currently its not possible to add graphics nor remove them whilst dragging happens.

require([
    "esri/Map",
  "esri/views/MapView",
  "esri/Graphic",
  "esri/core/watchUtils",
  "dojo/domReady!"
], function(
    Map,
  MapView,
  Graphic,
  watchUtils
){
    var map = new Map({
    basemap: "hybrid"
  });

  var view = new MapView({
    container: "map",
    map: map,
    constraints: {
        rotationEnabled:false
    }
  });

  var addPoint = function(point){
    view.graphics.removeAll();
    var graphicPoint = {
        type: "point",
      latitude: point.latitude,
      longitude: point.longitude
    };

    var markerSymbol = {
        type: "simple-marker",
      color: [85,139,197],
      outline: {
        color: [255,255,255],
        width:2
      }
    };

    var pointGraphic = new Graphic({
        geometry: graphicPoint,
      symbol: markerSymbol
    });

    view.graphics.add(pointGraphic);
  };

  var centerPoint = function(){
    var point = view.center;
    var input = document.getElementById("myInput");
    input.value = point.latitude.toFixed(5) + " " + point.longitude.toFixed(5);
    addPoint(point);
  };

  var showCenterCoords = function(){
    centerPoint();
    view.on("pointer-move", function(e){
        centerPoint();
    });
  };

  view.when(function(){
    showCenterCoords();
  });
});

https://jsfiddle.net/wrtqn2e3/3/

Im using Esri Js API 4.8.

If you look at the INPUT window, you can see that the "pointer-move" event triggers, because coordinates do refresh even on dragging.

Is there a possible workaround for this to happen?

Thanks in advance.

0

There are 0 best solutions below