Changing color for certain features within a feature layer

Anonymous User — Fri, 26 Jun 2020 09:19:22 GMT

I am trying to change the color of certain features within a feature layer. Here is my code:

The if statement isn't too important, but when that condition is true, I want those features to have a certain color, and when the condition is not true, I want those features to be black. What seems to be happening, is the features only get their symbol / color from the layer (response.features.layer.renderer.symbol).

Am I doing something wrong here? Any help or guidance would be much appreciated.

Re: Changing color for certain features within a feature layer

RobertScheitlin__GISP — Fri, 26 Jun 2020 12:26:45 GMT

Michael,

The standard way to do this is to add the result feature (graphic) to the views graphics layer with your desired symbology. So basically you are overlaying a graphic with your symbology on top of the existing feature.

Re: Changing color for certain features within a feature layer

Anonymous User — Fri, 26 Jun 2020 16:32:40 GMT

Hi Robert,

Thanks for the reply. I'm not sure I understand what you are referring to. Would you be able to provide an example or documentation of sorts?

Re: Changing color for certain features within a feature layer

RobertScheitlin__GISP — Sat, 11 Dec 2021 16:44:30 GMT

Sure here is a modified sample:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Change Feature Color</title>

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

    #menu {
      padding: 1em;
    }

    #navy {
      background-color: #25427c;
    }

    #green {
      background-color: #039962;
    }

    #turqoise {
      background-color: #a2f9f5;
    }

    .color-btn {
      border: 1px solid rgb(173, 172, 172);
      width: 40px;
      height: 20px;
      cursor: pointer;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css" />
  <script src="https://js.arcgis.com/4.15/"></script>

  <script>
    require([
      "esri/Map",
      "esri/PopupTemplate",
      "esri/layers/FeatureLayer",
      "esri/views/MapView"
    ], function (
      Map,
      PopupTemplate,
      FeatureLayer,
      MapView
    ) {

      //Create the map
      var map = new Map({
        basemap: "gray"
      });

      //Create the MapView
      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-117.08, 34.10],
        zoom: 12
      });

      view.popup.viewModel.highlightEnabled = false;

      view.ui.add("menu", "top-right");

      var template = new PopupTemplate({
        title: "Trail run",
        content: "{name}"
      });

      featureLayer = new FeatureLayer({
        url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/TrailRuns/FeatureServer/0",
        outFields: ["*"],
        popupTemplate: template
      });
      map.add(featureLayer);

      function setTrailColor(color) {
        view.graphics.removeAll();
        var query = featureLayer.createQuery();
        query.where = "name = 'Morton Peak - great run. great trail'"
        featureLayer.queryFeatures(query).then(function (response) {
          response.features.map(function(graphic){
            var gra = graphic.clone();
            graphic.layer.renderer.getUniqueValueInfo(graphic).then(function(uniqueValueInfo){
              var sym = uniqueValueInfo.symbol.clone();
              sym.color = color;
              gra.symbol = sym;
              view.graphics.add(gra);
            });
          });
        }).catch(function(err){
          console.error(err);
        });
      }

      document.getElementById("navy").addEventListener("click", function () {
        setTrailColor("#25427c");
      });
      document.getElementById("green").addEventListener("click", function () {
        setTrailColor("#039962");
      });
      document.getElementById("turqoise").addEventListener("click", function () {
        setTrailColor("#a2f9f5");
      });
    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
  <div id="menu" class="esri-widget">
    <h4>Change Morton Peak Trail Color</h4>
    <button id="navy" class="color-btn"></button>
    <button id="green" class="color-btn"></button>
    <button id="turqoise" class="color-btn"></button>
  </div>
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

topic Changing color for certain features within a feature layer in ArcGIS JavaScript Maps SDK Questions

Changing color for certain features within a feature layer

Re: Changing color for certain features within a feature layer

Re: Changing color for certain features within a feature layer

Re: Changing color for certain features within a feature layer