visgl / nebula.gl Goto Github PK

Is this the correct repository to be raising PRs/issues for nebula.gl now? Our project makes extensive use of nebula.gl so I'm interested in its ongoing maintenance and community support :)

EditableLayer does not compensate for CSS transforms applied to the map

Perhaps this is a slightly niche requirement, but our editor allows us to annotate reasonably high resolution static maps for printing, using nebula.gl. We have a zoomable, pannable panel on which the static map is rendered at a fixed resolution, this uses CSS transform scale.

A similar issue to this was reported previously and fixed here react-map-gl-js

Work around

This prototype-based hack works around the issue for me for now, but I wanted to raise this in case there's a chance this can be fixed in a future release so the behavior is consistent with react-map-gl's.

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

Let me know if I can do anything to help with this.