Skip To Content

KML Layer with popups

<?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 - Earthquakes">
    <!--
    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.
    Once the kml/kmz is converted the features are client-side and can provide more interaction,
    click on a feature to see more details.
    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 sample displays the earthquakes of the past 7 days, and was generated from the
    USGS Earthquake Hazards Program website.  Once the kml/kmz is converted, the features are client-side
    and can provide more interaction. Click on a feature to see more details.

    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
    https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/layers/KMLLayer.html

    This kml file was generated by the USGS Earthquake Hazards Program website.
    http://earthquake.usgs.gov/earthquakes/feed/v1.0/
    http://earthquake.usgs.gov/earthquakes/feed/v1.0/kml.php

    The contents of this file is the earthquakes of the past 7 days.
    http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/1.0_week_age.kml

    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 esri "http://www.esri.com/2008/ags";
        esri|Navigation
        {
            left: null;
            right: 20;
        }
        s|Panel, s|ToggleButton
        {
            chromeColor: #403F33;
            backgroundColor: #62696D;
            backgroundAlpha: 0.8;
            color: #FFFFFF;
        }
    </fx:Style>

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

            import mx.controls.Alert;

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

            protected function earthquakes_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 sample displays the earthquakes of the past 7 days, and was generated from the
            <s:a href="http://earthquake.usgs.gov/earthquakes/feed/v1.0/">USGS Earthquake Hazards Program</s:a>
            website.  Once the kml/kmz is converted, the features are client-side
            and can provide more interaction. Click on a feature to see more details.
        </s:RichEditableText>
    </s:controlBarContent>

    <esri:Map id="map" wrapAround180="true">
        <esri:extent>
            <esri:Extent xmin="-20191210" ymin="2003651" xmax="-7080731" ymax="8402347">
                <esri:SpatialReference wkid="102100"/>
            </esri:Extent>
        </esri:extent>
        <esri:ArcGISTiledMapServiceLayer url="http://services.arcgisonline.com/arcgis/rest/services/World_Topo_Map/MapServer"/>
        <esri:KMLLayer id="earthquakes" name="Latest earthquakes"
                       load="earthquakes_loadHandler(event)"
                       loadError="earthquakes_loadErrorHandler(event)"
                       url="http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/1.0_week_age.kml"/>
    </esri:Map>

    <s:ToggleButton height="40"
                    right="20" top="230"
                    click="{!legendPanel.visible ? legendPanel.visible = true : legendPanel.visible = false}"
                    fontSize="14"
                    fontWeight="bold"
                    label="{!legendPanel.visible ? 'Show Legend' : 'Hide Legend'}"
                    visible="{earthquakes.loaded}"/>

    <s:Panel id="legendPanel"
             left="{map.width /2 - legendPanel.width /2}" bottom="75"
             title="Legend"
             visible="false">
        <s:layout>
            <s:VerticalLayout paddingTop="10"/>
        </s:layout>
        <esri:Legend height="300"
                     layers="{[]}"
                     map="{map}"/>
    </s:Panel>

    <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>