Rajni,
Works fine for me. Compare the code to find your mistake.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Intro to MapView - Create a 2D map - 4.14</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.14/"></script>
<script>
require(["esri/views/MapView",
"esri/WebMap",
"esri/Graphic",
"esri/layers/GraphicsLayer",
"esri/widgets/Sketch/SketchViewModel",
"esri/geometry/Polygon",
"esri/geometry/SpatialReference",
"esri/geometry/support/webMercatorUtils",
"esri/geometry/geometryEngine"
], function (MapView, WebMap, Graphic, GraphicsLayer, SketchViewModel, Polygon, SpatialReference, webMercatorUtils, geometryEngine) {
let sketchViewModel,
validSymbol,
newDevelopmentGraphic,
overLayGra;
var webmap = new WebMap({
portalItem: {
id: "a8e76ad6641b46978f148cba03ab3e2d"
}
});
var view = new MapView({
map: webmap,
container: "viewDiv",
center: [175.9258624, -37.55590445],
zoom: 20
});
var graphicsLayer = new GraphicsLayer();
webmap.add(graphicsLayer);
setUpGraphicClickHandler();
view.when(function () {
addGraphics();
sketchViewModel = new SketchViewModel({
view: view,
layer: graphicsLayer,
updateOnGraphicClick: false,
defaultUpdateOptions: {
toggleToolOnClick: false
}
});
sketchViewModel.on(["update", "undo", "redo"], onGraphicUpdate);
sketchViewModel.update([newDevelopmentGraphic], {tool: "reshape"});
});
function onGraphicUpdate(event) {
const graphic = event.graphics[0];
if (
event.toolEventInfo &&
(event.toolEventInfo.type === "move-stop" ||
event.toolEventInfo.type === "reshape-stop")
) {
sketchViewModel.complete();
} else if (event.state === "cancel" || event.state === "complete") {
sketchViewModel.update([graphic], {
tool: "reshape"
});
} else {
graphic.symbol = validSymbol;
}
}
function setUpGraphicClickHandler() {
view.on("click", function (event) {
if (sketchViewModel.state === "active") {
return;
}
view.hitTest(event).then(function (response) {
var results = response.results;
results.forEach(function (result) {
console.log(result.mapPoint);
if (
result.graphic.layer === sketchViewModel.layer &&
result.graphic.attributes &&
result.graphic.attributes.newDevelopment
) {
sketchViewModel.update([result.graphic], {
tool: "reshape"
});
}
});
});
});
}
function addGraphics() {
const vertices = [
[175.9258624, -37.55590445],
[175.9258630667, -37.55587745],
[175.9258671333, -37.5557153],
[175.92626316670004, -37.5557216],
[175.92625955, -37.5558657],
[175.9262584333, -37.5559107333],
[175.9258624, -37.55590445]
];
const polygon = createGeometry(vertices);
validSymbol = createSymbol([255, 255, 255, 0.3], "solid", 2, [
255,121,5]);
newDevelopmentGraphic = new Graphic({
geometry: webMercatorUtils.geographicToWebMercator(polygon),
symbol: validSymbol,
attributes: {
newDevelopment: "new store"
}
});
graphicsLayer.add(newDevelopmentGraphic);
var mapExtent = view.extent.expand(9);
var overlayGeom = geometryEngine.difference(mapExtent, newDevelopmentGraphic.geometry);
var symbol2 = {
type: "simple-fill",
style: "solid",
color: [129, 129, 129, 0.8],
outline: {
color: [255, 255, 255, 0],
width: 0
}
};
overLayGra = new Graphic({
geometry: overlayGeom,
symbol: symbol2
});
graphicsLayer.add(overLayGra);
}
function createGeometry(vertices) {
return new Polygon({
rings: vertices,
spatialReference: new SpatialReference({
wkid: 4326
})
});
}
function createSymbol(color, style, width, outlineColor) {
return {
type: "simple-fill",
style: style,
color: color,
outline: {
color: outlineColor,
width: width,
style: "dash"
}
};
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>