3

I've uploaded GeoJSON to Esri cloud and created a feature layer. Now I'm able to plot the featurelayer into my map. I'm trying to color each feature based on measures which comes from my DB. Here is link to jsfiddle

Let's say we are going to add a measure, i.e., Profit of the state Texas is 100. So I'd like to add {'Profit':100} as a field to the Feature.

Here is the code,

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Data-driven continuous color - 4.7</title>

  <link rel="stylesheet" href="https://js.arcgis.com/4.7/esri/css/main.css">
    <script>
    var dojoConfig = {
      has: {
        "esri-featurelayer-webgl": 1
      }
    }
  </script>
  <script src="https://js.arcgis.com/4.7/"></script>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/FeatureLayer",
      "esri/widgets/Legend",
      "esri/Graphic",
      "esri/tasks/support/Query",
  "esri/tasks/QueryTask",
      "dojo/domReady!"
    ], function(
      Map, MapView, FeatureLayer, Legend, Graphic, Query, QueryTask,
    ) {

      var defaultSym = {
        type: "simple-fill", // autocasts as new SimpleFillSymbol()
        outline: { // autocasts as new SimpleLineSymbol()
          color: "lightgray",
          width: 0.5
        }
      };

      var map = new Map({
        basemap: "streets"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-85.050200, 33.125524],
        zoom: 6
      });


    var openSpacesRenderer = {
        "type": "class-breaks",
        "field": "CENSUSAREA",
        "classBreakInfos": [
          {
            "symbol": {
              "color": [
                45,128,120,255
              ],
              "outline": {
                "width": 0
              },
              "type": "simple-fill",
              "style": "solid"
            },
            "label": "0 to 1,629",
            "minValue": 0,
            "maxValue": 100000
          },
          {
            "symbol": {
              "color": [
                173,212,106,255
              ],
              "outline": {
                "width": 0
              },
              "type": "simple-fill",
              "style": "solid"
            },
            "label": "> 1,629 to 3,754",
            "minValue": 100001,
            "maxValue": 200000
          },
          {
            "symbol": {
              "color": [
                226,235,211,255
              ],
              "outline": {
                "width": 0
              },
              "type": "simple-fill",
              "style": "solid"
            },
            "label": "> 3,754 to 11,438",
            "minValue": 200001,
            "maxValue": 1000000
          }
        ]
      }

      var featureLayer = new FeatureLayer({
        url: "https://services9.arcgis.com/JPp8avz1ETW9XJJr/arcgis/rest/services/USA_Outline/FeatureServer/0",
        outFields: ["*"],
        renderer: openSpacesRenderer
      });


      map.add(featureLayer);

      let graphics;

        view.when(featureLayer).then(function(layerView) {
        //debugger;
          layerView.watch("updating", function(value) {
            if (!value) { // wait for the layer view to finish updating 
              // query all the features available for drawing.
                  layerView.queryFeatures({
                    geometry: view.extent,
                    outFields: ["*"],
                    returnGeometry: true
                  }).then(function(results) { 
                    for(var r in results){
                        results[r].attributes['profit']= Math.random()*100
                        console.log(results[r].attributes);
                    }
                  }).catch(function(e) {
                    console.error("query failed: ", e);
                  });
            }
          });
        });
    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>

</html>

Now in the for loop I'm trying to add a attribute profit with what we have. Then if I change field variable of openSpacesRenderer as profit, it is not working. How can I add a new field to the existing feature layer?

1

Use the featureLayer's method applyEdits
EDIT: The applyEdits method is used to apply updates/additions and data deletion to a FeatureLayer. From the link above: If client-side features are added, removed or updated at runtime using applyEdits() then use queryFeatures() to return updated features.

| improve this answer | |
0

You can use Arcade expressions to calculatenew (temporary) fields, and then use them for popups and/or labeling.

https://developers.arcgis.com/javascript/latest/guide/arcade/index.html https://developers.arcgis.com/javascript/latest/sample-code/index.html?search=arcade

| improve this answer | |
  • I think your answer would better if it included some sample code to do this rather than just links to where that might be found. – PolyGeo Jun 10 at 0:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.