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

7968
8
09-15-2013 08:15 PM
Pankajroy
New Contributor
Hi All,

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

Thanx,
Pankaj Roy
0 Kudos
8 Replies
Pankajroy
New Contributor
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
0 Kudos
JohnGravois
Frequent Contributor
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.
0 Kudos
derekswingley1
Frequent Contributor
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/
0 Kudos
Pankajroy
New Contributor
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
0 Kudos
BetsySchenck-Gardner
Occasional Contributor
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.
0 Kudos
aa20
by
New Contributor

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

0 Kudos
aa20
by
New Contributor

etc. explore the 2 libs

0 Kudos
ArmandoFreites16
New Contributor III

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

0 Kudos