How to select multiple features from one layer?

RobertKirkwood · ‎02-07-2025

I would like to be able to select multiple polygons from a service feature layer using JavaScript. I see this example but have not been able to get it to work with JS 4.30:

https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/select-multiple-features-by-mouse...

RobertKirkwood · ‎02-11-2025

I got thgis to work using a thread here:

https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/ctrl-mouse-click/td-p/425312

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Select by Point</title>

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

    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
    <script>
        require([
            "esri/views/draw/Draw",
            "esri/Map",
            "esri/Graphic",
            "esri/layers/GraphicsLayer",
            "esri/layers/FeatureLayer",
            "esri/geometry/Point",
            "esri/geometry/Multipoint",
            "esri/views/MapView"

        ], function (Draw, Map, Graphic, GraphicsLayer, FeatureLayer, Point, Multipoint, MapView) {
            const pntGraphics = new GraphicsLayer();
            let viewClickEvtHandler = null, viewMouseMoveEvtHandler = null;
            var renderer = {
                type: "simple", // autocasts as new SimpleRenderer()
                symbol: {
                    type: "simple-fill", // autocasts as new SimpleFillSymbol()
                    color: [255, 255, 255, 0.5],
                    style: "none",
                    outline: {  // autocasts as new SimpleLineSymbol()
                        color: "black",
                        width: 2
                    }
                }
            };
            const statesLyr = new FeatureLayer({
                url: 'https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/2',
                // renderer: renderer,
                outFields: ['*']
            });

            let drawPnt, graphic, ctrlKey = false, highlight, statesLyrView;

            const map = new Map({
                basemap: "topo-vector",
                layers: [pntGraphics, statesLyr]
            });

            const view = new MapView({
                container: "viewDiv",
                map: map,
                center: [-105.570, 41.313193],
                zoom: 15.5
            });

            statesLyr.when(function () {
                view.whenLayerView(statesLyr).then(function (layerView) {
                    statesLyrView = layerView;
                });
            })

            const draw = new Draw({
                view: view
            });

            var sym = {
                type: "simple-marker",
                style: "circle",
                color: [0, 255, 255, 0.6],
                size: "8px",
                outline: {
                    color: [0, 255, 255, 1],
                    width: 1
                }
            };

            view.ui.add("point-button", "top-left");

            document.getElementById("point-button").onclick = drawPoint;

            function drawPoint() {
                if (viewMouseMoveEvtHandler) {
                    viewMouseMoveEvtHandler.remove()
                    viewMouseMoveEvtHandler = null
                }
                if (viewClickEvtHandler) {
                    viewClickEvtHandler.remove()
                    viewClickEvtHandler = null
                }
                const action = draw.create("point");
                viewMouseMoveEvtHandler = view.on('pointer-move', (evt) => {
                    if (evt.native.ctrlKey) {
                        moveCtrlKey = true;
                    } else {
                        moveCtrlKey = false;
                    }
                })
                viewClickEvtHandler = view.on('pointer-down', (evt) => {
                    if (evt.native.ctrlKey) {
                        ctrlKey = true;
                    } else {
                        ctrlKey = false;
                    }
                })
                if (highlight) {
                    highlight.remove();
                }

                // Give a visual feedback to users as they move the pointer over the view
                action.on("cursor-update", function (evt) {
                    view.graphics.removeAll();
                    drawPnt = new Point({
                        x: evt.coordinates[0],
                        y: evt.coordinates[1],
                        spatialReference: view.spatialReference
                    });
                    graphic = new Graphic({
                        geometry: drawPnt,
                        symbol: sym
                    });
                    view.graphics.add(graphic);
                    if (ctrlKey && !moveCtrlKey) {
                        draw.reset();
                        view.graphics.removeAll();
                        selectStates();
                    }
                });

                action.on("draw-complete", function (evt) {
                    drawPnt = new Point({
                        x: evt.coordinates[0],
                        y: evt.coordinates[1],
                        spatialReference: view.spatialReference
                    });

                    graphic = new Graphic({
                        geometry: drawPnt,
                        symbol: sym
                    });
                    pntGraphics.add(graphic);
                    if (ctrlKey) {
                        drawPoint();
                    } else {
                        view.graphics.removeAll();
                        selectStates();
                    }
                });
                view.focus();
            };

            function selectStates() {
                ctrlKey = false
                moveCtrlKey = false
                if (viewMouseMoveEvtHandler) {
                    viewMouseMoveEvtHandler.remove()
                    viewMouseMoveEvtHandler = null
                }
                if (viewClickEvtHandler) {
                    viewClickEvtHandler.remove()
                    viewClickEvtHandler = null
                }
                let mp = new Multipoint({
                    spatialReference: view.spatialReference
                });
                let pntArray = pntGraphics.graphics.map(function (gra) {
                    mp.addPoint(gra.geometry);
                });

                const query = {
                    geometry: mp,
                    outFields: ["*"],
                    outSpatialReference: view.spatialReference,
                    returnGeometry: true
                };

                statesLyr.queryFeatures(query)
                    .then(function (results) {
                        const graphics = results.features;

                        var employeeEditData = [
                            { name: "", id: "" },
                            { name: "", id: "" }
                        ];
                        employeeEditData = [];
                        for (var i = 0; i < results.features.length; i++) {
                            if (results.features[i].attributes.BUILDINGID) {
                                employeeEditData.push({
                                    name: results.features[i].attributes.BUILDINGID,
                                    id: results.features[i].attributes.OBJECTID,
                                    OBJECTID: results.features[i].attributes.OBJECTID,
                                    LONGNAME: results.features[i].attributes.LONGNAME,


                                });
                                console.log(results.features[i].attributes.OBJECTID)
                            }

                        }

                        var floorRoomAvailable = [];
                        for (var k = 0; k < employeeEditData.length; k++) {
                            //                                console.log (myRoomAvailableData[k].OBJECTID)
                            floorRoomAvailable.push(
                                employeeEditData[k].OBJECTID
                            );

                        }
                        console.log(floorRoomAvailable)

                        console.log(employeeEditData)

                        console.log(graphics)

                        // remove existing highlighted features
                        if (highlight) {
                            highlight.remove();
                        }

                        // highlight query results
                        highlight = statesLyrView.highlight(graphics);
                        console.log("Test")
                        pntGraphics.removeAll();
                    }).catch(function (err) {
                        console.error(err);
                    })
            }
        });
    </script>
</head>

<body>
    <div id="viewDiv">
        <div id="point-button" class="esri-widget esri-widget--button esri-interactive" title="Select Countries">
            <span class="esri-icon-map-pin"></span>
        </div>
    </div>

</body>

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍