Use of esri.layers.MapImageLayer in ArcGIS API for Javascript

GeorgeRaber · ‎10-05-2011

I see this topic has been posted before with no response:

http://forums.arcgis.com/threads/36898-How-to-use-MapImageLayer-in-Layers?highlight=MapImageLayer

So I will try to be a bit more specific. I have an series of static PNG images that are georeferenced that I want to show on the map. Is MapImageLayer the best way to do this and how is to be done. I have tried something like this:

var mol = new esri.layers.MapImageLayer({id:"cwlayer", opacity:0.7});
mol.addImage({extent:newextent, height:h, href:imagelocation, scale:1, width:h})
map.addLayer(mol);

Does anyone have an idea how to do this (without or without using this method). Basically I just want to place an image on the map and pretend it is a layer. Trying to migrate some code from Openlayers.

derekswingley1 · ‎10-05-2011

Yes, it's possible. We didn't publish any samples that directly use this class as it was introduced with the KMLLayer and is used internally by the KMLLayer to display ground overlays. Anyway, the code you posted was pretty close. The missing piece is to create and pass an esri.layers.MapImage object to .addImage() instead of a plain JS object.

Here's some sample code:

<!doctype html>
<html lang="en">
  <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://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/dojo/dijit/themes/tundra/tundra.css">
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/esri/dijit/css/Popup.css">
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      #map{ margin: 0; padding: 0; }
    </style>
    <script>var dojoConfig = { parseOnLoad: true };</script>
    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.5"></script>
    <script>
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("esri.map");
      dojo.require("esri.layers.MapImageLayer");
      
      var map;
      function init() {
        var initExtent = new esri.geometry.Extent({"xmin":-9005991,"ymin":3866418,"xmax":-8620442,"ymax":4022043,"spatialReference":{"wkid":102100}});
        map = new esri.Map("map",{extent:initExtent});
        var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
        map.addLayer(basemap);

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

        // create an add the actual image
        var mi = new esri.layers.MapImage({
          'extent': { 'xmin': -8864908, 'ymin': 3885443, 'xmax': -8762763, 'ymax': 3976997, 'spatialReference': { 'wkid': 3857 }},
          'href': 'http://hdds.usgs.gov/hdds2/view/overlay_file/AM01N33_269827W079_1773002011082800000000MS00'
        });
        mil.addImage(mi);
        
        dojo.connect(map, 'onLoad', function() { 
          dojo.connect(dijit.byId('map'), 'resize', map, map.resize);
        });
      }
      dojo.ready(init);
    </script>
  </head>
  
  <body class="tundra">
    <div data-dojo-type="dijit.layout.BorderContainer" 
         data-dojo-props="design:'headline',gutters:false" 
         style="width: 100%; height: 100%; margin: 0;">
      <div id="map" 
           data-dojo-type="dijit.layout.ContentPane" 
           data-dojo-props="region:'center'"> 
      </div>
    </div>
  </body>
</html>

GeorgeRaber · ‎10-05-2011

I really appreciate the help. I was thinking it might be something like that. The MapImage doc says that it does not have a constructor, that is what threw me off.