Skip To Content

ArcGIS.com Web Map (OAuth)

<?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"
               initialize="application_initializeHandler(event)"
               pageTitle="Load a preconfigured WebMap from ArcGIS.com">
    <!--
    Description:
    This sample demonstrates how to use a Web Map from www.arcgis.com
    to create the basemap and operational layers of your Flex map.
    The itemId can be hard coded, passed through a url parameter,
    or retrieved through searching by the Portal class.
    Using the WebMapUtil class and the itemId of a specific web map
    (on ArcGIS Online or Portal for ArcGIS) you can create a Flex Map object.

    If the web map is secure you will be prompted to log in using OAuth.

    To support OAuth (for secure web maps on ArcGIS.com) this sample was registered (with its URL)
    as an application.  See http://flexteam.maps.arcgis.com/home/item.html?id=7ad4fbacebee4e9cbe28982e5d81d86a
    To run this sample on your own URL, you need to add your application as an item on ArcGIS.com, and register your own URL(s).
    Registration is only needed if you want to test secure web maps on ArcGIS.com.

    Steps to set up for OAuth
    =========================
    #1 Obtain app id
        See http://resources.arcgis.com/en/help/arcgisonline/index.html#/Adding_applications/010q00000077000000/ including "Registering your app"

    #2 update code below with your own App ID
        var oAuthInfo:OAuthInfo = new OAuthInfo("bDKOrqYvsLUewvMD");

    #3 If you imported the full project from the samples repo, the following has already been done for you.
        If you just copied this sample to a new project, you need to:
        (A) Copy oauth-callback.html and oauth-helper.js to your Flex project's src folder.
        (B) Add the following line to the index.template.html file inside the project's html-template folder just above the line for swfobject.js.
            <script type="text/javascript" src="oauth-helper.js"></script>
        The two oauth files can be found in the oauth folder inside the ZIP file with the API Library
        (http://links.esri.com/flex-api/latest-download).

    Documentation:
    For more information, see the API documentation.
    https://developers.arcgis.com/en/authentication/
    https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/components/IdentityManager.html
    https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/events/WebMapEvent.html
    https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/portal/WebMapUtil.html
    https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/portal/Portal.html

    Author, design, configure your web map using ArcGIS.com and leverage that web map inside the ArcGIS API for Flex.
    http://www.arcgis.com/home/item.html?id=ff454fbb59844b259c861f39c027715e
    -->

    <fx:Script>
        <![CDATA[
            import com.esri.ags.components.IdentityManager;
            import com.esri.ags.components.supportClasses.OAuthInfo;
            import com.esri.ags.events.IdentityManagerEvent;
            import com.esri.ags.events.WebMapEvent;

            import mx.controls.Alert;
            import mx.events.FlexEvent;
            import mx.rpc.events.FaultEvent;

            []private var webMapID:String = "ff454fbb59844b259c861f39c027715e";

            private function application_initializeHandler(event:FlexEvent):void
            {
                IdentityManager.instance.enabled = true;

                // replace with your own App ID
                var oAuthInfo:OAuthInfo = new OAuthInfo("bDKOrqYvsLUewvMD");
                IdentityManager.instance.registerOAuthInfos([ oAuthInfo ]);
                IdentityManager.instance.addEventListener(IdentityManagerEvent.SIGN_IN, signInHandler);
                IdentityManager.instance.addEventListener(IdentityManagerEvent.SIGN_OUT, signOutHandler);

                var urlParams:Object = getURLParameters();

                if (urlParams.hasOwnProperty('webmapid'))
                {
                    // http://somename.mycompany.com/samples/ArcGISWebMap.html?webmapid=12148d94ace9424d934a085abe58b088
                    var webmapidParam:String = urlParams['webmapid'] as String;
                    webMapIDTextInput.prompt = webmapidParam;
                    webMapUtil.createMapById(webmapidParam);
                }
                else
                {
                    webMapUtil.createMapById(webMapID);
                    webMapIDTextInput.prompt = webMapID;
                }
            }

            private function webMapUtil_createMapByIdCompleteHandler(event:WebMapEvent):void
            {
                /*
                * event.item (the web map item)
                * event.itemData (the actual information that makes up the web map [ baseMap, operationalLayers, version, etc])
                *
                * var webMapItem:Object = event.item;
                * webMapItem.id (web map id)
                * webMapItem.owner (Who owns the document on ArcGIS.com)
                * webMapItem.snippet (web map summary)
                * webMapItem.title (web map title)
                */
                var webMapItem:Object = event.item as Object;
                webMapPanel.title = webMapItem.title;
                webMapLabel.text = webMapItem.snippet + "\nClick on a feature to get more information.";
                mapGroup.removeAllElements();
                mapGroup.addElement(event.map);
            }

            private function loadWebMapButton_clickHandler(event:MouseEvent):void
            {
                webMapUtil.createMapById(webMapIDTextInput.text);
            }

            private function webMapIDTextInput_enterHandler(event:FlexEvent):void
            {
                webMapUtil.createMapById(webMapIDTextInput.text);
            }

            private function getURLParameters():Object
            {
                var result:URLVariables = new URLVariables();

                try
                {
                    if (ExternalInterface.available)
                    {
                        // Use JavaScript to get the search string from the current browser location.
                        // Use substring() to remove leading '?'.
                        // See http://livedocs.adobe.com/flex/3/langref/flash/external/ExternalInterface.html
                        var search:String = ExternalInterface.call("location.search.substring", 1);
                        if (search && search.length > 0)
                        {
                            result.decode(search);
                        }
                    }
                }
                catch (error:Error)
                {
                    Alert.show(error.toString());
                }

                return result;
            }

            private function esriService_faultHandler(event:FaultEvent):void
            {
                var errorString:String = "Unable to load webmap\n" + event.fault.faultString;
                Alert.show(errorString, "WebMap Loading Errors");
            }

            private function signInHandler(event:IdentityManagerEvent):void
            {
                signOutBtn.visible = true;
            }

            private function signOutHandler(event:IdentityManagerEvent):void
            {
                signOutBtn.visible = false;
            }
        ]]>
    </fx:Script>

    <fx:Declarations>
        <esri:WebMapUtil id="webMapUtil"
                         createMapByIdComplete="webMapUtil_createMapByIdCompleteHandler(event)"
                         fault="esriService_faultHandler(event)"
                         portalURL="{portalURLTextInput.text ? portalURLTextInput.text : 'https://www.arcgis.com'}">
            <esri:geometryService>
                <esri:GeometryService url="http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/Geometry/GeometryServer"/>
            </esri:geometryService>
        </esri:WebMapUtil>
        <!-- Log ERROR level messages -->
        <s:TraceTarget includeCategory="true"
                       includeLevel="true"
                       level="8"/>
    </fx:Declarations>

    <s:controlBarLayout>
        <s:VerticalLayout gap="10"
                          paddingBottom="7"
                          paddingLeft="10"
                          paddingRight="10"
                          paddingTop="7"/>
    </s:controlBarLayout>
    <s:controlBarContent>
        <s:RichText width="100%">
            This sample demonstrates how to use a Web Map from www.arcgis.com
            to create the basemap and operational layers of your Flex map.
            The itemId can be hard coded, passed through a url parameter,
            or retrieved through searching by the Portal class.
        </s:RichText>
        <s:HGroup verticalAlign="baseline">
            <s:Label width="100" text="Portal URL:"/>
            <s:TextInput id="portalURLTextInput"
                         width="300"
                         enter="webMapIDTextInput_enterHandler(event)"
                         prompt="http://companyorg.maps.arcgis.com"/>
            <s:Button id="signOutBtn"
                      click="IdentityManager.instance.signOut()"
                      label="Sign Out"
                      visible="false"/>
        </s:HGroup>
        <s:HGroup verticalAlign="baseline">
            <s:Label width="100" text="Web map ID:"/>
            <s:TextInput id="webMapIDTextInput"
                         width="300"
                         enter="webMapIDTextInput_enterHandler(event)"/>
            <s:Button click="loadWebMapButton_clickHandler(event)" label="Load"/>
        </s:HGroup>
    </s:controlBarContent>

    <s:Group id="mapGroup"
             width="100%" height="100%"/>
    <s:Panel id="webMapPanel"
             width="200"
             right="20" top="20"
             title="Load a WebMap from ArcGIS.com">
        <s:layout>
            <s:VerticalLayout paddingLeft="5" paddingTop="5"/>
        </s:layout>
        <s:RichEditableText id="webMapLabel"
                            width="90%"
                            text="ArcGIS.com Web Map"/>
    </s:Panel>
</s:Application>