Skip To Content

CSV 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"
               pageTitle="CSV Layer">
    <!--
    Description:
    This sample demonstrates how to use the CSVLayer as an operational
    layer in your ArcGIS API for Flex application.  The sample uses
    a csv resource from the USGS Earthquake Hazards Program website
    that contains the earthquakes from the past seven days magnitude
    2.5 and greater.

    This csv file was generated by the USGS Earthquake Hazards Program website.
    http://earthquake.usgs.gov/earthquakes/catalogs/

    Documentation:
    For more information, see the API documentation.
    https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/Map.html
    https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/Map.html#center
    https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/Map.html#level
    https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/components/ContentNavigator.html
    https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/components/LabelDataRenderer.html
    https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/components/ContentNavigator.html#style:headerColor
    https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/components/ContentNavigator.html#style:headerBackgroundColor
    https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/components/supportClasses/InfoWindow.html#style:backgroundColor
    https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/geometry/WebMercatorMapPoint.html
    https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/layers/ArcGISTiledMapServiceLayer.html
    https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/layers/CSVLayer.html
    https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/layers/GraphicsLayer.html#infoWindowRenderer
    https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/renderers/ClassBreaksRenderer.html
    https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/renderers/supportClasses/ClassBreakInfo.html
    https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/symbols/SimpleLineSymbol.html
    https://developers.arcgis.com/en/flex/api-reference/com/esri/ags/symbols/SimpleMarkerSymbol.html

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

    <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|ContentNavigator
        {
            headerColor: #666666;
            headerBackgroundColor: #D0D0D0;
        }
        esri|InfoWindow
        {
            backgroundColor: #EEEEEE;
        }
        s|Label
        {
            color: #666666;
        }
    </fx:Style>

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

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

            protected function csvLayer_loadErrorHandler(event:LayerEvent):void
            {
                Alert.show(event.fault.faultString + "\n\n" + event.fault.faultDetail, "CSVLayer Error " + event.fault.faultCode);
            }

            protected function csvLayer_faultHandler(event:FaultEvent):void
            {
                Alert.show(event.fault.faultString + "\n\n" + event.fault.faultDetail, "CSVLayer Error " + event.fault.faultCode);
            }
        ]]>
    </fx:Script>

    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
        <esri:SimpleLineSymbol id="sls"
                               alpha="0.8"
                               color="0x666666"/>
        <esri:ClassBreaksRenderer id="magnitudeRenderer" field="mag">
            <esri:defaultSymbol>
                <esri:SimpleMarkerSymbol color="0xEEEEEE"
                                         outline="{sls}"
                                         size="30"
                                         style="diamond"/>
            </esri:defaultSymbol>
            <esri:ClassBreakInfo maxValue="3" minValue="2">
                <esri:symbol>
                    <esri:SimpleMarkerSymbol id="m2"
                                             color="0x0A57FC"
                                             outline="{sls}"
                                             size="12"
                                             style="triangle"/>
                </esri:symbol>
            </esri:ClassBreakInfo>
            <esri:ClassBreakInfo maxValue="4" minValue="3">
                <esri:symbol>
                    <esri:SimpleMarkerSymbol id="m3"
                                             color="0x1CA2A3"
                                             outline="{sls}"
                                             size="12"
                                             style="triangle"/>
                </esri:symbol>
            </esri:ClassBreakInfo>
            <esri:ClassBreakInfo maxValue="5" minValue="4">
                <esri:symbol>
                    <esri:SimpleMarkerSymbol id="m4"
                                             color="0x60AD12"
                                             outline="{sls}"
                                             size="14"
                                             style="triangle"/>
                </esri:symbol>
            </esri:ClassBreakInfo>
            <esri:ClassBreakInfo maxValue="6" minValue="5">
                <esri:symbol>
                    <esri:SimpleMarkerSymbol id="m5"
                                             color="0xFFFE0A"
                                             outline="{sls}"
                                             size="16"
                                             style="triangle"/>
                </esri:symbol>
            </esri:ClassBreakInfo>
            <esri:ClassBreakInfo maxValue="7" minValue="6">
                <esri:symbol>
                    <esri:SimpleMarkerSymbol id="m6"
                                             color="0xFDA208"
                                             outline="{sls}"
                                             size="19"
                                             style="triangle"/>
                </esri:symbol>
            </esri:ClassBreakInfo>
            <esri:ClassBreakInfo maxValue="8" minValue="7">
                <esri:symbol>
                    <esri:SimpleMarkerSymbol id="m7"
                                             color="0xFB5107"
                                             outline="{sls}"
                                             size="23"
                                             style="triangle"/>
                </esri:symbol>
            </esri:ClassBreakInfo>
            <esri:ClassBreakInfo minValue="8">
                <esri:symbol>
                    <esri:SimpleMarkerSymbol id="m8"
                                             color="0xFB0007"
                                             outline="{sls}"
                                             size="28"
                                             style="triangle"/>
                </esri:symbol>
            </esri:ClassBreakInfo>
        </esri:ClassBreaksRenderer>
    </fx:Declarations>

    <s:controlBarContent>
        <s:RichText width="100%">
            This sample demonstrates how to use the CSVLayer as an operational
            layer in your ArcGIS API for Flex application.  The sample uses
            a csv resource from the USGS Earthquake Hazards Program website
            that contains the earthquakes from the past seven days magnitude
            2.5 and greater.  Click on an earthquake to get more information.
        </s:RichText>
    </s:controlBarContent>

    <esri:Map level="2" wrapAround180="true">
        <esri:center>
            <esri:WebMercatorMapPoint lon="-171.009636" lat="27.355359"/>
        </esri:center>
        <esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer"/>
        <esri:CSVLayer id="csvLayer"
                       fault="csvLayer_faultHandler(event)"
                       latitudeFieldName="latitude"
                       loadError="csvLayer_loadErrorHandler(event)"
                       longitudeFieldName="longitude"
                       renderer="{magnitudeRenderer}"
                       url="http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.csv">
            <esri:sourceFields>
                <esri:Field name="mag"/>
                <esri:Field name="depth"/>
                <esri:Field name="place" alias="Location"/>
                <esri:Field name="time"/>
            </esri:sourceFields>
            <esri:infoWindowRenderer>
                <fx:Component>
                    <esri:LabelDataRenderer label="{data.place}">
                        <s:Scroller width="100%" height="100%">
                            <s:VGroup paddingBottom="5"
                                      paddingLeft="5"
                                      paddingRight="5"
                                      paddingTop="5">
                                <s:Label text="{ data.time }"/>
                                <s:Label text="Magnitude: { data.mag }"/>
                                <s:Label text="Depth: { data.depth }"/>
                            </s:VGroup>
                        </s:Scroller>
                    </esri:LabelDataRenderer>
                </fx:Component>
            </esri:infoWindowRenderer>
        </esri:CSVLayer>
    </esri:Map>
</s:Application>