5

I am looking for a way to add a georeferenced image file to a map in the ESRI 4.x Javascript api. In the 3.x version this was possible through the addImage method on MapImageLayer. It looked like:

mapImageLayer.addImage(new MapImage({ extent : extentForDataUrl, href : someDataUrlString }));

In reading the docs for the 4.2 MapImage they state “The MapImage class can also be used to create a geo-referenced image file for use with the MapImageLayer” but I cannot find how this is done. The addImage method on MapImageLayer appears to be gone and its constructor requires a portal item id or a service url.

The images that I want to add to the map reflect radar/meteorology data that is updated every couple of minutes.

3
  • I'm running into this same issue attempting to add georeferenced files. After talking with ESRI technical support they are saying that this is a 'new feature' and are treating it as an enhancement with no time frame on implementation. They suggested trying to use the GraphicsLayer instead, which doesn't appear to be able to do this either on first glance. Were you ever able to find a work-around for this?
    – mtCoder
    Mar 6, 2017 at 20:20
  • This does not really answer the question. If you have a different question, you can ask it by clicking Ask Question. You can also add a bounty to draw more attention to this question once you have enough reputation. - From Review
    – Oto Kaláb
    Mar 6, 2017 at 21:07
  • I have not found a work around for this issue and am still using 3.x on my current project.
    – EricAZ
    Mar 8, 2017 at 18:58

3 Answers 3

2

The 4.x JSAPI doesn't yet support adding georeferenced images. The documentation for MapImage is incorrect (and we will update that).

Note also that in 4.x the ArcGIS* layers have shorter, clearer module names, e.g., the old ArcGISTiledMapServiceLayer is now TileLayer and ArcGISDynamicMapServiceLayer is now MapImageLayer. The old "MapImageLayer" will be renamed to something else once it's added to the 4.x API.

https://developers.arcgis.com/javascript/latest/guide/functionality-matrix/index.html https://developers.arcgis.com/javascript/latest/guide/migrating/index.html

2

UPDATE (2022):

MediaLayer will make this easier as of 4.24.

Original Solution:

PictureMarkerSymbol using the image centroid as a point, is a workaround to provide basic functionality of adding a georeferenced image to a 4x MapView. 

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 Examplehttps://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 layer types, but Option 3, using PictureMarkerSymbol, seems to work the best during navigation.

1

We are releasing the ability to overlay images and videos in ArcGIS API for JavaScript (version 4.24) next week! You can try it out now using the /next early access release. The functionality is even better than 3.x… you can overlay both images and videos in 2D and 3D, add/remove multiple images on the fly very easily, and use it with other 4.x capabilities like layer blending (note: so far you can only do layer blending with MediaLayers in 2D).  Here's a simple example: https://codepen.io/U_B_U/pen/MWQGWdb?editors=1000 

1
  • Please provide code in the answer, not only in a link.
    – Vince
    Jun 15, 2022 at 11:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.