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

test('fitBounds#degenerate', (t) => {
  const OPTIONS = {
    height: 100,
    width: 100,
    bearing: 0,
    pitch: 0,
    zoom: 2
  };

  const viewport = new WebMercatorViewport(OPTIONS);
  t.doesNotThrow(
    () => viewport.fitBounds([[-70, 10], [-70, 10]]),
    'degenerate bounds do not throw by default'
  );
  t.throws(
    () => viewport.fitBounds([[-70, 10], [-70, 10]], {maxZoom: Infinity}),
    'degenerate bounds throw if maxZoom removed'
  );
  t.doesNotThrow(
    () => viewport.fitBounds([[-70, 10], [-70, 10]], {minExtent: 0.01, maxZoom: Infinity}),
    'degenerate bounds does not throw if maxZoom removed and minExtents added'
  );

  t.ok(viewport instanceof WebMercatorViewport, 'get viewport');

  t.end();

test('WebMercatorViewport.project#3D', t => {
  config.EPSILON = 1e-6;

  for (const vc in VIEWPORT_PROPS) {
    const viewport = new WebMercatorViewport(VIEWPORT_PROPS[vc]);
    for (const tc in VIEWPORT_PROPS) {
      const {longitude, latitude} = VIEWPORT_PROPS[tc];
      const lnglatZIn = [longitude, latitude, 100];
      const [x, y, z] = viewport.project(lnglatZIn);
      const lnglatZ1 = viewport.unproject([x, y, z]);
      const lnglatZ2 = viewport.unproject([x, y], {targetZ: 100});
      t.comment(`Comparing [${lnglatZIn}] to [${lnglatZ1}] & [${lnglatZ2}]`);
      t.ok(equals(lnglatZIn, lnglatZ1), 'unproject with pixel depth');
      t.ok(equals(lnglatZIn, lnglatZ2), 'unproject with target Z');
    }
  }
  t.end();
});

test('Viewport vs. Mapbox unprojectFlat', t => {
  for (const viewportName in VIEWPORT_PROPS) {
    const viewportProps = VIEWPORT_PROPS[viewportName];

    const viewport = new WebMercatorViewport(viewportProps);
    const unprojection = viewport.unprojectFlat([587, 107]);

    const transform = new MapboxTransform(viewportProps);
    const mapboxUnprojection = transform.mapboxUnprojectFlat([587, 107]);

    t.deepEquals(toLowPrecision(unprojection), toLowPrecision(mapboxUnprojection),
      `unprojectFlat(${viewportName}) - viewport/mapbox match`);
  }
  t.end();
});

test('WebMercatorViewport.projectFlat', t => {
  config.EPSILON = 1e-6;

  for (const vc in VIEWPORT_PROPS) {
    const viewport = new WebMercatorViewport(VIEWPORT_PROPS[vc]);
    for (const tc in VIEWPORT_PROPS) {
      const {longitude, latitude} = VIEWPORT_PROPS[tc];
      const lnglatIn = [longitude, latitude];
      const xy = viewport.projectFlat(lnglatIn);
      const lnglat = viewport.unprojectFlat(xy);
      t.comment(`Comparing [${lnglatIn}] to [${lnglat}]`);
      t.ok(equals(lnglatIn, lnglat));
    }
  }
  t.end();
});

test('Viewport vs Mapbox project', t => {
  config.EPSILON = 1e-8;

  for (const viewportName in VIEWPORT_PROPS) {
    const viewportProps = VIEWPORT_PROPS[viewportName];

    for (const {title, lngLat} of TEST_CASES) {
      const viewport = new WebMercatorViewport(viewportProps);
      const projection = viewport.project(lngLat, {topLeft: true});

      const transform = new MapboxTransform(viewportProps);
      const mapboxProjection = transform.mapboxProject(lngLat);

      t.ok(equals(projection, mapboxProjection),
        `project(${title}, ${viewportName}) - viewport ${projection} mapbox ${mapboxProjection}`);
    }
  }
  t.end();
});

test('WebMercatorViewport.fitBounds', (t) => {
  for (const [input, expected] of FITBOUNDS_TEST_CASES) {
    const viewport = new WebMercatorViewport({
      longitude: -122,
      latitude: 37.7,
      width: input.width,
      height: input.height,
      zoom: 11
    });
    const result = viewport.fitBounds(input.bounds, input);

    t.ok(result instanceof WebMercatorViewport, 'get viewport');
    t.equals(toLowPrecision(result.longitude), toLowPrecision(expected.longitude),
      'get correct longitude');
    t.equals(toLowPrecision(result.latitude), toLowPrecision(expected.latitude),
      'get correct latitude');
    t.equals(toLowPrecision(result.zoom), toLowPrecision(expected.zoom),
      'get correct zoom');
  }

test('Viewport vs Mapbox unproject', t => {
  config.EPSILON = 1e-8;

  for (const viewportName in VIEWPORT_PROPS) {
    const viewportProps = VIEWPORT_PROPS[viewportName];

    for (const {title, lngLat} of TEST_CASES) {
      const transform = new MapboxTransform(viewportProps);
      const mapboxProjection = transform.mapboxProject(lngLat);

      const viewport = new WebMercatorViewport(viewportProps);
      const unprojection = viewport.unproject(mapboxProjection, {topLeft: true});

      t.ok(equals(unprojection, lngLat),
        `unproject(${title}, ${viewportName}) - viewport/mapbox match`);
    }
  }
  t.end();
});

test('Viewport vs. Mapbox projectFlat', t => {
  for (const viewportName in VIEWPORT_PROPS) {
    const viewportProps = VIEWPORT_PROPS[viewportName];

    const viewport = new WebMercatorViewport(viewportProps);
    const projection = viewport.projectFlat([-122.43, 37.75]);

    const transform = new MapboxTransform(viewportProps);
    const mapboxProjection = transform.mapboxProjectFlat([-122.43, 37.75]);

    t.deepEquals(toLowPrecision(projection), toLowPrecision(mapboxProjection),
      `projectFlat(${viewportName}) - viewport/mapbox match`);
  }
  t.end();
});

test('Viewport/Mapbox getLocationAtPoint', t => {
  for (const viewportName in VIEWPORT_PROPS) {
    const viewportProps = VIEWPORT_PROPS[viewportName];
    for (const {title, lngLat} of TEST_CASES) {
      const viewport = new WebMercatorViewport(viewportProps);
      const llp = viewport.getLocationAtPoint({lngLat, pos: [100, 100]});

      const transform = new MapboxTransform(viewportProps);
      const llm = transform.mapboxGetLngLatAtPoint({lngLat, pos: [100, 100]});

      t.deepEquals(toLowPrecision(llp), toLowPrecision(llm),
        `getLocationAtPoint(${title}, ${viewportName})) - viewport/mapbox match`);
    }
  }
  t.end();
});

test('Viewport projection#topLeft', t => {
  const viewport = new WebMercatorViewport(viewportProps);

  const topLeft = viewport.unproject([0, 0], {topLeft: true});
  const bottomLeft = viewport.unproject([0, viewport.height], {topLeft: true});

  t.ok(topLeft[1] > bottomLeft[1], 'topLeft latitude is north of bottomLeft latitude');

  const topLeft2 = viewport.unproject([0, viewport.height], {topLeft: false});
  const bottomLeft2 = viewport.unproject([0, 0], {topLeft: false});

  t.deepEquals(topLeft, topLeft2, 'topLeft true/false match');
  t.deepEquals(bottomLeft, bottomLeft2, 'bottomLeft true/false match');

  t.end();
});