<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<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="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css" />
<script src="http://js.arcgis.com/3.13/"></script>
</head>
<body class="claro">
<button id="selectFieldsButton">Select Fields</button>
<button id="clearSelectionButton">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>
var map;
require([
"esri/InfoTemplate",
"esri/map",
"esri/graphic",
"esri/layers/FeatureLayer",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/tasks/query",
"esri/toolbars/draw",
"dojo/dom",
"dojo/on",
"dojo/_base/array",
"esri/Color",
"dojo/domReady!"
],
function (
InfoTemplate, Map, Graphic, FeatureLayer, SimpleFillSymbol, SimpleLineSymbol,
Query, Draw, dom, on, arrayUtil, Color
) {
var selectionToolbar, featureLayer;
var ls = localStorage;
var key = location.href + '--id-selection';
var parseToGraphics = function (str) {
if (!str) { return undefined; }
return JSON.parse(str).map(function(x) {
return new Graphic(x);
});
};
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("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/KSPetro/MapServer/1",
{
mode: FeatureLayer.MODE_ONDEMAND,
infoTemplate: infoTemplate,
outFields: ["*"]
});
featureLayer.on('load', function() {
var items = parseToGraphics(ls.getItem(key));
if (items) {
var q = new Query();
q.objectIds = items.map(function(x) {
return x.attributes.OBJECTID;
});
featureLayer
.selectFeatures(q, FeatureLayer.SELECTION_NEW)
.then(function() {
items.map(function(x) {
x.setInfoTemplate(infoTemplate);
});
map.infoWindow.setFeatures(items);
map.infoWindow.show(items[0].geometry.getCentroid());
});
}
});
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();
ls.removeItem(key);
});
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)
.then(function(results) {
var data = results.map(function(x) { return x.toJson(); });
ls.removeItem(key);
ls.setItem(key, JSON.stringify(data));
});
});
}
function sumGasProduction (fSet) {
var productionSum = 0;
//summarize the cumulative gas production to display
arrayUtil.forEach(fSet.features, function (feature) {
productionSum += feature.attributes.CUMM_GAS;
});
dom.byId('messages').innerHTML = "<b>Selected Fields Production: " +
productionSum + " mcf. </b>";
}
});
Output
300px
You can jump to the latest bin by adding /latest
to your URL
Keyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |