Alignment of MapImageLayer and BaseMap

TerryGiles · ‎09-25-2014

I'm trying to grab the latest radar image from the National Weather Service and overlay it on my map. According to the NWS, the images are in WGS84, NAD83. I can easily add it with a MapImageLayer but the image does not align with the basemap. . Is the JSAPI not able to project images on the fly from Geographic to Web Mercator as does with graphics? I've tried converting the bounding coordinates to web mercator as well bu the alignment issue persists. I know NWS also has a Esri Map Service for the radar but it has a noticeable lag when the map starts.

Any suggestions?

Thank you,

Terry

<html>
    <head>
        <script type="text/javascript" src="http://js.arcgis.com/3.10"></script>
        <link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/nihilo/nihilo.css">
        <link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.10/js/esri/css/esri.css" />
        <script type="text/javascript">

            var map;
              require(["esri/map","esri/layers/ArcGISDynamicMapServiceLayer",
                  "esri/layers/MapImageLayer","esri/layers/MapImage" ,"dojo/domReady!"], 
                  function(Map, ArcGISDynamicMapServiceLayer, MapImageLayer ,MapImage ) { 
                map = new Map("mapDiv", {
                  center: [-56.049, 38.485],
                  zoom: 3,
                  basemap: "gray"
                });
                   var layer = new MapImageLayer({
                       'id' : 'radar',
                       'opacity' : 0.5
                   });

                   var mi = new MapImage({
                       'href' : 'http://radar.weather.gov/ridge/Conus/RadarImg/latest.gif',
                       'extent' :{ 'xmin': -127.629361176, 'ymin':21.6615237154, 'xmax': -66.5269235294, 'ymax': 50.4156120199, 'spatialReference': { 'wkid': 4326 }}
                   });

                   //AGS Dynamic works but has 2-3second lag time on load
                   // var agsLayer = new ArcGISDynamicMapServiceLayer("http://gis.srh.noaa.gov/arcgis/rest/services/RIDGERadar/MapServer",{'id':'dynamicRadar'});

                   //try with Web Merc coords and wkid - same result
                   // var mi = new MapImage({
                   //     'href' : 'http://radar.weather.gov/ridge/Conus/RadarImg/latest.gif',
                   //     'extent' :{ 'xmin': -14207635.4964, 'ymin':2471437.22006, 'xmax': -7404679.6016, 'ymax': 6518566.07416, 'spatialReference': { 'wkid': 3857 }}
                   // });


                   layer.addImage(mi);

                   //map.addLayer(agsLayer);
                   map.addLayer(layer);

              });


        </script>
    </head>
    <body class='nihilo' style="width:100%;height100%">
        <div id="mapDiv" style="width:100%;height100%" />
    </body>

</html>