Hide Table of Contents
Analysis
Dynamic Layers
Editing
Feature Layers
Feature Table
Graphics
Map
Mobile
Online and Portal
Popups and Info Windows
Query and Select
Renderers, Symbols, Visualization
Search
On demand mode
Explore in the sandbox
Open in CodePen
View live sample
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.46/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.46/esri/css/esri.css">
<style>
html, body, #mapDiv {
padding:0;
margin:0;
height:100%;
}
</style>
<script src="https://js.arcgis.com/3.46/"></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: "streets-vector",
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>