3

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

2 Answers 2

1

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

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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