How to use the viewport-mercator-project.pixelsToWorld function in viewport-mercator-project

export const exportNativeViewport = nativeViewport => (dispatch) => {
  const topLeftPx = [0, 0];
  const bottomRightPx = [nativeViewport.width, nativeViewport.height];

  // compute left and right offsets to deal with antimeridian issue
  const topLeftWorld = pixelsToWorld(topLeftPx, nativeViewport.pixelUnprojectionMatrix);
  const bottomRightWorld = pixelsToWorld(bottomRightPx, nativeViewport.pixelUnprojectionMatrix);
  const leftWorldScaled = topLeftWorld[0] / nativeViewport.scale;
  const rightWorldScaled = bottomRightWorld[0] / nativeViewport.scale;

  // lat/lon corners for miniglobe
  const topLeft = nativeViewport.unproject(topLeftPx);
  const bottomRight = nativeViewport.unproject(bottomRightPx);
  const viewportBoundsGeoJSON = {
    type: 'Feature',
    geometry: {
      type: 'Polygon',
      coordinates: [
        [
          [topLeft[0], topLeft[1]],
          [bottomRight[0], topLeft[1]],
          [bottomRight[0], bottomRight[1]],
          [topLeft[0], bottomRight[1]],

export const exportNativeViewport = nativeViewport => (dispatch) => {
  const topLeftPx = [0, 0];
  const bottomRightPx = [nativeViewport.width, nativeViewport.height];

  // compute left and right offsets to deal with antimeridian issue
  const topLeftWorld = pixelsToWorld(topLeftPx, nativeViewport.pixelUnprojectionMatrix);
  const bottomRightWorld = pixelsToWorld(bottomRightPx, nativeViewport.pixelUnprojectionMatrix);
  const leftWorldScaled = topLeftWorld[0] / nativeViewport.scale;
  const rightWorldScaled = bottomRightWorld[0] / nativeViewport.scale;

  // lat/lon corners for miniglobe
  const topLeft = nativeViewport.unproject(topLeftPx);
  const bottomRight = nativeViewport.unproject(bottomRightPx);
  const viewportBoundsGeoJSON = {
    type: 'Feature',
    geometry: {
      type: 'Polygon',
      coordinates: [
        [
          [topLeft[0], topLeft[1]],
          [bottomRight[0], topLeft[1]],
          [bottomRight[0], bottomRight[1]],

unproject(xyz, {topLeft = true, targetZ} = {}) {
    const [x, y, z] = xyz;

    const y2 = topLeft ? y : this.height - y;
    const coord = pixelsToWorld([x, y2, z], this.pixelUnprojectionMatrix, targetZ);
    const [X, Y] = this.unprojectFlat(coord);

    if (Number.isFinite(z)) {
      // Has depth component
      return [X, Y, coord[2]];
    }

    return Number.isFinite(targetZ) ? [X, Y, targetZ] : [X, Y];
  }

function screenToCommonSpace(xyz, pixelUnprojectionMatrix) {
  const [x, y, z] = xyz;
  const coord = pixelsToWorld([x, y, z], pixelUnprojectionMatrix);

  if (Number.isFinite(z)) {
    return coord;
  }
  return [coord[0], coord[1], 0];
}