topic Change symbol of individual feature in FeatureLayer in ArcGIS JavaScript Maps SDK Questions

Change symbol of individual feature in FeatureLayer

BrianBeck — Tue, 11 Mar 2014 15:45:12 GMT

Is there a way to set a specific symbol on only a single feature in a FeatureLayer on a map?

I typically think of symbology being set on a layer and the same goes for a selection symbol. In this case, I have a specific map view in my app that centers and zooms to a specific feature on a map and then shows all attributes for that feature in a table next to the map. The other features in the layer are still visible on the map and it may not be readily visible which feature is being focused so I'd like to change the symbol of that one feature.

Any ideas how this could be accomplished?

Re: Change symbol of individual feature in FeatureLayer

TimWitt — Tue, 11 Mar 2014 15:59:50 GMT

Brian,

You could always put a graphic on top of that feature?

See this example.

Hope this helps!

Tim

Re: Change symbol of individual feature in FeatureLayer

JohnathanBarclay — Thu, 13 Mar 2014 12:24:04 GMT

The best way to do this would be to set the FeatureLayer's selection symbol then call the selectFeatures() method.

Re: Change symbol of individual feature in FeatureLayer

BrianBeck — Thu, 13 Mar 2014 13:51:27 GMT

The best way to do this would be to set the FeatureLayer's selection symbol then call the selectFeatures() method.

I originally thought of this, but I would like my users to still be able to click on and select other features in the same FeatureLayer within this view. However the view would remain focused on the original feature.

Re: Change symbol of individual feature in FeatureLayer

BrianBeck — Thu, 13 Mar 2014 13:52:10 GMT

Brian,

You could always put a graphic on top of that feature?

See this example.

Hope this helps!

Tim

This seems to have worked for me. Seems like kind of a work around, but it did the trick.

Re: Change symbol of individual feature in FeatureLayer

KenBuja — Sat, 11 Dec 2021 11:07:22 GMT

At the "ArcGIS API for JavaScript: What Have You Done for Me Lately?" session at this year's Developer Summit, Jerome Yang presented a script that styles features with specific attributes using CSS.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>CSS</title>
    <link rel="stylesheet" type="text/css" href="https://community.esri.com//js.arcgis.com/3.8/js/esri/css/esri.css">
    <style>
      html, body, #map {
        height: 100%;
        margin: 0;
      }
      #legend {
        position: absolute;
        right: 0;
        top: 0;
        width: 120px;
        background-color: #fff;
        padding: 5px;
        margin: 10px;
        border-radius: 5px;
      }
      path[data-name="Washington"] {
        stroke:         rgb(54, 93, 141);
        stroke-width:   1pt;
        stroke-opacity: 1;
        fill:         rgb(54, 93, 141);
        fill-opacity: 0.7;
      }
      path[data-name="Jefferson"] {
        stroke:         rgb(160, 63, 60);
        stroke-width:   1pt;
        stroke-opacity: 1;
        fill:         rgb(160, 63, 60);
        fill-opacity: 0.7;
      }
      path[data-name="Franklin"] {
        stroke:         rgb(115, 140, 61);
        stroke-width:   1pt;
        stroke-opacity: 1;
        fill:         rgb(115, 140, 61);
        fill-opacity: 0.7;
      }
      path:not([data-name="Washington"]):not([data-name="Jefferson"]):not([data-name="Franklin"]) {
        stroke:         rgb(0, 0, 0);
        stroke-width:   0.4pt;
        stroke-opacity: 0.5;
        fill:         rgb(255, 255, 255);
        fill-opacity: 0;
      }
    </style>
    <script src="//js.arcgis.com/3.8/"></script>
    <script>
      require(["esri/map", "esri/layers/FeatureLayer", "dojo/domReady!"], function(Map, FeatureLayer) {
        var map = new Map("map", {
          basemap: "oceans",
          center: [-98.5795,39.828175],
          zoom: 5
        });
        
        var layer = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/3", {
          styling: false,
          dataAttributes: [ "name" ]
        });
        map.addLayer(layer);
      });
    </script>
  </head>
  <body>
    <div id="map"></div>
    <div id="legend">
      <div align="center"><b>Most Common County Names in the US</b></div>
      <hr>
      <div>
        <svg width="12" height="12" version="1.1" xmlns="http://www.w3.org/2000/svg">
          <path data-name="Washington" d="M 1 1 L 11 1 L 11 11 L 1 11 Z" />
        </svg>
        <span>Washington (31)</span>
      </div>


      <div>
        <svg width="12" height="12" version="1.1" xmlns="http://www.w3.org/2000/svg">
          <path data-name="Jefferson" d="M 1 1 L 11 1 L 11 11 L 1 11 Z" />
        </svg>
        <span>Jefferson (27)</span>
      </div>


      <div>
        <svg width="12" height="12" version="1.1" xmlns="http://www.w3.org/2000/svg">
          <path data-name="Franklin" d="M 1 1 L 11 1 L 11 11 L 1 11 Z" />
        </svg>
        <span>Franklin (25)</span>
      </div>


      <div>
        <svg width="12" height="12" version="1.1" xmlns="http://www.w3.org/2000/svg">
          <path data-name="Other" d="M 1 1 L 11 1 L 11 11 L 1 11 Z" />
        </svg>
        <span>Other</span>
      </div>
    </div>
  </body>
</html>