nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Change symbol of individual feature in FeatureLayer

BrianBeck

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?

Vind meer berichten getagd met

Accepted answers

TimWitt

Brian,

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

See this example.

Hope this helps!

Tim

All comments

TimWitt

Brian,

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

See this example.

Hope this helps!

Tim

JohnathanBarclay

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

BrianBeck

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

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

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>

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.