How to use viewport-mercator-project - 10 common examples

test('getProjectionParameters', t => {
  for (const vc in VIEWPORT_PROPS) {
    const props = VIEWPORT_PROPS[vc];

    // TODO - for now, just tests that fields are valid number
    const {fov, aspect, focalDistance, near, far} = getProjectionParameters(props);
    t.ok(Number.isFinite(fov), 'getProjectionParameters: fov is a number');
    t.ok(Number.isFinite(aspect), 'getProjectionParameters: aspect is a number');
    t.ok(Number.isFinite(focalDistance), 'getProjectionParameters: focalDistance is a number');
    t.ok(Number.isFinite(near), 'getProjectionParameters: near is a number');
    t.ok(Number.isFinite(far), 'getProjectionParameters: far is a number');
  }
  t.end();
});

delta * pixelsPerMeter[1],
        z * pixelsPerMeter[2]
      ];
      const coordsAdjusted = [
        delta * (pixelsPerMeter[0] + pixelsPerMeter2[0] * delta),
        delta * (pixelsPerMeter[1] + pixelsPerMeter2[1] * delta),
        z * (pixelsPerMeter[2] + pixelsPerMeter2[2] * delta)
      ];

      let pt = [longitude, latitude];
      // turf unit is kilometers
      pt = destination(pt, delta / 1000 * Math.sqrt(2), 45);
      pt = pt.geometry.coordinates;

      const realCoords = [
        lngLatToWorld(pt, scale)[0] - lngLatToWorld([longitude, latitude], scale)[0],
        lngLatToWorld(pt, scale)[1] - lngLatToWorld([longitude, latitude], scale)[1],
        z * getDistanceScales({longitude: pt[0], latitude: pt[1], scale}).pixelsPerMeter[2]
      ];

      const diff = getDiff(coords, realCoords);
      const diffAdjusted = getDiff(coordsAdjusted, realCoords);

      t.comment(`unadjusted: ${diff.message}`);
      t.comment(`adjusted: ${diffAdjusted.message}`);

      t.ok(diffAdjusted.error.every(e => e < DISTANCE_TOLERANCE),
        'Error within ratio tolerance');
      t.ok(diffAdjusted.errorPixels.every(p => p < DISTANCE_TOLERANCE_PIXELS),
        'Error within pixel tolerance');
    }
  }

z * pixelsPerMeter[2]
      ];
      const coordsAdjusted = [
        delta * (pixelsPerMeter[0] + pixelsPerMeter2[0] * delta),
        delta * (pixelsPerMeter[1] + pixelsPerMeter2[1] * delta),
        z * (pixelsPerMeter[2] + pixelsPerMeter2[2] * delta)
      ];

      let pt = [longitude, latitude];
      // turf unit is kilometers
      pt = destination(pt, delta / 1000 * Math.sqrt(2), 45);
      pt = pt.geometry.coordinates;

      const realCoords = [
        lngLatToWorld(pt, scale)[0] - lngLatToWorld([longitude, latitude], scale)[0],
        lngLatToWorld(pt, scale)[1] - lngLatToWorld([longitude, latitude], scale)[1],
        z * getDistanceScales({longitude: pt[0], latitude: pt[1], scale}).pixelsPerMeter[2]
      ];

      const diff = getDiff(coords, realCoords);
      const diffAdjusted = getDiff(coordsAdjusted, realCoords);

      t.comment(`unadjusted: ${diff.message}`);
      t.comment(`adjusted: ${diffAdjusted.message}`);

      t.ok(diffAdjusted.error.every(e => e < DISTANCE_TOLERANCE),
        'Error within ratio tolerance');
      t.ok(diffAdjusted.errorPixels.every(p => p < DISTANCE_TOLERANCE_PIXELS),
        'Error within pixel tolerance');
    }
  }
  t.end();

];
      const coordsAdjusted = [
        delta * (pixelsPerMeter[0] + pixelsPerMeter2[0] * delta),
        delta * (pixelsPerMeter[1] + pixelsPerMeter2[1] * delta),
        z * (pixelsPerMeter[2] + pixelsPerMeter2[2] * delta)
      ];

      let pt = [longitude, latitude];
      // turf unit is kilometers
      pt = destination(pt, delta / 1000 * Math.sqrt(2), 45);
      pt = pt.geometry.coordinates;

      const realCoords = [
        lngLatToWorld(pt, scale)[0] - lngLatToWorld([longitude, latitude], scale)[0],
        lngLatToWorld(pt, scale)[1] - lngLatToWorld([longitude, latitude], scale)[1],
        z * getDistanceScales({longitude: pt[0], latitude: pt[1], scale}).pixelsPerMeter[2]
      ];

      const diff = getDiff(coords, realCoords);
      const diffAdjusted = getDiff(coordsAdjusted, realCoords);

      t.comment(`unadjusted: ${diff.message}`);
      t.comment(`adjusted: ${diffAdjusted.message}`);

      t.ok(diffAdjusted.error.every(e => e < DISTANCE_TOLERANCE),
        'Error within ratio tolerance');
      t.ok(diffAdjusted.errorPixels.every(p => p < DISTANCE_TOLERANCE_PIXELS),
        'Error within pixel tolerance');
    }
  }
  t.end();
});

config.EPSILON = 1e-7;

  for (const vc in VIEWPORT_PROPS) {
    t.comment(vc);
    const {longitude, latitude} = VIEWPORT_PROPS[vc];

    // Test degree offsets
    for (const delta of [10, 100, 1000, 5000]) {
      t.comment(`R = ${delta} meters`);

      const origin = [longitude, latitude];
      // turf unit is kilometers
      let pt = destination(origin, delta / 1000 * Math.sqrt(2), 45);
      pt = pt.geometry.coordinates.concat(delta);

      const result = addMetersToLngLat(origin, [delta, delta, delta]);

      t.comment(`Comparing: ${result}, ${pt}`);

      t.ok(equals(result, pt), 'Returns correct result');
    }
  }
  t.end();
});

export function fitViewport(viewport, points, padding = 10) {
  try {
    const bounds = getBounds(points);
    return {
      ...viewport,
      ...fitBounds({
        height: viewport.height,
        width: viewport.width,
        padding,
        bounds,
      }),
    };
  } catch (e) {
    /* eslint no-console: 0 */
    console.error('Could not auto zoom', e);
    return viewport;
  }
}

export function fitViewport(viewport, points, padding = 10) {
  try {
    const bounds = getBounds(points);
    return {
      ...viewport,
      ...fitBounds({
        height: viewport.height,
        width: viewport.width,
        padding,
        bounds,
      }),
    };
  } catch (e) {
    /* eslint no-console: 0 */
    console.error('Could not auto zoom', e);
    return viewport;
  }
}

const data = layer.getHoverData(object, allData);
          const fieldsToShow =
            interactionConfig.tooltip.config.fieldsToShow[dataId];

          layerHoverProp = {
            data,
            fields,
            fieldsToShow,
            layer
          };
        }
      }

      if (pinned || clicked) {
        // project lnglat to screen so that tooltip follows the object on zoom
        const viewport = new WebMercatorViewport(mapState);
        const lngLat = clicked ? clicked.lngLat : pinned.coordinate;
        position = this._getHoverXY(viewport, lngLat);
      }
      return (
        <div>
          </div>

initializeProps(startProps: MapStateProps, endProps: MapStateProps) {
    const startViewportProps = {};
    const endViewportProps = {};

    if (this.around) {
      // anchor point in origin screen coordinates
      startViewportProps.around = this.around;
      // anchor point in spherical coordinates
      const aroundLngLat = new WebMercatorViewport(startProps).unproject(this.around);
      Object.assign(endViewportProps, endProps, {
        // anchor point in destination screen coordinates
        around: new WebMercatorViewport(endProps).project(aroundLngLat),
        aroundLngLat
      });
    }

    for (const key of this.propNames) {
      const startValue = startProps[key];
      const endValue = endProps[key];
      assert(isValid(startValue) && isValid(endValue), `${key} must be supplied for transition`);

      startViewportProps[key] = startValue;
      endViewportProps[key] = getEndValueByShortestPath(key, startValue, endValue);
    }

// If startZoom state is defined, then use the startZoom state;
      // otherwise assume discrete zooming
      startZoom = this._viewportProps.zoom;
      startZoomLngLat = this._unproject(startPos) || this._unproject(pos);
    }

    // take the start lnglat and put it where the mouse is down.
    assert(
      startZoomLngLat,
      '`startZoomLngLat` prop is required ' +
        'for zoom behavior to calculate where to position the map.'
    );

    const zoom = this._calculateNewZoom({scale, startZoom});

    const zoomedViewport = new WebMercatorViewport(Object.assign({}, this._viewportProps, {zoom}));
    const [longitude, latitude] = zoomedViewport.getLocationAtPoint({lngLat: startZoomLngLat, pos});

    return this._getUpdatedState({
      zoom,
      longitude,
      latitude
    });
  }