Community

Highlighting polygon which highlights other polygons based on condition

954
1
09-18-2019 01:07 PM
JohnnyHarley2
by
New Contributor
‎09-18-2019 01:07 PM

Sorry kind of a new developer here. I am using ArcGIS Javascript 4.12 from a feature layer on AGOL. I want to click on a polygon which based on a condition highlights others. For example: Click on Nebraska which then highlights Virginia, Missouri, Kansas, and Nevada. Is there anyway to do this in the Javascript API? Thanks!

0 Kudos
1 Reply
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎09-20-2019 06:18 AM

Johnny,

  So here is a sample for your scenario.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>Highlight features based on condition - 4.12</title>

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

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

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

        var statesRenderer = {
          type: "simple", // autocasts as new SimpleRenderer()
          symbol: {
            type: "simple-fill", // autocasts as new SimpleFillSymbol()
            style: "none",
            outline: {
              width: 2,
              color: "white"
            }
          },
          label: "State boundaries"
        };

        var layer = new FeatureLayer({
          url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/2",
          renderer: statesRenderer,
          outFields: ['state_name']
        });

        var map = new Map({
          basemap: "satellite",
          layers: [layer]
        });

        var view = new MapView({
          container: "viewDiv",
          map: map,
          zoom: 5,
          center: [-100, 39],
          highlightOptions: {
            color: [255, 241, 58],
            fillOpacity: 0.4
          }
        });

        var lyrView, highlight;

        view.whenLayerView(layer).then(function(layerView) {
          lyrView = layerView;
        });

        view.on("click", function (event) {
          // Search for graphics at the clicked location. View events can be used
          // as screen locations as they expose an x,y coordinate that conforms
          // to the ScreenPoint definition.
          view.hitTest(event).then(function (response) {
            if (response.results.length) {
              var graphic = response.results.filter(function (result) {
                // check if the graphic belongs to the layer of interest
                return result.graphic.layer === layer;
              })[0].graphic;

              if(graphic.attributes.state_name === 'Nebraska'){
                var query = layer.createQuery();
                query.where = "state_name IN ('Virginia', 'Missouri', 'Kansas', 'Nevada')";
                layer.queryFeatures(query).then(function(result){
                  if (highlight) {
                    highlight.remove();
                  }
                  highlight = lyrView.highlight(result.features);
                });
              }else{
                if (highlight) {
                    highlight.remove();
                  }
              }
            }
          });
        });
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos