cannot update source type: 'image' position with setData - not a function when not geojson?

Nobody has claimed this yet.

I was trying to use the demos https://docs.mapbox.com/mapbox-gl-js/example/drag-a-point/ and https://docs.mapbox.com/mapbox-gl-js/example/animate-images/ to actually add a stretchable image to MapBox.

I need the user to be able to place an image and stretch the corners / rotate it / move it.

I'm able to add draggable components to the image by using markers. Then, by dragging the markers, it updates the position of the markers, but not the image.

I've tried setting directly, but of course this doesn't work. I researched getSource(...).setData() but I'm getting the error "setData is not a function" even though the source is valid and returned. I tried some other hacks like replacing the source with a new source, but this causes mapbox to queue hundreds of web requests to that existing image. I'm hoping this is all I will have to change, because I really don't feel like reimplementing since its almost 100% done (wrote a lot of mouse/touch events for the markerS), but it just won't update the position of the image on the map because I cannot call setData. (All I really need to do is setCoordinates() but there seems to be no function called this)

Can't share the source code, but it basically works like this:

- Place 3 layer/source combination markers at corners of image. For example, the "move" control is at center point.
- Drag center point. Updates position of the three other markers by calculating based on the new position during the event. Fires off a replacement for the three markers. Since the markers are circles, no web transmit is required.
- When I go to update the source, it just doesn't work...

```
// from click event...
var center=new Cartesian( e.lngLat.lng, e.lngLat.lat ); // rectangle/line calculation class
var box=[
[ c.x2, c.y ],
[ c.x, c.y ],
[ c.x, c.y2 ],
[ c.x2, c.y2 ]
];
var source={
type: 'image',
url: my_image_url,
coordinates: box
};
var layer={
id: source_name,
type: "raster",
source: source_name,
paint: { 'raster-opacity': 0.75 }
};

... Update position:
... get new center, move/rotate rectangle to new position, get new righthand coordinates

var rectangle=myCartesian.RotateRectangle2d(fp.angle);
fp.box=[
[ rectangle.points[0].x, rectangle.points[0].y ],
[ rectangle.points[1].x, rectangle.points[1].y ],
[ rectangle.points[2].x, rectangle.points[2].y ],
[ rectangle.points[3].x, rectangle.points[3].y ]
];
fp.source=app.editing.map.getSource(fp.source_name);
fp.source.coordinates=fp.box; // will not work
fp.source.setData({
type: 'image',
url: my_image_url,
coordinates: box
}); // setData not a function!!!
all I really need need:
fp.source.setCoordinates(box);

```

Start with the image-source API behind map.getSource(...) and compare it with the GeoJSON setData path; the issue's code shows the attempted update and the desired setCoordinates(box) entry point. Confirm whether image coordinates can be updated without replacing the source, and make the requested behavior demonstrably complete.

Written by the indexing model from the issue text.