View the Example Source Code

Overview

This example is a demo of how to retrieve data from ArcGIS with the CitySDK. It applies to any ArcGIS REST API that provides a FeatureService (it does not yet support MapService).

The data shown here is part of the Opportunity Project and is provided by The Department of Housing and Urban Development.

The Opportunity Project

Let's build something amazing together.

Join Us in Slack Join Us on GitHub

1. Select Dataset

2. Select Desired Variables & Filter / Where

Fields / Variables

If no variables are selected, ArcGIS will return ALL of them by default.

Different services and layers will have different variables available. Displayed below is the Alias and Variable name (the latter is in brackets []). When building requests, use the variable name.

Filter Results

Results can be narrowed down with a WHERE statement. The syntax follows standard SQL where clauses. The interactive forms below are for your convienence. When populating a request object, the where clause should be a string in SQL syntax.

3. Select SDK Call and Submit

CitySDK Call Type

Get the Data

Update Data

The Request




      

    



    

      

        
The Returned Data

      

      

        
        


        
        

          

            

              

                
                


                

                
                

                
              

            


          

          

            

          

          
    var sdk = new CitySDK();
    var arcgis = sdk.modules.arcgis;

    arcgis.enable();

    // Set the server to pull data from
    arcgis.DEFAULT_ENDPOINTS.apiURL = "//services.arcgis.com/VTyQ9soqVukalItT/";

	var request = ;

    arcgis.APIRequest(request, function (response) {
            // Output raw JSON to raw data tab
            jQuery("#data").text(JSON.stringify(response));
                        // Output raw JSON to raw data tab
            jQuery("#data").text(JSON.stringify(response));

            // Output Formatted Data Table Tab
                        // Create Table Header
            jQuery("#dataSeriesResult thead tr").empty();
            var headerFieldList = [];
            jQuery.each(response.fields, function (index, value) {
                headerFieldList.push(value.name);
                jQuery("#dataSeriesResult thead tr").append("" + value.alias + "");
            });

                        // Add Each Record
            jQuery("#dataSeriesResult tbody").empty();
            jQuery.each(response.features, function (index, value) {
                var newFeature = "";
                        jQuery.each(headerFieldList, function (i, v) {
                        if (v in value.attributes) {
                        newFeature += "
                        " + value.attributes[v] + "
                        ";
                        } else {
                        newFeature += "
                        
                        ";
                        }
                        });
                        newFeature += "
                    ";
                jQuery("#dataSeriesResult tbody").append(newFeature);
            });

    });