Changing color for certain features within a feature layer

991
3
06-26-2020 02:19 AM
by Anonymous User
Not applicable

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.

0 Kudos
3 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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.

0 Kudos
by Anonymous User
Not applicable

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?

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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>