AnsweredAssumed Answered

Issue On Using Snapping Manager with ArcGIS Dynamic Map Service Layer

Question asked by behClevest on Oct 30, 2017
Latest reply on Nov 1, 2017 by hotscotch92

Using ArcGIS API for JavaScript 3.22 I am trying to add Snapping Function on adding Point to a Graphic Layer but bases on an existing ArcGISDynamicMapServiceLayer (snapping to Edges and Vertex in the ArcGISDynamicMapServiceLayer). but looks like the snapping is not functioning.

 

<button id="addP2P">Add Point To Points </button>
<button id="addP2L">Add Point To Lines </button>
<div id="map"></div>

require([
    "esri/map",
    "esri/layers/FeatureLayer",
    "esri/layers/ArcGISDynamicMapServiceLayer",
    "esri/layers/GraphicsLayer",
    "esri/graphic",
    "esri/symbols/SimpleMarkerSymbol",
    "esri/symbols/SimpleLineSymbol",
    "esri/Color",
    "esri/SnappingManager",
    "dojo/keys",
    "dojo/domReady!"
  ],
  function(
    Map,
    FeatureLayer,
    ArcGISDynamicMapServiceLayer,
    GraphicsLayer,
    Graphic,
    SimpleMarkerSymbol,
    SimpleLineSymbol,
    Color,
    SnappingManager,
    dojoKeys
  ) {
    var map = new Map("map", {
      basemap: "topo",
      center: [-88.158805, 41.786075],
      zoom: 18
    });

    var P2PLayer = new GraphicsLayer();
    var P2LLayer = new GraphicsLayer();
    map.addLayer(P2PLayer);
    map.addLayer(P2LLayer);

    var DLayer = new ArcGISDynamicMapServiceLayer('https://sampleserver6.arcgisonline.com/arcgis/rest/services/Water_Network/MapServer');
    map.addLayer(DLayer);

    var symbolPointJFlag = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 10,
      new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([0, 255, 0, 1]), 1), new Color([0, 255, 0, 1]));

    $("#addP2P").one("click", function() {
      map.on("click", addGraphic);

      function addGraphic(evt) {
          var sm = new SnappingManager({
      alwaysSnap: false,
      map: map,
      snapKey: dojoKeys.CTRL,
      tolerance: 10,
      layerInfo: [{
        layer: DLayer,
        snapToEdge: true,
        snapToVertex: true
      }]
    });
        var pgraphic = new Graphic(evt.mapPoint, symbolPointJFlag);
        P2PLayer.add(pgraphic);
      }
    });
  });

Outcomes