Is it possible to use the ArcGIS JS API to drag and drop a pin. The user would like to be able to see the pin as they move, I tried removing and re-adding the graphic layer, but I can't find any examples where the graphic marker symbol is visible to the user as they move it. I'm able to use the sketch view model, in the below example, but the marker disappears and is replaced with the default sketch symbol.
Thanks!
Test Graphics Layer
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Test Graphics Layer</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.9/esri/css/main.css">
<script src="https://js.arcgis.com/4.9/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/widgets/Sketch/SketchViewModel",
"esri/Graphic",
"esri/layers/GraphicsLayer",
"esri/geometry/support/webMercatorUtils"
], function(
Map, MapView, SketchViewModel, Graphic, GraphicsLayer, webMercatorUtils
) {
let editGraphic;
const graphicsLayer = new GraphicsLayer({
id: "tempGraphics"
});
const map = new Map({
basemap: "gray",
layers: [graphicsLayer]
});
const view = new MapView({
container: "viewDiv",
map: map,
center: [-121.5, 38.555],
zoom: 11
});
var point = {
type: "point",
longitude: -121.5,
latitude: 38.555
};
var markerSymbol = {
type: "picture-marker",
url: "https://daraobeirne.github.io/kisspng-drawing-pin-world-map-logo-push-vector-5ae029f6ddeaf4.198342921524640246909.png",
width: "30px",
height: "30px"
};
var pointGraphic = new Graphic({
geometry: webMercatorUtils.geographicToWebMercator(point),
symbol: markerSymbol
});
view.when(function () {
graphicsLayer.graphics.addMany([pointGraphic]);
const sketchViewModel = new SketchViewModel({
view,
layer: graphicsLayer,
updateOnGraphicClick: true
});
setUpClickHandler();
sketchViewModel.on("update-complete", updateGraphic);
sketchViewModel.on("update-cancel", updateGraphic);
function updateGraphic(event) {
var graphic = new Graphic({
geometry: event.geometry,
symbol: editGraphic.symbol
});
graphicsLayer.add(graphic);
editGraphic = null;
}
function setUpClickHandler() {
view.on("click", function (event) {
view.hitTest(event).then(function (response) {
var results = response.results;
if (results.length > 0) {
for (var i = 0; i < results.length; i++) {
if (!editGraphic && results[i].graphic.layer.id === "tempGraphics") {
editGraphic = results[i].graphic;
graphicsLayer.remove(editGraphic);
sketchViewModel.update(editGraphic);
break;
}
}
}
});
});
}
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>