Skip To Content

Access feature data in the cloud

In this topic

Version 3.7

Web editing requires a feature service to provide the symbology and feature geometry of your data. Feature services allow you to create custom REST endpoints to store and query geographic data such as points, lines and polygons. Store custom rendering rules and metadata such as place names, ratings and addresses. Run analysis and computations against your stored data. Create hosted tile sets with baked-in feature services.

The ArcGIS API for Flex provides a FeatureLayer that allows you to access and edit vector map data. Feature services are accessible via a feature layer. Feature layers can do a variety of things and can reference a layer in either a map service or a feature service. However, when you use a feature layer for editing purposes you need to reference a layer in a feature service.

Web editing requires some initial setup of a feature service, which exposes information about a layer's feature geometries and attributes. Also, geometry services can be used to accomplish some Web editing tasks. In order to use the main Editor component, for example, you must have a running geometry service.

When you perform editing, your Web application tells the feature layer which attributes have changed and, if applicable, how the geometry changed. The feature layer also displays the updated features after editing. The feature services can be hosted on ArcGIS Online (Esri's cloud) or on your on-premise servers.

Note:
The following steps assume you have completed the steps necessary to create a new project and add the Flex API library as discussed in the Getting started topic.

Add data from a feature service

Adding data from a feature service is as simple as instantiating a feature layer and adding it to your map. To instantiate the layer, all you need is a URL to the feature service you're going to use, and optionally, the user credentials to access that service. The service you're using in this topic is public, so you do not need to provide any credentials. After adding the layer to the map, you'll add a reference to a geometry service.

  1. In Flash Builder, create a new project and make certain to add the Flex API library and reference the esri namespace.
  2. In the Editor View, add the MXML below to create a map with a set spatial reference and extent, add a basemap layer, and lastly add a feature layer by referencing a specified feature service layer's URL.
    <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"
    
    <esri:Map id="myMap" wrapAround180="true">
       <esri:extent>
          <esri:Extent id="socal"
           xmin="-13471000" ymin="3834000" xmax="-12878000" ymax="4124000">
             <esri:SpatialReference wkid="102100"/>
          </esri:Extent>
       </esri:extent>
     
       <esri:ArcGISTiledMapServiceLayer
        url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/>
       
       <esri:FeatureLayer id="incidentsAreas"
        mode="snapshot"
        outFields="[data_security,description]"
        url="http://sampleserver6.arcgisonline.com/ArcGIS/rest/services/HomelandSecurity/operations/FeatureServer/2"/>
    </esri:Map>
    ...
  3. In the Editor View, add the MXML below declaring the geometry service.
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:esri="http://www.esri.com/2008/ags"
    
    <fx:Declarations>
      <esri:GeometryService id="myGeometryService" 
       url="http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer"/>
    </fx:Declarations>
    
    <esri:Map id="myMap" wrapAround180="true">
       <esri:extent>
    
    </s:Application>
  4. In the Editor View, add the MXML below including reference to the Editor component. This component bundles much of the editing functionality up in one component so that all you need to do is reference it within your code with a corresponding geometry service.
    <esri:FeatureLayer id="incidentsAreas"
       mode="snapshot"
       outFields="[data_security,description]"
       url="http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/HomelandSecurity/operations/FeatureServer/2"/>
    </esri:Map>
    
       <esri:Editor id="myEditor"
        width="100%" height="200"
        geometryService="{myGeometryService}"
        map="{myMap}"/>
    
    ...

  5. Next, add an initialize handler function and reference it within the application.
    ...
    xmlns:esri="http://www.esri.com/2008/ags"
    initialize="application1_initializeHandler(event)">
    
    <fx:Script>
    <![CDATA[
       import mx.events.FlexEvent;
       
       protected function application1_initializeHandler(event:FlexEvent):void
       {
          myEditor.featureLayers = [ incidentsAreas ];
       }
    ]]>
    </fx:Script>
  6. Last, save and run the application.

    You probably notice that the Editor component displays horizontally across the top of the application. Let's adjust this slightly to make it easier to use within the application.

  7. Modify the code snippet to add a layout tag to help enhance the UI.
    ...
    initialize="application1_initializeHandler(event)"
    	
    <s:layout>
       <s:VerticalLayout/>
    </s:layout>
  8. Next, let's add a snippet working with the style tag. This allows us to slightly alter the infowindow component that displays after creating a new feature.
    ...
    <s:layout>
       <s:VerticalLayout/>
    </s:layout>
    
    <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|InfoWindow
       {
        background-color: #FFFFFF;
        border-thickness: 2;
       }
    </fx:Style>
    
    <fx:Script>
    
       <![CDATA[
          import mx.events.FlexEvent;
    
    ...
  9. Run and save the application.
  10. Click on one of the Editor component's feature templates and digitize an area within the map. Once you finish the feature, you should notice an infowindow display. This is where you could edit the attributes of the given feature.

You should now see something similar to the screen capture below.

Feature service editing in Flex API

Accessing data from the cloud is not difficult to accomplish while working with the Flex API. In this particular example, we worked with the Editor component which handles a lot of the editing complexity for you. We were able to create a simple web mapping application with access to editable feature data in the cloud in just a matter of a few steps. Conceptually, this is how the code breaks down:

  • Reference the map, add layers, and lastly get a reference to an editable feature service.
  • Get a reference to a geometry service since it works in conjunction with the Editor component.
  • Instantiate the Editor component and set its associated geometry service and map.
  • Wire the application's initialize handler upon startup of the application so that it instantiates the Editor component correctly.
  • Lastly, modify the UI so that it is easier to work within the application.

Additional Resources

If you are interested in learning more on editing web applications using the Flex API, see the Editing topic where much of the information above is provided in greater detail.