Try PictureMarkerSymbol as a workaround in 4x.
First set up the layer:
//Ideally, get the centroid and extent from the image
const point = new Point ({
x: -76.490695,
y: 38.9788
});
const markerExtent = {
xmin: -76.492706,
xmax: -76.488920,
ymin: 38.978750,
ymax: 38.980800
}
const symbolMarker = {
type: "picture-marker",
url: imageUrl,
width: 200,
height: 200
};
const graphicPoint = new Graphic({
geometry: point,
symbol: symbolMarker
});
const targetLayer = new GraphicsLayer({
graphics: [graphicPoint]
});
After adding that layer to the mapView, listen for any time that the mapView extent is stationary, and recalculate the width and height of the marker symbol.
function adjustMarker() {
const topRightScreenPt = view.toScreen({
x: markerExtent.xmax,
y: markerExtent.ymax,
spatialReference:{
wkid: 4326
}
});
const bottomLeftScreenPt = view.toScreen({
x: markerExtent.xmin,
y: markerExtent.ymin,
spatialReference:{
wkid: 4326
}
});
const newWidth = Math.abs(topRightScreenPt.x - bottomLeftScreenPt.x);
const newHeight = Math.abs(bottomLeftScreenPt.y - topRightScreenPt.y);
targetLayer.graphics.items[0].symbol = {
type: "picture-marker",
url: imageUrl,
width: newWidth > 0 ? newWidth : 1,
height: newHeight > 0 ? newHeight : 1
};
}
view.watch("stationary", (newValue, oldValue) => {
if (newValue == true) {
adjustMarker();
}
Working Example: https://codepen.io/Jswag/pen/poeZJoq
In this example, I am manually setting the extent of the image, but it should be easier with a properly georeferenced image. This example includes other possibilities of using other layers, but Option 3, using PictureMarkerSymbol, seems to work the best during navigation.