AnsweredAssumed Answered

Can't get MapImage to display

Question asked by evtguy on Jan 29, 2013
Latest reply on Feb 5, 2013 by evtguy
I want to add some weather service radar overlays to my app. Originally, I was hoping to add them via a KML/KMZ as provided by this NWS site. After reading the API documentation about KMLLayers, i concluded that this type of KML layer might not be supported (image overlay). That led me to the MapImage layer and I'm having no luck getting the image to display.

While investigating the guts of the NWS KML file, I see that it's simply a georeferenced GIF file:
[ATTACH=CONFIG]21185[/ATTACH]

I noted the lat/long extents, along with the image dimensions and have tried implementing a simple example with no success. So what am I missing??

THANKS!
Steve

Code:
<!DOCTYPE html> <html>   <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">       <!--The viewport meta tag is used to improve the presentation and behavior of the samples        on iOS devices-->     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">     <title>Map Image Test</title>       <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/claro/claro.css">     <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css">     <style>       html, body, #map {         padding:0;         margin:0;         height:100%;       }     </style>      <script>var dojoConfig = {parseOnLoad: true};</script>     <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/"></script>     <script>       dojo.require("esri.map");    dojo.require("esri.layers.MapImageLayer");           var map;              dojo.ready(function() {    var initExtent = new esri.geometry.Extent({     "xmin": -13592500,     "ymin": 6060280,     "xmax": -13506825,     "ymax": 6166129,     "spatialReference": {"wkid": 3857}   });           map = new esri.Map("map", {           basemap: "streets",           extent:initExtent         });      // Define the NWS Radar Layer   var radarMi = new esri.layers.MapImage({     'extent': { 'xmin': -125.725156, 'ymin': 45.222770, 'xmax': -119.252062, 'ymax': 51.156440, 'spatialReference': { 'wkid': 4326 }},     'href': "http://radar.weather.gov/ridge/RadarImg/N0R/ATX_N0R_0.gif"   });   radarMi.height = 550;   radarMi.width = 600;   radarMi.scale = 1;      var nwsRadarLayer = new esri.layers.MapImageLayer();   nwsRadarLayer.addImage(radarMi);      map.addLayer(nwsRadarLayer);       });     </script>   </head>      <body class="claro">     <div id="map"></div>   </body> </html>

Attachments

Outcomes