Adding image on map

[PavelVasilyev]

Is there a way to add image on esri map using javascript api 4.0 (or 3.16)?

[RobertScheitlin__GISP · Accepted solution]

Pavel,

  In 3.16 look at the MapImageLayer class:

MapImageLayer | API Reference | ArcGIS API for JavaScript

[PavelVasilyev]

Great, thanks! Sorry that I missed that in the documentation.

[PanagiotisPapadopoulos]

A sample code is below, the images placed on application folder on this sample.

dojo.require("esri.map");

      dojo.require("esri.layers.MapImageLayer");

      function init() {

        //var initialExtent = new esri.geometry.Extent({"xmin":4488509,"ymin":5477146,"xmax":4491257,"ymax":5479894,"spatialReference":{"wkid":31494}});

        var initialExtent = new esri.geometry.Extent({"xmin":23.66,"ymin":37.84,"xmax":23.84,"ymax":38,"spatialReference":{"wkid":4326}});

        var map = new esri.Map("map",{extent:initialExtent});

        //var imageParameters = new esri.layers.ImageParameters();

        //imageParameters.format = "jpeg";  //set the image type to PNG24, note default is PNG8.

        //Takes a URL to a non cached map service.

        //var dynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://83.235.175.160:2121/ArcGIS/rest/services/iMAGEsERVER/MapServer", {"opacity":0.1 , "imageParameters":imageParameters});

        //map.addLayer(dynamicMapServiceLayer);

        //var mi = new esri.layers.MapImage({

  //  'extent': { 'xmin': 4488510.42536545, 'ymin': 5477147.18036545, 'xmax': 4491256.57463455, 'ymax': 5479893.32963455, 'spatialReference': { 'wkid': 31494 }},

  //  'href': '_ags_map91b8e8b3704d49bfac34ee9b14674ecf.png'

  //});

  var a1 = new esri.layers.MapImage({

   'extent': { 'xmin': 23.758746844, 'ymin': 37.945549845, 'xmax': 23.761399943, 'ymax': 37.947220227, 'spatialReference': { 'wkid': 4326 }},

   'href': 'A1.jpg'

  });

  var a2 = new esri.layers.MapImage({

   'extent': { 'xmin': 23.761392805, 'ymin': 37.945545086, 'xmax': 23.764045904, 'ymax': 37.947215468, 'spatialReference': { 'wkid': 4326 }},

   'href': 'A2.jpg'

  });

  var a3 = new esri.layers.MapImage({

   'extent': { 'xmin': 23.764036386, 'ymin': 37.945545086, 'xmax': 23.766689485, 'ymax': 37.947215468, 'spatialReference': { 'wkid': 4326 }},

   'href': 'A3.jpg'

  });

  var b1 = new esri.layers.MapImage({

   'extent': { 'xmin': 23.758753982, 'ymin': 37.947194053, 'xmax': 23.761407081, 'ymax': 37.948864434, 'spatialReference': { 'wkid': 4326 }},

   'href': 'B1.jpg'

  });

  var b2 = new esri.layers.MapImage({

   'extent': { 'xmin': 23.761397564, 'ymin': 37.947191673, 'xmax': 23.764050663, 'ymax': 37.948862055, 'spatialReference': { 'wkid': 4326 }},

   'href': 'B2.jpg'

  });

  var b3 = new esri.layers.MapImage({

   'extent': { 'xmin': 23.764038765, 'ymin': 37.947189294, 'xmax': 23.766691864, 'ymax': 37.948859675, 'spatialReference': { 'wkid': 4326 }},

   'href': 'B3.jpg'

  });

  var mil = new esri.layers.MapImageLayer({

         'id': 'usgs_screen_overlay'

         });

        mil.addImage(a1);

        mil.addImage(a2);

        mil.addImage(a3);

        mil.addImage(b1);

        mil.addImage(b2);

        mil.addImage(b3);

  map.addLayer(mil);

      }

      dojo.addOnLoad(init);

[PavelVasilyev]

Thanks for the sample code!

[RobertScheitlin__GISP]

Pavel,

Don't forget to mark this question as answered by clicking on the "Correct Answer" link on the reply that answered your question.