Issue On Using Snapping Manager with ArcGIS Dynamic Map Service Layer

[BehrouzHosseini]

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);
      }
    });
  });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[ScottBehrman · Accepted solution]

In my experience, SnappingManager does not seem to work with ArcGISDynamicMapServiceLayer (Maybe there's another way to do this?)

What you could do (what I did) is loop through your ArcGISDynamicMapServiceLayer/DLayer's layerInfos and retrieve all the layer IDs and Names (DLayer.layerInfos.name, DLayer.layerInfos.id)

then for each one, you can create a new FeatureLayer() object. eg. new FeatureLayer(featureLayerUrl, { id: featureLayerId, outFields: ["*"] })

for the featureLayerUrl you can use the same url used for your ArcGISDynamicMapServiceLayer but append ("/" + DLayer.layerInfos.id) for the featureLayerId use DLayer.layerInfos.name

then with each of these FeatureLayers, you can add them to your map object and to your snappmanager's layerInfos.