Overlay georeferenced image with ArcGIS javascript 4.6

4577
21
02-23-2018 09:08 AM
ChadKahler
New Contributor II

With ArcGIS Javascript v3.x you could use a combination of MapImage and MapImageLayer to overlay a georeferenced image on the map.  It appears that the MapImageLayer functionality has changed in the 4.6 Javascript API, so is there a workaround available for georeferenced images until the old v3.x functionality of the MapImageLayer is implemented?

Thanks!

Tags (1)
21 Replies
RobertScheitlin__GISP
MVP Emeritus

Chad is now marked as coming some in the JS Functionality Matrix.

Functionality matrix | ArcGIS API for JavaScript 4.6 

MapImageLayerComing soon
(not to be confused with the 4x MapImageLayer which is the 4x version of the 3x ArcGISDynamicMapServiceLayer)
0 Kudos
ChadKahler
New Contributor II

Robert,

Thanks for the followup...I'm looking forward to the implementation!

Chad

On Fri, Mar 9, 2018 at 9:30 AM, Robert Scheitlin, GISP <geonet@esri.com>

0 Kudos
JeremySwagger
New Contributor II

Looks like it is still listed as "coming soon" 3 years later. 😐
Has anyone figured out any work arounds? I'm in the middle of a 3x to 4x migration, and still trying to figure out a way (without ArcGIS Server and an image service) to add georeferenced images.

0 Kudos
BWScientiaLLC
New Contributor II

I am also actively on the hunt for a solution to this. It seems to me that the 4.x api lacks a way to arbitrarily place an image on a map. I've been working on using geotiff.js to parse out all the image info and try to create a graphic or symbol out of it. The hurdle I'm on now is doing something with the parsed out RGB band data...If you have come up with some kind of working solution I would be very interested in seeing it!

JeremySwagger
New Contributor II

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 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 layers, but Option 3, using PictureMarkerSymbol, seems to work the best during navigation.

Tags (1)
mpianka
New Contributor II

@JeremySwagger  I was checking out your solution and noticed this seems to only work if the max width or height of the image does not exceed 500 pixels. Did you come across that same problem as well? I see the example image you used is 500x350.

0 Kudos
BWScientiaLLC
New Contributor II

This was the wall I ran up against as well. It seems that a PictureMarkerSymbol has a capped size.

0 Kudos
JeremySwagger
New Contributor II

Yeah, there are limitations and some performance issues with using PictureMarkerSymbol as well. I ended up rendering points to a separate canvas sitting above the map div (which is a different strategy entirely). I think the 4x equivalent to 3x MapImageLayer may actually be planned in the next release though?

0 Kudos
UndralBatsukh
Esri Regular Contributor

@ChadKahler,  @JeremySwagger,  @BWScientiaLLC and @mpianka 

Just want to let you know we are adding support for this at 4.24. You can use MediaLayer (new at 4.24) to add static images or videos on your map. You can test it out using our next version as of today. Please check it out and if you have any questions or feedback please let me know. 

https://github.com/Esri/feedback-js-api-next/blob/master/CHANGELOG.md

mpianka
New Contributor II

@UndralBatsukh Thanks! Glad to see this is officially making it into the API. I started playing around with it and the results are good so far. One question I have is do you know what the filesize limitations are? I have some high resolution imagery. The full raster is a 195 MB PNG and results in an "element cannot be displayed" error. I clipped a piece of it to make a 16 MB PNG and that one displays fine.

0 Kudos