Weird behaviour when dragging an icon in an IconLayer with TerrainExtension

[nvn-nil]

I'm currently working on implementing drag-and-drop functionality in an IconLayer that uses TerrainExtension.

I used a reference CodePen and the TerrainExtension documentation to guide my implementation. While the functionality works as expected when the pitch is 0, I've noticed that the icon jumps away from the cursor on drag when the pitch is greater than 0. The amount of this jump increases with larger pitch values.

I've created a CodePen to demonstrate this behavior, which can be observed by dragging the icon with a pitch greater than 0.

[Pessimistress]

The default on* events do not give you the accurate coordinate when you use terrain. You need to call deck.pickObject with unproject3D: true. https://deck.gl/docs/api-reference/core/deck#pickobject

[nvn-nil]

Thanks for the help. I was able to improve the dragging behavior significantly by using pickObject with unproject3D.

I've updated the onDrag function in the CodePen like this:

onDrag: (info, event) => {
        const pick = deckgl.pickObject({
          x: event.center.x,
          y: event.center.y,
          unproject3D: true,
          radius: 30,
        })
        data[info.index] = [pick.coordinate[0], pick.coordinate[1]]
        dataVersion++
        redraw()
      }

I found that info.devicePixel and info.pixel were not accurately tracking the cursor during onDrag, so instead, I used event.center (worked in full screen but needed event.offsetCenter since my actual map is not in full screen), which worked much better. The pickObject radius needs to be large enough because the cursor is moving, and it may not pick the object if the cursor is moved too quickly.

Is this the right way to do this?

However, if the cursor is moved fast enough, the icon can no longer be picked. Is there a way to terminate a drag operation in the onDrag function?

[nvn-nil]

Using pickObject in onDrag with the correct pixel values solved the problem I had.

onDrag: (info, event) => {
        const pick = deckgl.pickObject({
          x: event.center.x,
          y: event.center.y,
          unproject3D: true,
          radius: 30, // larger pick radius works better
        })
        // update data using [pick.coordinate[0], pick.coordinate[1]] instead of info.coordinate
      }

Thanks, @Pessimistress. Closing this discussion now.