[GIS] How to add png image with esri javascript api MapImageLayer Class

arcgis-javascript-apiarcgis-serverimagejavascript

I have a png image that we host that I need to resize and overlay onto a map at specific gps coordinates. Would this be an image class? I can't seem to find any examples that match up with my needs. I can find lots of examples of ArcGIS service layer examples but I don't think this is what I'm looking for. Any ideas?

EDIT

I found that what I want to do is in the MapImageLayer class.

This version works but its in the old 2.5 version

<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});
    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},
      'href': 'http://il.water.usgs.gov/_ags60fb0c9554ef42a58e7024d8464a2ecb.png'
    });
    mil.addImage(mi);

    dojo.connect(map, 'onLoad', function() { 
      dojo.connect(dijit.byId('map'), 'resize', map, map.resize);
    });
  }
  dojo.ready(init);
</script>

This version does not work but its the newer 3.7 version (the one I'd like to work)

<script src="http://js.arcgis.com/3.7/"></script>
  <script>
  require([
  "esri/map",
"esri/layers/MapImageLayer",
  "esri/layers/MapImage"

  ], function(
Map, MapImageLayer, MapImage
  ) {
var map = new Map("mapDiv", {
  center: [-56.049, 38.485],
  zoom: 3,
  basemap: "streets"
  });
  map.on("load", function() {
  // create and add the layer
    var mil = new MapImageLayer();
    map.addLayer(mil);

    // create an add the actual image
    var mi = new MapImage({
      'extent': { 'xmin': -8864908, 'ymin': 3885443, 'xmax': -8762763, 'ymax': 3976997},
      'href': 'http://il.water.usgs.gov/_ags60fb0c9554ef42a58e7024d8464a2ecb.png'
    });
    mil.addImage(mi);
});

});

I just can't seem to find what I'm missing or have wrong.

Best Answer

esri.layers.I finally got it right! I guess my gps coordinates were off.

Here is the working code.

<!DOCTYPE html>
<html>
<head>
<title>Create a Map</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">
<style>
html, body, #mapDiv {
  padding: 0;
  margin: 0;
  height: 100%;
}
</style>

<script src="http://js.arcgis.com/3.7/"></script>
<script>
require([
"esri/map",
"esri/layers/MapImageLayer",
"esri/layers/MapImage"

], function(
Map, MapImageLayer, MapImage
) {
var map = new Map("mapDiv", {
center: [-79.933333,32.783333],
zoom: 9,
basemap: "topo"
});
map.on("load", function() {
// create and add the layer
var mil = new esri.layers.MapImageLayer();
map.addLayer(mil);

// create an add the actual image
var mi = new esri.layers.MapImage({
  'extent': { 'xmin': -79.933333, 'ymin': 32.783333, 'xmax': -80.933333, 'ymax': 33.783333},
  'href': 'http://il.water.usgs.gov/ifhp/will/_ags60fb0c9554ef42a58e7024d8464a2ecb.png'
});
mil.addImage(mi);
});

});
</script>

</head>
<body class="claro">
<div id="mapDiv"></div>
</body>
</html>

There were zero examples of this online so hopefully someone else who is working with this class finds this useful.

Related Question