search

visgl / deck.gl-community

Community contributed modules for deck.gl
https://visgl.github.io/deck.gl-community/
MIT License
37 stars 20 forks source link

[Bug] EditableGeoJsonLayer does not compensate for CSS transforms #149

Open federicoviscomi opened 3 weeks ago

federicoviscomi commented 3 weeks ago

Module

Description

When drawing a polygon on a map, the polygon is not drawn in the same points where I click. (on the other hand deck.gl appears to compensate properly for CSS transforms)

Expected Behavior

No response

Steps to Reproduce

Draw a polygon here https://codesandbox.io/p/sandbox/deck-gl-community-editable-layers-css-scale-bug-xzy7zr

Environment

Logs

No response

rjwats commented 3 weeks ago

We have worked around this issue with the following hack (which we had in place when using nebula.gl too)

/**
 * This code hacks editable-layers to make the getScreenCoords function work with a CSS scale transformation applied
 */
export const applyEditableGeoJsonLayerOverrides = () => {
  EditableGeoJsonLayer.prototype.getScreenCoords = (function (this: EditableGeoJsonLayer, pointerEvent: any): [number, number] {
    const canvas = this.context.device.getCanvasContext().canvas as HTMLCanvasElement;
    const rect = canvas.getBoundingClientRect();
    const scaleX = rect.width / canvas.offsetWidth;
    const scaleY = rect.height / canvas.offsetHeight;
    return [
      (pointerEvent.clientX - rect.left - canvas.clientLeft) / scaleX,
      (pointerEvent.clientY - rect.top - canvas.clientTop) / scaleY
    ];
  });
};