Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<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

Dismiss x
public
Bin info
odoepro
0viewers