topic Re: How to overlay a georefrenced image (geotiff) to the webmap? in ArcGIS JavaScript Maps SDK Questions

How to overlay a georefrenced image (geotiff) to the webmap?

Pankajroy — Mon, 16 Sep 2013 03:15:40 GMT

Hi All,

Can anyone tell me how to overlay georefrenced images to webmap using javascript API.

Thanx,
Pankaj Roy

Re: How to overlay a georefrenced image (geotiff) to the webmap?

Pankajroy — Mon, 16 Sep 2013 04:25:36 GMT

Hi,

I belive it can be done using ESRI.Layers.MapImageLayer. Can anyone suggest how to retrieve the georef info such as extent and spatial refrence?

Rgds,
Pankaj Roy

Re: How to overlay a georefrenced image (geotiff) to the webmap?

JohnGravois — Mon, 16 Sep 2013 15:02:29 GMT

for MapImageLayer, you don't have to dig into the information stored within the image manually.

the API will handle reading the information for you as long as the georeferenced image is inside the extent of the map and in the same spatial reference.

Re: How to overlay a georefrenced image (geotiff) to the webmap?

derekswingley1 — Sun, 12 Dec 2021 04:24:14 GMT

Here's a simple example using MapImageLayer:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title></title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/esri/css/esri.css">
    <style>
      html, body, #map { height: 100%; width: 100%; margin: 0; padding: 0; }
    </style>
    <script src="http://js.arcgis.com/3.6/"></script>
    <script>
      var map, mil;

      require([
        "esri/map", "esri/geometry/Extent", 
        "esri/layers/MapImage", "esri/layers/MapImageLayer"
      ], function(
        Map, Extent, 
        MapImage, MapImageLayer
      ) {

        map = new Map("map", {
          basemap: "topo",
          center: [-79.17, 33.76],
          zoom: 9
        });

        // create and add the layer
        mil = new MapImageLayer({ "id": "usgs_screen_overlay" });
        map.addLayer(mil);

        // create and add the image
        var extent = new Extent({ "xmin": -8864908, "ymin": 3885443, "xmax": -8762763, "ymax": 3976997, "spatialReference": { "wkid": 102100 }});
        var mi = new MapImage({
          "extent": extent,
          "href": "http://hdds.usgs.gov/hdds2/view/overlay_file/AM01N33_269827W079_1773002011082800000000MS00"
        });
        mil.addImage(mi);
      });
    </script>
  </head>
  
  <body>
    <div id="map"></div>
  </body>
</html>

http://jsbin.com/uNeXera/1/

Re: How to overlay a georefrenced image (geotiff) to the webmap?

Pankajroy — Tue, 17 Sep 2013 23:59:41 GMT

for MapImageLayer, you don't have to dig into the information stored within the image manually.

the API will handle reading the information for you as long as the georeferenced image is inside the extent of the map and in the same spatial reference.

Thanks for the reply, will check it out.

Thanx,
Pankaj Roy

Re: How to overlay a georefrenced image (geotiff) to the webmap?

BetsySchenck-Gardner — Wed, 18 Sep 2013 13:18:41 GMT

I don't believe you can overlay a tif image onto the map. Your map image has to be in gif, jpeg, bmp, or png format according to the MapImage documentation.

Re: How to overlay a georefrenced image (geotiff) to the webmap?

aa20 — Mon, 13 Jul 2015 08:25:15 GMT

This thread is old, but still number 1 when searching google for "geotiff arcgis javscript", so i thought I'd share how I accomplished it

overlaying a geotiff into arcgis javascript is not possible with just the api. I used 2 other libraries to do it:

seikichi/tiff.js · GitHub

xlhomme/GeotiffParser.js · GitHub

The way I did it was to load the file as an ArrayBuffer

reader.readAsArrayBuffer(input.files[0]);

Re: How to overlay a georefrenced image (geotiff) to the webmap?

aa20 — Mon, 13 Jul 2015 08:29:11 GMT

etc. explore the 2 libs

Re: How to overlay a georefrenced image (geotiff) to the webmap?

ArmandoFreites16 — Thu, 07 Jan 2021 02:22:23 GMT

there are plans to georeference in 3d (x and z) an image, i good idea, to show crosS sections schemes on local scenes