Table source from ArcGIS Server | ArcGIS API for JavaScript

This sample demonstrates how to work with a feature layer with a dynamic data source. The data source for the feature layer is defined using esri.layers.TableDataSource.

var dataSource = new esri.layers.TableDataSource();
dataSource.workspaceId = "MyDatabaseWorkspaceIDSSR2";
dataSource.dataSourceName = "egdb.DBADMIN.USLakes";
var layerSource = new esri.layers.LayerDataSource();
layerSource.dataSource = dataSource;

Once the source is defined we can provide this to the feature layer constructor. Note that the FeatureLayer url doesn't have the layer id at the end like you might expect from a feature layer. In this case it ends with dynamicLayer. This only works with map service's where supportsDynamicLayers is true.

var layerUrl = 'http://servicesbeta4.esri.com/arcgis/rest/services/USA/MapServer/dynamicLayer';
var featureLayer = new esri.layers.FeatureLayer(layerUrl, {
  mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
  outFields: ["*"],
  infoTemplate: infoTemplate,
  source: layerSource
});

Requires ArcGIS Server 10.1 or greater

Code

<!DOCTYPE html>
<html>
  <head>
    <title>Dynamic Layer</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
    
    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/esri/css/esri.css">
    <style>
    html, body, #mapDiv, .map.container {
      padding:0;
      margin:0;
      height:100%;
    }
    </style>

    <script src="http://js.arcgis.com/3.6/"></script>
    <script>
    var map;
    require([
      "esri/map", "esri/layers/FeatureLayer", "esri/InfoTemplate",
      "esri/tasks/GeometryService", 
      "esri/layers/TableDataSource", "esri/layers/LayerDataSource",
      "esri/symbols/SimpleFillSymbol", "esri/renderers/SimpleRenderer", 
      "esri/config",
      "dojo/_base/Color", "dojo/domReady!"
    ], function(
      Map, FeatureLayer, InfoTemplate,
      GeometryService, 
      TableDataSource, LayerDataSource, 
      SimpleFillSymbol, SimpleRenderer, 
      esriConfig, 
      Color
    ) {
      esriConfig.defaults.geometryService = new GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

      map = new Map("mapDiv", {
        basemap: "satellite",
        center: [0, 0],
        zoom: 2
      });
        
      map.on("load", initOperationalLayer);

      function initOperationalLayer() {

        var content = "<b>Name</b>: ${NAME}" + "<br /><b>Area</b>: ${ss6.gdb.Lakes.AREA:NumberFormat(places:0)}";
        var infoTemplate = new InfoTemplate("Dynamic Layer", content);

        //define the layer's data source from a table
        var dataSource = new TableDataSource();
        dataSource.workspaceId = "MyDatabaseWorkspaceIDSSR2";
        dataSource.dataSourceName = "ss6.gdb.Lakes";
        var layerSource = new LayerDataSource();
        layerSource.dataSource = dataSource;
        
        //create a new feature layer based on the table data source 
        var featureLayer = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/dynamicLayer", {
          mode: FeatureLayer.MODE_ONDEMAND,
          outFields: ["*"],
          infoTemplate: infoTemplate,
          source: layerSource
        });

        featureLayer.on("load", function(evt){
          //project the extent if the map's spatial reference is different that the layer's extent.
          var gs = esriConfig.defaults.geometryService;
          var extent = evt.layer.fullExtent;
          if ( extent.spatialReference.wkid === map.spatialReference.wkid ) {
            map.setExtent(extent);
          } else {
            gs.project([extent], map.spatialReference).then(function (results) {
              map.setExtent(results[0]);
            });
          }
        });

        var renderer = new SimpleRenderer(
          new SimpleFillSymbol("solid", null, new Color([255, 0, 255, 0.75]) // fuschia lakes!
        ));

        featureLayer.setRenderer(renderer);
        map.addLayer(featureLayer);
        map.infoWindow.resize(150, 105);
      }
    });
    </script>
  </head>
  
  <body class="claro">
    <div id="mapDiv"></div>
  </body>

</html>

View live sample Download as a zip file Explore in the sandbox

Description

Code

View live sample
Download as a zip file
Explore in the sandbox