Skip To Content

Basic KML Layer

<?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:mx="library://ns.adobe.com/flex/mx"
               xmlns:esri="http://www.esri.com/2008/ags"
               currentState="loadingState"
               pageTitle="KMLLayer - Weather">
    <!--
    Description:
    This sample demonstrates how to use the KMLLayer class of the ArcGIS API for Flex.
    Use this layer type when you want to add kml/kmz files as a layer to your ArcGIS API for Flex application.
    This basic sample displays a KMLGroundOverlay of the current radar from NOAA.
    http://radar.weather.gov/ridge/Conus/RadarImg/latest_radaronly.gif

    The KMLLayer uses a utility service from ArcGIS.com, therefore your kml/kmz must be publicly accessible on the internet.
    http://utility.arcgis.com/sharing/kml

    This kml file was generated by the RIDGE Image and Warning Output to KML/KMZ feature on the National Weather Service website.
    http://radar.weather.gov/ridge/kmzgenerator.php
    The contents of this file was generated from the National & regional mosaics section on the page.
    It consists of the National "Lower 48 States"

    Documentation:
    For more information, see the API documentation.
    https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/layers/KMLLayer.html

    http://resources.arcgis.com/en/help/flex-api/concepts/index.html#/Types_of_layers/017p00000027000000/
    -->

    <s:states>
        <s:State name="mainState"/>
        <s:State name="loadingState"/>
    </s:states>

    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
        @namespace esri "http://www.esri.com/2008/ags";
        esri|Navigation
        {
            left: null;
            right: 20;
        }
        s|Panel
        {
            backgroundColor: #3D78FF;
            chromeColor: #2B0D66;
            backgroundAlpha: 0.8;
            color: #FFFFFF;
        }
    </fx:Style>

    <fx:Script>
        <![CDATA[
            import com.esri.ags.events.LayerEvent;

            import mx.controls.Alert;

            protected function lower48Reflectivity_loadHandler(event:LayerEvent):void
            {
                currentState = 'mainState';
            }

            protected function lower48Reflectivity_loadErrorHandler(event:LayerEvent):void
            {
                if (event.fault)
                {
                    Alert.show(event.fault.faultDetail + "\n" + event.fault.faultString);
                }
            }
        ]]>
    </fx:Script>

    <s:controlBarContent>
        <s:RichEditableText width="100%" editable="false">
            This sample demonstrates how to use the KMLLayer class of the ArcGIS API for Flex.
            Use this layer type when you want to add kml/kmz files as a layer to your ArcGIS API for Flex application.
            This basic sample displays a KMLGroundOverlay of the current radar from
            <s:a href="http://radar.weather.gov/ridge/kmzgenerator.php">NOAA</s:a>.
        </s:RichEditableText>
    </s:controlBarContent>

    <esri:Map id="map">
        <esri:extent>
            <esri:Extent xmin="-14646671" ymin="3421416" xmax="-7132605" ymax="6170703">
                <esri:SpatialReference wkid="102100"/>
            </esri:Extent>
        </esri:extent>
        <esri:ArcGISTiledMapServiceLayer url="http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/>
        <esri:KMLLayer id="lower48Reflectivity" name="Lower 48 Reflectivity"
                       load="lower48Reflectivity_loadHandler(event)"
                       loadError="lower48Reflectivity_loadErrorHandler(event)"
                       url="http://dl.dropbox.com/u/62421751/RIDGE_NationalLower48Reflectivity.kmz"/>
    </esri:Map>

    <s:Panel id="loadingGroup"
             width="200" height="100"
             left="{map.width /2 - loadingGroup.width /2}" top="{map.height / 2}"
             includeIn="loadingState"
             title="Please Wait">
        <s:layout>
            <s:VerticalLayout horizontalAlign="center"
                              paddingBottom="10"
                              paddingLeft="10"
                              paddingRight="10"
                              paddingTop="10"/>
        </s:layout>
        <mx:ProgressBar id="progressBar"
                        width="80%"
                        indeterminate="true"/>
    </s:Panel>
</s:Application>