How to use the mouse select multiple features on a web based map

Question

Let me know if this question isn't detailed or specific enough.

I have a map on a webpage. I have a series of tools on the webpage where I select just a single feature on the map and then perform an action on that feature. i.e. reshaping the feature, deleting the feature, displaying a popup with detailed attributes about the feature. All these work great with just one feature.

But now I have a need to select multiple features and perform the same operation on them as a group. Since all the features will be located in close proximity, what I'd like to do is be able to select them by using the mouse to drag a rectangle over those features. Ideally this would give me an array of features to iterate over or perhaps pass back to the server for server side operations.

Here is what I've tried so far:

        require(["esri/toolbars/draw"], function (draw) {
            tb = new draw(map);
            tb.on("draw-end", getFeatures);
            tb.activate(draw.EXTENT);
        });

    getFeatures = function (evt) {

    require(["esri/geometry/Polygon", "esri/tasks/query"], function (polygon, query) {
        var extentPoly = new polygon(evt.geometry);
        var extentQuery = new query();
        extentQuery.geometry = extentPoly.getExtent();

        dojo.forEach(map.graphics.graphics, function (graphic) {
            if (extentQuery.contains(graphic.geometry)) {
                selectedFeatures.push(graphic.getContent());
            }
        });
    });

However, when I get to extentQuery.contains, it says that contains is not a member of extentQuery.

Answer 1

You'll need to make use of the Draw Tool, where users can draw graphics on the map. You'll need to set up an event on("draw-end") to pass the user's created graphic and do a spatial query task on your existing features.

The result of that spatial query will be a feature collection, which you can then pass on to your other tools. Here is an example of how to set up the Draw tool.