2

What I want to do is to access featureTarget property of a mouse event object returned from MapboxGL.

My code is like this:

// map is the instance of MapboxGL
map.on('mousemove', e => {
    console.log("***");
    console.log(e);
    console.log(e.featureTarget);
    console.log("***");
});

Then the console of Chrome shows like this:

***
 n {point: c, lngLat: B, originalEvent: MouseEvent, type: "mousemove", _defaultPrevented: false, …}
featureTarget: bs {type: "Feature", _vectorTileFeature: qa, properties: {…}, layer: {…}, source: "mapbox-gl-draw-cold", …}
lngLat: B {lng: 172.4191589376344, lat: -43.49662499361186}
originalEvent: MouseEvent {isTrusted: true, screenX: 561, screenY: 524, clientX: 561, clientY: 421, …}
point: c {x: 442, y: 289}
target: Map {_moving: false, _zooming: false, transform: wi, _bearingSnap: 7, _renderFrameCallback: ƒ, …}
type: "mousemove"
_defaultPrevented: false
defaultPrevented: (...)
__proto__: F
undefined
***

I'm super confused... The second line is showing featureTarget member but it's undefined on the third line! There is no typo as you see.

Does anyone have any ideas about why I can't access featureTarget value?

Hassy
  • 73
  • 1
  • 5

1 Answers1

1

Without investigating, I'll say that sometimes Chrome and Firefox can give pretty misleading results in cases like this - the preview (when you log an object) is not exactly the same as formally evaluating a property to a string. I would guess that featureTarget is a getter, which in this case is evaluating to undefined.

The better way to really understand what's going on is to put a breakpoint in that function and evaluate each expression individually until you get a clearer picture.

Steve Bennett
  • 114,604
  • 39
  • 168
  • 219
  • Thanks Steve, I tried but I could never get 'featureTarget' with breakpoints. Very strange :( Good to know that Chrome developer tool doesn't always tell the truth anyway – Hassy Jun 17 '20 at 01:39
  • You can't put a breakpoint inside your event handler function? – Steve Bennett Jun 17 '20 at 02:26