visgl / visgl/react-map-gl

[Feat] better console.log behavior for events

Open
#2,243 2 comments 7 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

feature
Dominant language
TypeScript
Stars
8.5k
Forks
1.4k
Avg merge
5d 17h
Merged PRs (30d)
3

Description

Target Use Case

As a first time user with react-map-gl, when using a map with interactiveLayerIds=[SomeLayer..id] and doing console.log(event) in the onClick EventHandler, you see the following output in console:

Bildschirmfoto 2023-07-23 um 23 10 53

Now you start wondering where the crucial "features" property is and try to fix things in your code. Of course nothing will change whatever you do .Then, after copy/pasting an official example (cluster example) into my codebase and also doing console.log(), you see that its the same there too. Now you realize, that console.log() just doesnt print out the "features" property. The only way to print out this property is the following:

console.log(Object.getOwnPropertyNames(event));

Which gets you this:

Bildschirmfoto 2023-07-23 um 23 21 38

So you fought an error which wasnt one in the first place and thats kind of horrible.

Proposal

Dont know a proposal. Would like to see console.log include this important property when its there. Not a JS pro so i cant even figure out why its not there in the first place. Perhaps something todo with the js prototype property?

What would have helped is a hint in the docs for the interactiveLayerIds=[SomeLayer..id] property so that developers dont search for the resulting "features" property in the event via console.log() which is a quite normal quck and dirty way to inspect stuff. After this, most likely i will start sooner firing up a debugger with a breakpoint

Appendix: thanks for this great library.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the interactiveLayerIds and onClick event documentation, then compare the official cluster example's event object with the console output described here. Determine whether the requested behavior or a documentation hint is appropriate; done means the features property is discoverable through normal inspection or the docs clearly explain how to inspect it.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend, web-dev
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
32/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.