Can't get MapImage to display

SteveCole · ‎01-29-2013

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>

derekswingley1 · ‎01-29-2013

Looks like we probably introduced a bug with 3.3. The issue is that adding a MapImageLayer to a map before the map's onLoad event has fired doesn't work. This is because the MapImageLayer checks that images have a spatial reference that matches the map's (or is something that can be converted client side like wgs84 to web mercator or vice versa). The workaround is to wait for the map to load before adding the MapImageLayer: http://jsfiddle.net/FCx4Q/

I'll look into this further and, if it's a bug, I'll log it.

View solution in original post

derekswingley1 · ‎01-29-2013

Looks like we probably introduced a bug with 3.3. The issue is that adding a MapImageLayer to a map before the map's onLoad event has fired doesn't work. This is because the MapImageLayer checks that images have a spatial reference that matches the map's (or is something that can be converted client side like wgs84 to web mercator or vice versa). The workaround is to wait for the map to load before adding the MapImageLayer: http://jsfiddle.net/FCx4Q/

I'll look into this further and, if it's a bug, I'll log it.

SteveCole · ‎01-30-2013

Thanks, Derek. That did the trick and now the image displays. I feel somewhat special having stumbled across a bug 🙂

One issue I'm having as I try and incorporate this back into a more complex app I'm developing. From a certain LOD out, the image is displayed in its correct location. From that certain LOD inward, however, the image begins to shift westward and continues to shift further westward with each successive zoom in. If I reverse course and zoom back out, the image will get closer and closer back to where it is supposed to be.

I hope to have a live public version I can link to within 2 weeks but for now here are a couple screenshots which show the problem. "ZoomLevel01" shows the mapImageLayer in its correct spatial location. After I zoom my map in one level, I get "zoomLevel02." As you can see, the image has now shifted westward.

I'm stumped as to what may cause this because my app uses the same basemap and initial extent as what I originally posted in the simple example (and what's used in your fiddle).

Thoughts, guesses?

[ATTACH=CONFIG]21217[/ATTACH][ATTACH=CONFIG]21218[/ATTACH]

SteveCole · ‎02-04-2013

Here is the live link for the "drifting" overlay I was previously describing:

http://gismaps.snoco.org/fws/

Load the page.
Under the "Show Me' dropdown, click the checkbox for Radar Image.
Now zoom out one level. Note where the radar returns are.
Zoom out again one level. Watch the radar returns drift back eastward.
Zoom out one more level. This represents the true spatial position of the overlay.

KenBuja · ‎02-05-2013

If you zoom in farther, you'll notice that the image gets squeezed horizontally instead of shifted. Try this by turning on the 1 hour precipitation layer, panning to Cape Flattery, and zooming in a few more levels.

SteveCole · ‎02-05-2013

Yeah, I noticed that it happens to any of these NWS mapImage overlays. I just wish I knew how to correct it!