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

Pankajroy · ‎09-15-2013

Hi All,

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

Thanx,
Pankaj Roy

Pankajroy · ‎09-15-2013

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

JohnGravois · ‎09-16-2013

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.

derekswingley1 · ‎09-16-2013

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/

Pankajroy · ‎09-17-2013

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

BetsySchenck-Gardner · ‎09-18-2013

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.

aa20 · ‎07-13-2015

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]);

aa20 · ‎07-13-2015

etc. explore the 2 libs

ArmandoFreites16 · ‎01-06-2021

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