nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Overlay georeferenced image with ArcGIS javascript 4.6

ChadKahler

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!

Vind meer berichten getagd met

Accepted answers

All comments

JuliePowell

We are releasing the ability to overlay images and videos in 4.24 next week! You can try it out now using the /next early access release, and we are looking to get some feedback on it. 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

Drop me a note and let me know how you will be using it 🙂

UndralBatsukh

Hi there,

195MG is huge. . The limit of the image depends on the machine's GPU limit, but a safe maximum size is 2048x2048px. Image this big will take more time to be fetched and displayed.

mpianka

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

UndralBatsukh

@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

JeremySwagger

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?

BWScientiaLLC

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

mpianka

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

JeremySwagger

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.

BWScientiaLLC

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

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.

RobertScheitlin__GISP

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)

ChadKahler

Robert,

Thanks...appreciate it!

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

RobertScheitlin__GISP

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.

ChadKahler

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!

pnt_on_line.png

RobertScheitlin__GISP

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

DavidColey

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?

RobertScheitlin__GISP

David,

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

DavidColey

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

<SPAN class="string token">"esri/layers/MapImageLayer"</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN></SPAN>

and alias

MapImageLayer<SPAN class="punctuation token">,</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN></SPAN>

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

<SPAN class="keyword token">var</SPAN> image <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">MapImageLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
 url<SPAN class="punctuation token">:</SPAN> <SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=http%3A%2F%2Fgem.edcgov.us%2Farcgis%2Frest%2Fservices%2Fsurface%2FAerials_2011_mercator_WAB%2FMapServer" target="_blank">http://gem.edcgov.us/arcgis/rest/services/surface/Aerials_2011_mercator_WAB/MapServer</A><SPAN>"</SPAN></SPAN>
 <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 <SPAN class="comment token">/*add the layers!*/</SPAN>
 map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addMany</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>lyrUtilBnds<SPAN class="punctuation token">,</SPAN> lyrEnvBnds<SPAN class="punctuation token">,</SPAN> lyrFacBnds<SPAN class="punctuation token">,</SPAN> lyrMobBnds<SPAN class="punctuation token">,</SPAN> image<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

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

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.