Hide Table of Contents
Analysis
Data Reviewer
Dynamic Layers
Editing
Feature Layers
Feature Table
Graphics
Map
Mobile
Online and Portal
Popups and Info Windows
Query and Select
Renderers, Symbols, Visualization
Search
Feature layer with selection
Explore in the sandbox
Open in CodePen
View live sample
Download as a zip file
Description
This JavaScript sample shows how to use the draw toolbar to select gas fields from a feature layer. The gas fields are displayed using a feature layer with ONDEMAND mode. On-demand mode retrieves selected features and features within the current extent.Click the select fields button then draw a rectangle on the map.The toolbar's onDrawEnd event fires when you finish sketching the selection rectangle. Notice that the sketch is used with the FeatureLayer's selectFeatures method to perform a spatial query.
dojo.connect(selectionToolbar, "onDrawEnd", function(geometry) {
selectionToolbar.deactivate();
selectQuery.geometry = geometry;
featureLayer.selectFeatures(selectQuery, esri.layers.FeatureLayer.SELECTION_NEW);
});
selectionToolbar.deactivate();
selectQuery.geometry = geometry;
featureLayer.selectFeatures(selectQuery, esri.layers.FeatureLayer.SELECTION_NEW);
});
After the features are selected onSelectionComplete fires and the total gas production for the selected fields is calculated.
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>Layer in a map service - [ON-DEMAND]</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.29/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.29/esri/css/esri.css" />
<script src="https://js.arcgis.com/3.29/"></script>
<script>
var map;
require([
"esri/InfoTemplate",
"esri/map",
"esri/layers/FeatureLayer",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/tasks/query",
"esri/toolbars/draw",
"dojo/dom",
"dojo/on",
"dojo/parser",
"dojo/_base/array",
"esri/Color",
"dijit/form/Button",
"dojo/domReady!"
],
function (
InfoTemplate, Map, FeatureLayer, SimpleFillSymbol, SimpleLineSymbol,
Query, Draw, dom, on, parser, arrayUtil, Color
) {
parser.parse();
var selectionToolbar, featureLayer;
map = new Map("map", {
basemap: "streets",
center: [-97.395, 37.537],
zoom: 11
});
map.on("load", initSelectToolbar);
var fieldsSelectionSymbol =
new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,
new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.5]));
var content = "<b>Status</b>: ${STATUS}" +
"<br><b>Cumulative Gas</b>: ${CUMM_GAS} MCF" +
"<br><b>Total Acres</b>: ${APPROXACRE}" +
"<br><b>Avg. Field Depth</b>: ${AVG_DEPTH} meters";
var infoTemplate = new InfoTemplate("${FIELD_NAME}", content);
featureLayer = new FeatureLayer("https://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/KSPetro/MapServer/1",
{
mode: FeatureLayer.MODE_ONDEMAND,
infoTemplate: infoTemplate,
outFields: ["*"]
});
featureLayer.setDefinitionExpression("PROD_GAS='Yes'");
featureLayer.setSelectionSymbol(fieldsSelectionSymbol);
featureLayer.on("selection-complete", sumGasProduction);
featureLayer.on("selection-clear", function () {
dom.byId('messages').innerHTML = "<i>No Selected Fields</i>";
});
map.addLayer(featureLayer);
on(dom.byId("selectFieldsButton"), "click", function () {
selectionToolbar.activate(Draw.EXTENT);
});
on(dom.byId("clearSelectionButton"), "click", function () {
featureLayer.clearSelection();
});
function initSelectToolbar (event) {
selectionToolbar = new Draw(event.map);
var selectQuery = new Query();
on(selectionToolbar, "DrawEnd", function (geometry) {
selectionToolbar.deactivate();
selectQuery.geometry = geometry;
featureLayer.selectFeatures(selectQuery,
FeatureLayer.SELECTION_NEW);
});
}
function sumGasProduction (event) {
var productionSum = 0;
//summarize the cumulative gas production to display
arrayUtil.forEach(event.features, function (feature) {
productionSum += feature.attributes.CUMM_GAS;
});
dom.byId('messages').innerHTML = "<b>Selected Fields Production: " +
productionSum + " mcf. </b>";
}
});
</script>
</head>
<body class="claro">
<button id="selectFieldsButton" data-dojo-type="dijit/form/Button">Select Fields</button>
<button id="clearSelectionButton" data-dojo-type="dijit/form/Button">Clear Selection</button><br>
<div id="map" style="position: relative; width:700px; height:500px; border:1px solid #000;"></div>
<span id="messages"></span>
</body>
</html>