Hide Table of Contents
View On demand mode sample in sandbox
On demand mode

Description

This sample shows how to combine a cached base map service with an operational layer. Operational layers are displayed on top of a basemap and contain the data end users work with to perform job specific tasks. The operational layer for this sample is US states data. Instead of retrieving all the features at once the code limits the number of features returned by setting the mode to on-demand. The layer draws quickly in on-demand mode because features are retrieved from the server as needed. On-demand mode fetches the selected features and features within the current map extent. Note that as you pan the feature layer queries features that intersect the current extent and adds them to the map.

Code

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>FeatureLayer On Demand</title>

    <link rel="stylesheet" href="https://js.arcgis.com/3.22/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.22/esri/css/esri.css">
    <style>
      html, body, #mapDiv {
        padding:0;
        margin:0;
        height:100%;
      }
    </style>
    <script src="https://js.arcgis.com/3.22/"></script>
    <script>
      var map;
      require([
        "esri/map", "esri/InfoTemplate", "esri/layers/FeatureLayer",
        "dojo/parser", "dojo/domReady!"
      ], function(
        Map, InfoTemplate, FeatureLayer,
        parser
      ) {
        parser.parse();
        map = new Map("mapDiv", {
          basemap: "national-geographic",
          center: [-96.541, 38.34],
          zoom: 6
        });

        map.on("load", initOperationalLayer);

        function initOperationalLayer() {
          var infoTemplate = new InfoTemplate("${state_name}", "Population (2000):  ${pop2000:NumberFormat}");
          var featureLayer = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/2",{
            mode: FeatureLayer.MODE_ONDEMAND,
            outFields: ["*"],
            infoTemplate: infoTemplate
          });

          map.addLayer(featureLayer);
          map.infoWindow.resize(155,75);
        }
      });
    </script>
  </head>
  <body class="claro">
    <div id="mapDiv">
    </div>
  </body>
</html>