Not Able to Enable Snapping Management on Top of a Feature Service

Question

Can you please take a look at This Demo and let me know why I am not able to set up and enable Snapping on top of following feature Service? What I need is snapping to all features in mouse hover/over of each? var map; require(["esri/map", "esri/SnappingManager", "esri/layers/FeatureLayer", "dojo/keys", "dojo/domReady!" ], function(Map, SnappingManager, FeatureLayer, keys) { map = new Map("map", { basemap: "topo", center: [-88.158805, 41.786075], zoom: 18 }); var propertyLayer = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/CommunityAddressing/FeatureServer/0", { mode: FeatureLayer.MODE_ONDEMAND, outFields: ["*"] }); map.addLayers([propertyLayer]); var snapManager = map.enableSnapping({ snapKey: keys.CTRL }); var layerInfos = [{ layer: propertyLayer, snapToVertex: true }]; snapManager.setLayerInfos(layerInfos); }); ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

RobertScheitlin__GISP · Accepted Answer

Bengi, There was nothing in your code trying to use the snapping. I added the measurement dijit and not snapping is enabled when measuring. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>Measure Tool</title> <link rel="stylesheet" href="https://js.arcgis.com/3.22/esri/themes/calcite/dijit/calcite.css"> <link rel="stylesheet" href="https://js.arcgis.com/3.22/esri/themes/calcite/esri/esri.css"> <style> html, body { height: 100%; width: 100%; margin: 0; } body { background-color: #FFF; overflow: hidden; font-family: "Trebuchet MS"; } #map { border: solid 2px #808775; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; margin: 5px; padding: 0px; } #titlePane { width: 280px; } </style> <script src="https://js.arcgis.com/3.22/"></script> <script> var map; require([ "dojo/dom", "esri/map", "esri/SnappingManager", "esri/layers/FeatureLayer", "esri/dijit/Measurement", "dojo/keys", "dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/TitlePane", "dojo/domReady!" ], function(dom, Map, SnappingManager, FeatureLayer, Measurement, keys, parser) { parser.parse(); map = new Map("map", { basemap: "topo", center: [-88.158805, 41.786075], zoom: 18 }); var propertyLayer = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/CommunityAddressing/FeatureServer/0", { mode: FeatureLayer.MODE_ONDEMAND, outFields: ["*"] }); map.addLayers([propertyLayer]); var snapManager = map.enableSnapping({ snapKey: keys.CTRL }); var layerInfos = [{ layer: propertyLayer, snapToVertex: true }]; snapManager.setLayerInfos(layerInfos); var measurement = new Measurement({ map: map }, dom.byId("measurementDiv")); measurement.startup(); }); </script> </head> <body class="calcite"> <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width:100%; height:100%;"> <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"> <div style="position:absolute; right:20px; top:10px; z-Index:999;"> <div id="titlePane" data-dojo-type="dijit/TitlePane" data-dojo-props="title:'Measurement', closable:false"> <div id="measurementDiv"></div> <span style="font-size:smaller;padding:5px 5px;">Press <b>CTRL</b> to enable snapping.</span> </div> </div> </div> </div> </body> </html> ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍