topic Re: Overlay georeferenced image with ArcGIS javascript 4.6 in ArcGIS JavaScript Maps SDK Questions

Overlay georeferenced image with ArcGIS javascript 4.6

ChadKahler — Fri, 23 Feb 2018 17:08:05 GMT

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!

Re: Overlay georeferenced image with ArcGIS javascript 4.6

DavidColey — Sun, 12 Dec 2021 07:06:26 GMT

Well, once you have your mapView set up in your js file, you just need to add the correct require

"esri/layers/MapImageLayer"‍

and alias

MapImageLayer,‍

and then set up a var for the MapImageLayer and add it to your maps layers:

var image = new MapImageLayer({
 url: "http://gem.edcgov.us/arcgis/rest/services/surface/Aerials_2011_mercator_WAB/MapServer"
 });
 /*add the layers!*/
 map.addMany([lyrUtilBnds, lyrEnvBnds, lyrFacBnds, lyrMobBnds, image]);‍‍‍‍‍

not really a workaround per say, it's just the way it works

Re: Overlay georeferenced image with ArcGIS javascript 4.6

RobertScheitlin__GISP — Fri, 23 Feb 2018 21:24:01 GMT

David,

I think you mis-read the post he is asking about adding a georeferenced image to the map in 4.x

Re: Overlay georeferenced image with ArcGIS javascript 4.6

DavidColey — Fri, 23 Feb 2018 21:31:01 GMT

Sure, I don't think I understand what he's asking then. But other than adding a map image layer or an image service layer, how else would you add an image to a map?

Re: Overlay georeferenced image with ArcGIS javascript 4.6

RobertScheitlin__GISP — Fri, 23 Feb 2018 21:32:29 GMT

Just the way he said back in 3.x API. The MapImageLayer was for just that back then.

Re: Overlay georeferenced image with ArcGIS javascript 4.6

DavidColey — Fri, 23 Feb 2018 21:41:48 GMT

yeah I missed something in his question then. In looking at 4.x, it looks like some of the old 3.x MapImage properties are now incorporated into the 4.x MapImageLayer?

Re: Overlay georeferenced image with ArcGIS javascript 4.6

RobertScheitlin__GISP — Fri, 23 Feb 2018 21:43:54 GMT

3.x

Description

(Added at v2.4)

The MapImageLayer class is used to add georeferenced images to the map. The map will place the georeferenced images at the specified geographic extent. The extent of the image should be within the map's extent. The image should also be in the same coordinate system as the map.

Re: Overlay georeferenced image with ArcGIS javascript 4.6

ChadKahler — Fri, 23 Feb 2018 22:17:03 GMT

Thank you all for the feedback! I probably should have been more specific. I have utilized the MapImageLayer functionality in 3.x for overlaying a local georeferenced image with success, but I noticed that same functionality doesn't exist yet in 4.x. According to the ESRI functionality matrix the 3.x MapImageLayer has not been implemented in 4.x, since the 4.x MapImageLayer actually is a conversion of the 3.x ArcGISDynamicMapServiceLayer.

So I guess the main question that I was asking if anyone had figured out a workaround to achieve the 3.x MapImageLayer functionality utilizing the 4.x version of the API.

Perhaps I just need to be patient for the next release!

Thanks again!

Re: Overlay georeferenced image with ArcGIS javascript 4.6

RobertScheitlin__GISP — Fri, 23 Feb 2018 22:19:34 GMT

Chad,

I have not seen any info on the port over of the capability to use a georeferenced image in 4.x yet. I will ask next month at the Dev Summit though.

Re: Overlay georeferenced image with ArcGIS javascript 4.6

ChadKahler — Fri, 23 Feb 2018 22:32:19 GMT

Robert,

Thanks...appreciate it!

On Fri, Feb 23, 2018 at 3:20 PM, Robert Scheitlin, GISP <geonet@esri.com>

Re: Overlay georeferenced image with ArcGIS javascript 4.6

RobertScheitlin__GISP — Fri, 09 Mar 2018 16:29:47 GMT

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

Functionality matrix | ArcGIS API for JavaScript 4.6

MapImageLayer

Coming soon
(not to be confused with the 4x MapImageLayer which is the 4x version of the 3x ArcGISDynamicMapServiceLayer)

Re: Overlay georeferenced image with ArcGIS javascript 4.6

ChadKahler — Fri, 09 Mar 2018 19:20:07 GMT

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>

Re: Overlay georeferenced image with ArcGIS javascript 4.6

JeremySwagger — Tue, 01 Jun 2021 01:12:27 GMT

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.

Re: Overlay georeferenced image with ArcGIS javascript 4.6

BWScientiaLLC — Fri, 04 Jun 2021 20:37:30 GMT

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!

Re: Overlay georeferenced image with ArcGIS javascript 4.6

JeremySwagger — Wed, 07 Jul 2021 19:00:26 GMT

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.

Re: Overlay georeferenced image with ArcGIS javascript 4.6

mpianka — Wed, 25 Aug 2021 14:40:41 GMT

@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.

Re: Overlay georeferenced image with ArcGIS javascript 4.6

BWScientiaLLC — Wed, 25 Aug 2021 18:22:00 GMT

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

Re: Overlay georeferenced image with ArcGIS javascript 4.6

JeremySwagger — Fri, 17 Sep 2021 18:05:58 GMT

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?

Re: Overlay georeferenced image with ArcGIS javascript 4.6

UndralBatsukh — Wed, 01 Jun 2022 19:01:22 GMT

@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

Re: Overlay georeferenced image with ArcGIS javascript 4.6

mpianka — Fri, 03 Jun 2022 14:50:51 GMT

@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.