Change symbol of individual feature in FeatureLayer

BrianBeck · ‎03-11-2014

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?

TimWitt · ‎03-11-2014

Brian,

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

See this example.

Hope this helps!

Tim

View solution in original post

TimWitt · ‎03-11-2014

Brian,

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

See this example.

Hope this helps!

Tim

JohnathanBarclay · ‎03-13-2014

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

BrianBeck · ‎03-13-2014

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.

BrianBeck · ‎03-13-2014

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.

KenBuja · ‎03-13-2014

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>