Deck.gl: LatLng to meters conversion

[evstinik]

Hi, can you please suggest me how can I convert LatLng coordinates to meters (METER_OFFSETS)?

All my layers are using the same METER_OFFSETS coordinate system, because data source is using it. I'm implementing dragging of interactable objects by capturing the initial click coordinates on drag start and calculating later an offset on drag. And unfortunately, when I want to get exact click / dragStart coordinates (in same coordinate system) I can only receive it LatLng.

I searched all the code & documentation, the closest is layer.unproject, but it only returns LatLng.

Thank you.

[Pessimistress]

@ibgreen I see multiple issues here, not necessarily fixable in a patch:

• layer.unproject should return coordinates in the layer's own coordinate system. https://github.com/visgl/deck.gl/blob/b0b798891d72e97135bd228a7966d456faf1e7b9/modules/core/src/lib/layer.js#L196-L198
• It's reasonable to offer an additional field in pickInfo that is the picked position in the layer's coordinate system. Maybe pickInfo.layerPosition?

@evstinik There are several ways to compute meter offsets. The easy way is to use turf.js:

import distance from '@turf/distance';
import bearing from '@turf/bearing';

const d = distance(coordinateOrigin, lngLat);
const a = bearing(coordinateOrigin, lngLat);
const x = d * Math.sin(a);
const y = d * Math.cos(a);

Alternatively you can reverse deck.gl's offset projection system (we should eventually work this into the API):

const {unitsPerMeter, unitsPerMeter2} = viewport.getDistanceScales(coordinateOrigin);
const commonPosition = viewport.projectPosition(lngLat);
const commonOrigin = viewport.projectPosition(coordinateOrigin);

const y = (commonPosition[1] - commonOrigin[1]) / unitsPerMeter[1]
const x = (commonPosition[0] - commonOrigin[0]) / (unitsPerMeter[0] + unitsPerMeter2[0] * y)

[evstinik]

@Pessimistress Thank you for the answer! It worked.

For future reference I will post final working snippet of easy way with turf.js:

import distance from '@turf/distance'
import bearing from '@turf/bearing'

const d = distance(coordinateOrigin, lngLat, {
  units: 'meters'
})
const a = bearing(coordinateOrigin, lngLat)
const x = d * Math.sin((a * Math.PI) / 180)
const y = d * Math.cos((a * Math.PI) / 180)