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; } } }

Adding a geo-referenced tiff to a map

SethEllingson

I am trying to add a geo-referenced tiff to a map using the Javascript API. Are tiff's supported? I have not been able to do this using a map Image Layer or a Graphic Layer. Here is what I have tried with the map Image Layer:

var imageLayer = new esri.layers.MapImageLayer(); map.addLayer(imageLayer); var mi = new esri.layers.MapImage({      'href': 'http://url.to.image/img.tiff' }); imageLayer.addImage(mi);

When I try this, no image appears. I don't get an error or anything, the image just doesn't show up.
The tiff and the map are using the same projection. Any help would be appreciated.

Find more posts tagged with

Accepted answers

derekswingley1

esri.layers.MapImage adds the image to the map via an img tag. Since img tags can't use .tiff files, you cannot use a tiff with a MapImage. You need to stick with file formats supported by the img tag.

All comments

derekswingley1

Glad to help, we'll add supported file formats to the docs.

SethEllingson

Thank you for the replies, this will save me from further testing with tif's.

derekswingley1

BetsySchenck-Gardner

Don't believe so. I just took a tif image and it would not display. Maybe someone from ESRI would know for certain because their documentation doesn't seem to mention anything about acceptable formats. Sorry I can't help.

SethEllingson

Thank you for the reply, this will help, but does the api support the .tiff format? I can't get the image to display at all.

BetsySchenck-Gardner

I was able to add an image to the map after I defined the four corners of the image. As far as I know, it doesn't read a tfw file or the header of a geotif. Here's an example of how I got it to work. The projection of my map was 3857 so my image had to be in the same projection:

          var xminValue = -10897188.6297;
          var yminValue = 1929703.88984;
          var xmaxValue = -8790353.14023;
          var ymaxValue = 3759053.72948;
          var spatialReferenceValue = 3897;

          var hrefValue = "http://www1.ln.ncddc.noaa.gov/website/AGSViewers/JS_Examples/data/amax.png";
          var lyrSample = new esri.layers.MapImageLayer();
          var lyr = new esri.layers.MapImage({'extent':{'xmin':xminValue,'ymin':yminValue ,'xmax':xmaxValue,'ymax':ymaxValue,'spatialReference':{'wkid':spatialReferenceValue}},'href':hrefValue});
          lyrSample.addImage(lyr);

Hope this helps.

LeslieFountain_0-1626210912916.png

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

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