How to set query radius when using keyup event to open popup and fetch features?

268
0
07-18-2022 02:58 PM
Strahanjen
Occasional Contributor II

I'm attempting to set up a keyboard accessible option for users to simulate a "click" on feature(s) on the map and open relevant popup(s). The approach below kind of works, but would work much better if I could figure out how to specify a query radius as well.

Here's how the code is currently set up:

There is an event listener for the keyup event and a target graphic in the center of the map that the user can use to pinpoint the desired feature to get information.  The user uses arrow keys and +- to navigate the map so that the desired feature is within the target. If the user hits the "i" key on the keyboard, a popup opens with the location option set to view.center and fetchFeatures to true. 

In testing, I've found that it is challenging to get a point or line feature right to the target/center of the map, particularly if zoomed in.  

The API mentions FetchFeaturesOptions optional properties that can be used with the fetchFeatures method. I read the following regarding the event property: "The click event for either the MapView or SceneView. The event can be supplied in order to adjust the query radius depending on the pointer type. For example, touch events query a larger radius." Does anyone know if I can use these options in the code below to set a radius? I'm struggling to figure it out. Any other suggestions on how I can improve this code? 

 

//Set up keyboard accessible option for getting information for features on the map

// 1. set focus on the map view to enable keyboard navigation
view.focus();

// 2. add a circle graphic to the center of the map so that the user can pinpoint the feature for which they'd like info
addMapCenterGraphic();

// 3. On keyup, check to see which key the user pressed and respond accordingly

aria.handleMapSelect = function (event) {
    var key = event.which || event.keyCode;
    //if the user hits the i key on the keyboard, simulate a mouse click on the center of the map
    if (key === 73 ) {
        event.stopPropagation();
        
        view.popup.open({
            location: view.center, // location of the click on the view
            fetchFeatures: true // display the content for the selected feature if a popupTemplate is defined.
        });
        view.popup.focus();
      
    } else {
        //if the key is an arrow
        if( key=== 37||key=== 38 || key=== 39 ||key=== 40) {
            // move graphic to the new center point
            mapCenterGraphic.removeAll();
            addMapCenterGraphic();
        }
    }
};

document.addEventListener('keyup', aria.handleMapSelect);

 

 

 

0 Kudos
0 Replies