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>
