Placing an image on the ESRI map

JustinSmyth — Wed, 11 Sep 2013 12:02:42 GMT

Is there a simple way to just put an image on the map, without using a KMLLayer or WMSLayer or using the ArcGIS server? We have our own server that has images on it, just want to put them on the map. Thanks.

Re: Placing an image on the ESRI map

RobertScheitlin__GISP — Wed, 11 Sep 2013 12:07:02 GMT

Justin,

Simple... Mybe not... But there is a way in the API. Looks at the docs for the MapImage

https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/layers/supportClasses/MapImage.html

Re: Placing an image on the ESRI map

JustinSmyth — Wed, 11 Sep 2013 12:19:25 GMT

Thanks....do you happen to have an example with that class? Any idea if using plain old DynamicServiceLayer would work? Was going to try that next.

Re: Placing an image on the ESRI map

RobertScheitlin__GISP — Sun, 12 Dec 2021 02:57:01 GMT

Justin,

You can always add the geo-referenced image to a map and publish that map as a map service.

Here is a sample that adds a geo-refernced image to the map.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:esri="http://www.esri.com/2008/ags"
               pageTitle="NWS Radar Image Map">
    <fx:Script>
        <![CDATA[
            import com.esri.ags.events.MapEvent;
            import com.esri.ags.layers.MapImageLayer;
            import com.esri.ags.layers.supportClasses.MapImage;
            
            import spark.formatters.DateTimeFormatter;

            private var _mapImage:MapImage;
            [Bindable] private var _Region:Array;
            [Bindable]
            private var vRegion:String;
            private var eXmin:Number;
            private var eYmin:Number;
            private var eXmax:Number;
            private var eYmax:Number;
            
            private var lDate:String;
            private var rdate:Date;
            
            private var dateFormatter:DateTimeFormatter;
            
            public static const UPPERMISSVLY:Array = ["uppermissvly",-9965455.3476,4243023.8602,-11645922.8435,6438891.8024];
            
            protected function map_loadHandler(event:MapEvent):void
            {
                dateFormatter = new DateTimeFormatter();
                dateFormatter.dateTimePattern = "yyyyMMdd_HHmm";
                
                var now:Date = new Date();
                rdate = new Date(now.setMinutes(8));
                //Adjust to UTC
                rdate.minutes += rdate.timezoneOffset;
                rdate = dateAdd("hours", -3, rdate);
                
                var sdate:String = dateFormatter.format(rdate.toString());
                
                _Region = UPPERMISSVLY;
                vRegion = _Region[0];
                eXmin = _Region[1];
                eYmin = _Region[2];
                eXmax = _Region[3];
                eYmax = _Region[4];
                var mapImageExtent:Extent = new Extent(eXmax,eYmin,eXmin,eYmax, map.spatialReference);
                
                _mapImage = new MapImage();
                _mapImage.source = "http://radar.weather.gov/ridge/Conus/RadarImg/" + vRegion + "_" + sdate + "_N0Ronly.gif";
                _mapImage.extent = mapImageExtent;
                var mil:MapImageLayer = new MapImageLayer();
                mil.add(_mapImage);
                map.addLayer(mil);
            }
            
            private static function dateAdd( datePart:String, number:Number, date:Date ):Date {
                var _returnDate:Date = new Date( date );
                _returnDate[ datePart ] += number;
                return _returnDate;
            }
            
        ]]>
    </fx:Script>

    
    <fx:Declarations>
        <esri:Extent id="initialExtent"
                     xmin="-9965455.3476" ymin="4243023.8602" xmax="-11645922.8435" ymax="6438891.8024">
            <esri:SpatialReference wkid="102100"/>
        </esri:Extent>
    </fx:Declarations>
    
    <s:controlBarContent>
        <s:RichText width="100%">
            This sample demonstrates how to add an geo-refernced image to the map.
        </s:RichText>
    </s:controlBarContent>
    
    <esri:Map id="map" extent="{initialExtent}" wrapAround180="true" load="map_loadHandler(event)">
        <esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/>
    </esri:Map>
</s:Application>

Re: Placing an image on the ESRI map

JustinSmyth — Fri, 13 Sep 2013 19:57:07 GMT

Thanks for that example, MapImageLayer worked for what I wanted to do.

Re: Placing an image on the ESRI map

RobertScheitlin__GISP — Fri, 13 Sep 2013 20:05:28 GMT

Justin,

Glad I could help. Now it is your turn.

Don't forget to click the Mark as answer check on this post and to click the top arrow (promote).
Follow these steps as shown in the below graphic:

topic Placing an image on the ESRI map in ArcGIS API for Flex Questions

Placing an image on the ESRI map

Re: Placing an image on the ESRI map

Re: Placing an image on the ESRI map

Re: Placing an image on the ESRI map

Re: Placing an image on the ESRI map

Re: Placing an image on the ESRI map