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?

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

0

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.

  • 2
    While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review – Vince Sep 4 at 15:34
  • Thanks for the review, I hope my edit helped. – NettaB Sep 4 at 18:18

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.