Ways to detect when modifier keys are pressed during a click event on a deck.gl layer

When working with deck.gl's IconLayer, I want to be able to listen for shift-clicks on icons. The goal is to enable multiple icon selections by holding down the shift key. My setup involves using deck.gl in conjunction with Google Maps.

Upon clicking on an icon within the (Icon)Layer, the onClick event should provide access to both info and event. However, despite looking into the MouseEvent contained in event.srcEvent.wa, the shiftKey property consistently returns as false, regardless of the actual state of the shift key.

new IconLayer({
  onClick: (info, event) => {
    console.log(
      `The shift key was ${event.srcEvent.wa.shiftKey ? '' : 'not '}pressed`,
    );
  },
});

Initially, I anticipated that the shiftKey property would accurately reflect whether the shift key was being pressed or not. However, the slightly peculiar wa property and the lack of documentation surrounding the entire event object have added some confusion to the situation.

Answer №1

A user named Pessimistress shared some insights on GitHub regarding the raw event generated by the Google Maps API. They mentioned that you may need to figure out how Google Maps exposes the shift key state.

It seems like Google Maps is not very helpful when it comes to exposing modifier keys. A workaround was found and shared in this post:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Enhancing webpage performance by updating CSS properties dynamically based on mouse movement using JavaScript

My jQuery function is changing the background-position property of three elements when the user moves their mouse, but it's causing some performance problems. It's worth mentioning that the background images of these elements are SVGs. Here&apo ...

loading external files with processing.js

Splitting my processing.js code into multiple files is something I want to do, but I'm a bit unsure on how to proceed. I attempted using the following code: <script type="application/processing" src="main.pjs"> in order to load my processing.j ...

Create a new JSON file to preserve the value of a JSON object

I am working with a JSON file that looks like this: { "soils": [{ "mukey": "658854", "mukeyName": "Meggett-Kenansville-Garcon-Eunola-Blanton-Bigbee (s1517)", "sl_source": "Fl soil map", "cokey": "3035468", "soilName": "Eunola", " ...

Error encountered: Circular reference issue was encountered when attempting to retrieve navigator.plugins with the use of Selenium and Python

I'm attempting to access the value of navigator.plugins from a Selenium-driven ChromeDriver initiated google-chrome Browsing Context. Using google-chrome-devtools, I am able to retrieve navigator.userAgent and navigator.plugins as shown below: https ...

Transforming an element into a buffer using JavaScript

Utilizing Plain JavaScript for Data Transfer in Web Workers In my current project, I am avoiding the use of Node and sticking to plain JavaScript within the browser. One challenge I encountered is efficiently sending data to web workers. After some experi ...

Learn how to read JSON data sent via AJAX and process it in a Java servlet

Below is the AJAX code that triggers the Servlet named 'CalculateLace': laceTd.dblclick(function() { var jsonObj= { jsonObj: [ {"rowID": $(nRow).attr('id')} ]}; $.ajax({ data: JSON.s ...

Bootstrap 4 - DropDown option - Element is positioned above the navigation bar

Currently facing an issue with the DropDown menu. Whenever I add padding to the DropDown menu (class - drop_link), it ends up pushing the entire element over the <nav>. I'm unsure of how to prevent this from occurring. I attempted to disable som ...

Increase ng-grid row height dynamically based on content without any external plugins or reliance on jQuery

I came across a similar question on this topic at Angular ng-grid row height However, none of the solutions provided there meet my requirements. If I use CSS to fix the issue, it impacts the page's responsiveness and disrupts ng-grid's header fu ...

Angular real-time data tracker

As a newcomer to Angular, I am facing some challenges trying to achieve real-time data updates in my app. My goal is to retrieve JSON data from an MSSQL server via a web server. I have successfully fetched data using the following code: export class AppC ...

Sanity.io's selection of schema field types for efficient and convenient

Hey there, guys! I recently started using Sanity.io and I'm curious whether there's a way to enhance my code efficiency and reuse certain fields across different schemas. I had an idea that goes something like this: cars.ts: export default { ...

Exploring node.js: How to extract elements from a path

I have an array of individuals as shown below: individuals = ['personA', 'personB', 'personC']; I am looking to create a dynamic way to showcase each individual's page based on the URL. For instance, localhost:3000/indi ...

An error has occurred due to a state of 'pending' being asserted

My approach involves utilizing a combination of various stacks: Mocha – serving as the test runner Chai – an assertion library webdriverio – providing browser control bindings Selenium – offering browser abstraction and a running factory ...

A guide to presenting array data retrieved from an Ajax call within HTML using Laravel 4.1

I have an AJAX call to a controller that returns array data to my view. I want to display this array data in HTML upon clicking, but I'm not sure how to do it yet. Here's what I have so far: AJAX Call: request = $.ajax({ url: "/fans/ ...

Error in Sequelize database: Column name does not exist in the database

The issue at hand involves a findAll product selector with a column labeled "PermissionId" that does not actually exist. I am puzzled as to why Sequelize is generating this non-existent column. The errors encountered are as follows: Unhandled rejectio ...

The change event for the select element is malfunctioning

Currently, I am deep diving into Nodejs with the second edition of the node cookbook. This book has caught my attention because it explains concepts using practical sample code, making it easier to grasp. The example code I am working on is related to Br ...

Oops! It seems like there is an issue with reading the property 'filter' of an undefined object. Any ideas on how to resolve this error

Having an issue with a custom filter that is causing an error "ERROR TypeError: Cannot read property 'filter' of undefined". I need help fixing this as it's preventing anything from rendering on the page. Any suggestions on what changes I sh ...

Decide on the return type of a generic function depending on the parameters of the function

I have a series of TypeScript functions that are structured as follows: useCustomFunction = <T>(key: CustomType) : T => { // implementation details here } The parameter type is restricted to a specific set of strings: type CustomType = "apple ...

Can a function declared inside a React functional component be made accessible for use in other components?

I've been revamping some old code related to an alert widget and am in the process of transforming it into its own component that utilizes DOM portals and conditional rendering. My goal is to encapsulate as much logic as possible within this component ...

Tips for restricting the size of uploaded files or the quantity of files in multer express and effectively managing any errors

I am currently working on a code that requires me to set limits on file size or the number of files that can be uploaded. For instance, I want to restrict users from uploading more than 100 files at once or limit the total upload size to 100 mb. However, ...

The Hover Effect on HTML Element Not Working on One Side Specifically

Scenario: Currently, I am working on creating a popover (tooltip) using Bootstrap 3.3.7. In order to achieve this, I have structured my HTML file as follows: popover { margin-left: 100%; padding: 5px 11px; border: solid 1px; border-radius: 25px ...