How to select multiple features by mouse click event in ArcGIS JS API 3.x

Question

I am trying to select multiple features in a feature layer by using "hold 'ctrl' button and mouse click event". I am using ArcGIS JS API 3.x.

I have created the US State boundary FeatureLayer by using FeatureCollection and able to display the layer on map. User wanted to select multiple states by mouse click while holding 'ctrl' or 'alt' key.

var featureLayer = new esri.layers.FeatureLayer(featureCollection, {
    id: stateLayer,
    opacity: 0.30,
    visible: true,
    infoTemplate: infoTemplate
});
g_esri.map.addLayer(featureLayer);
featureLayer.on("click", onBoundaryClick);

function onBoundaryClick(evt) {
    var g = evt.graphic;
    g_esri.map.infoWindow.setContent(g.getContent());
    g_esri.map.infoWindow.show(evt.screenPoint, g_esri.map.getInfoWindowAnchor(evt.screenPoint));
    formatInfotemplate(false, g);
}

I tried to follow some of the below links,

a. selecting-multiple-features-with-graphics

b. select-multiple-features-by-mouse-clicks

But couldn't able to get through,

cabesuon · Accepted Answer · 2021-01-05 01:34:37Z

It's been a long time I do not work with 3.xx API. Anyways maybe this example that I made for you can help you. The idea is basically listen to click events on the feature layer to catch selected graphics and then added to selected collection. When adding just check if the desire keys are pressed.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Labeling features client-side</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.35/esri/css/esri.css">
    <style>
      html, body, #map {
        height: 100%; width: 100%; margin: 0; padding: 0; 
      }
    </style>

   <script src="https://js.arcgis.com/3.35/"></script>
    <script>
      var map;
    
      require([
        "esri/map", 
        "esri/geometry/Extent",
        "esri/layers/FeatureLayer",
        "esri/layers/GraphicsLayer",
        "esri/symbols/SimpleLineSymbol",
        "esri/symbols/SimpleFillSymbol",
        "esri/renderers/SimpleRenderer",
        "esri/Color",
         
        "dojo/domReady!"
      ], function(Map, Extent, FeatureLayer, GraphicsLayer,
                  SimpleLineSymbol, SimpleFillSymbol, 
                  SimpleRenderer, Color) 
      {
        const bbox = new Extent({"xmin": -1940058, "ymin": -814715, "xmax": 1683105, "ymax": 1446096, "spatialReference": {"wkid": 102003}});
      
        const map = new Map("map", {
          extent: bbox   
        });


        const statesUrl = "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3";
        const states = new FeatureLayer(statesUrl, {
          id: "states",
          outFields: ["*"]
        });

        map.addLayer(states);

        const color = new Color("#00ffff");
        const line = new SimpleLineSymbol("solid", color, 1.5);
        const symbol = new SimpleFillSymbol("solid", line, null);
        const renderer = new SimpleRenderer(symbol);
        const selected = new GraphicsLayer();
        selected.setRenderer(renderer);
        map.addLayer(selected);

        let ctrl = false;
        let shift = false;

        map.on("key-down", function (evt) {
          if (evt.key === "Control") {
            ctrl = true;
          } else if (evt.key === "Shift") {
            shift = true;
          }
        });

        map.on("key-up", function (evt) {
          if (evt.key === "Control") {
            ctrl = false;
          } else if (evt.key === "Shift") {
            shift = false;
          }
        });

        states.on("click", function (evt) {
          if (!ctrl && !shift) {
            selected.clear();
          }
          selected.add(evt.graphic.clone());
          console.log(`Selected: ${selected.graphics.length}`);
        });
    
      });
    </script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

Collectives™ on Stack Overflow

How to select multiple features by mouse click event in ArcGIS JS API 3.x

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related