How to use react-map-gl - 10 common examples

.zoom({pos: POS_IMTERMIDIATE, scale: 1.5})
      .zoom({pos: POS_END, scale: SCALE})
      .zoomEnd()
      .getViewportProps();

    t.ok(
      toLowPrecision(viewport1.longitude) === toLowPrecision(viewport2.longitude) &&
        toLowPrecision(viewport1.latitude) === toLowPrecision(viewport2.latitude) &&
        toLowPrecision(viewport1.zoom) === toLowPrecision(viewport2.zoom),
      'Consistent result'
    );
  });

  // argument out of bounds
  try {
    new MapState(SAMPLE_VIEWPORTS[0]).zoom({pos: POS_END, scale: -1});
    t.fail('Should throw error with out of bounds argument');
  } catch (error) {
    t.ok(/scale/.test(error.message), 'Should throw error with out of bounds argument');
  }

  t.end();
});

test('MapState - Constructor', t => {
  SAMPLE_VIEWPORTS.forEach(viewport => {
    t.ok(new MapState(viewport), 'Constructed MapState instance');
  });

  // Normalize props
  {
    const mapState = new MapState(Object.assign({}, SAMPLE_VIEWPORTS[0], {longitude: -200}));
    t.is(mapState.getViewportProps().longitude, 160, 'Normalized props');
  }

  // Missing required prop
  try {
    t.notOk(new MapState({width: 100, height: 100}), 'Should throw error for missing prop');
  } catch (error) {
    t.ok(/must be supplied/.test(error.message), 'Should throw error for missing prop');
  }

  t.end();
});

test('MapState - Constructor', t => {
  SAMPLE_VIEWPORTS.forEach(viewport => {
    t.ok(new MapState(viewport), 'Constructed MapState instance');
  });

  // Normalize props
  {
    const mapState = new MapState(Object.assign({}, SAMPLE_VIEWPORTS[0], {longitude: -200}));
    t.is(mapState.getViewportProps().longitude, 160, 'Normalized props');
  }

  // Missing required prop
  try {
    t.notOk(new MapState({width: 100, height: 100}), 'Should throw error for missing prop');
  } catch (error) {
    t.ok(/must be supplied/.test(error.message), 'Should throw error for missing prop');
  }

  t.end();
});

test('TransitionManager#auto#duration', t => {
  const mergeProps = props => Object.assign({}, TransitionManager.defaultProps, props);
  const initialProps = {
    width: 100,
    height: 100,
    longitude: -122.45,
    latitude: 37.78,
    zoom: 12,
    pitch: 0,
    bearing: 0,
    transitionDuration: 200
  };
  const transitionManager = new TransitionManager(mergeProps(initialProps));
  transitionManager.processViewportChange(
    mergeProps({
      width: 100,
      height: 100,
      longitude: -100.45, // changed
      latitude: 37.78,
      zoom: 12,
      pitch: 0,
      bearing: 0,
      transitionInterpolator: new ViewportFlyToInterpolator(),
      transitionDuration: 'auto'
    })
  );
  t.ok(
    Number.isFinite(transitionManager.state.duration) && transitionManager.state.duration > 0,
    'should set duraiton when using "auto" mode'

SAMPLE_VIEWPORTS.forEach(viewport => {
    // one-off panning
    const viewport1 = new MapState(viewport)
      .pan({pos: POS_END, startPos: POS_START})
      .getViewportProps();

    t.ok(
      toLowPrecision(viewport1.longitude) !== toLowPrecision(viewport.longitude) ||
        toLowPrecision(viewport1.latitude) !== toLowPrecision(viewport.latitude),
      'Map center has changed'
    );
    t.ok(viewport1.longitude < 180 && viewport1.longitude >= -180, 'Longitude is within bounds');
    t.ok(viewport1.latitude <= 90 && viewport1.latitude >= -90, 'Latitude is within bounds');
    t.ok(
      isSameLocation(
        new WebMercatorViewport(viewport).unproject(POS_START),
        new WebMercatorViewport(viewport1).unproject(POS_END)
      ),
      'Location under the pointer remains the same'
    );

    // chained panning
    const viewport2 = new MapState(viewport)
      .panStart({pos: POS_START})

SAMPLE_VIEWPORTS.forEach(viewport => {
    // one-off rotating
    const viewport1 = new MapState(viewport)
      .rotateStart({})
      .rotate({deltaScaleX: X_DELTA, deltaScaleY: Y_DELTA})
      .rotateEnd()
      .getViewportProps();

    t.ok(
      toLowPrecision(viewport1.bearing) !== toLowPrecision(viewport.bearing || 0),
      'Bearing has changed'
    );
    t.ok(
      toLowPrecision(viewport1.pitch) !== toLowPrecision(viewport.pitch || 0),
      'Pitch has changed'
    );
    t.ok(
      viewport1.pitch <= viewport1.maxPitch && viewport1.pitch >= viewport1.minPitch,
      'Pitch is within bounds'
    );
    t.ok(viewport1.bearing < 180 && viewport1.bearing >= -180, 'Bearing is within bounds');

    // chained rotating
    const viewport2 = new MapState(viewport)
      .rotateStart({})
      .rotate({deltaScaleX: 0, deltaScaleY: 0})

t.ok(
      viewport1.pitch <= viewport1.maxPitch && viewport1.pitch >= viewport1.minPitch,
      'Pitch is within bounds'
    );
    t.ok(viewport1.bearing < 180 && viewport1.bearing >= -180, 'Bearing is within bounds');

    // chained rotating
    const viewport2 = new MapState(viewport)
      .rotateStart({})
      .rotate({deltaScaleX: 0, deltaScaleY: 0})
      .rotate({deltaScaleX: X_DELTA, deltaScaleY: Y_DELTA})
      .rotateEnd()
      .getViewportProps();

    t.ok(
      toLowPrecision(viewport1.pitch) === toLowPrecision(viewport2.pitch) &&
        toLowPrecision(viewport1.bearing) === toLowPrecision(viewport2.bearing),
      'Consistent result'
    );

    // out of bounds arguments
    const state = new MapState(viewport).rotateStart({});

    t.is(
      state.rotate({deltaScaleY: 2}).getViewportProps().pitch,
      viewport.maxPitch || MAPBOX_LIMITS.maxPitch,
      'Capped at max pitch'
    );

    t.is(
      state.rotate({deltaScaleY: -2}).getViewportProps().pitch,
      viewport.minPitch || MAPBOX_LIMITS.minPitch,

SAMPLE_VIEWPORTS.forEach(viewport => {
    // one-off panning
    const viewport1 = new MapState(viewport)
      .pan({pos: POS_END, startPos: POS_START})
      .getViewportProps();

    t.ok(
      toLowPrecision(viewport1.longitude) !== toLowPrecision(viewport.longitude) ||
        toLowPrecision(viewport1.latitude) !== toLowPrecision(viewport.latitude),
      'Map center has changed'
    );
    t.ok(viewport1.longitude < 180 && viewport1.longitude >= -180, 'Longitude is within bounds');
    t.ok(viewport1.latitude <= 90 && viewport1.latitude >= -90, 'Latitude is within bounds');
    t.ok(
      isSameLocation(
        new WebMercatorViewport(viewport).unproject(POS_START),
        new WebMercatorViewport(viewport1).unproject(POS_END)
      ),
      'Location under the pointer remains the same'
    );

    // chained panning
    const viewport2 = new MapState(viewport)
      .panStart({pos: POS_START})
      .pan({pos: POS_IMTERMIDIATE})

),
      'Location under the pointer remains the same'
    );

    // chained panning
    const viewport2 = new MapState(viewport)
      .zoomStart({pos: POS_START})
      .zoom({pos: POS_IMTERMIDIATE, scale: 1.5})
      .zoom({pos: POS_END, scale: SCALE})
      .zoomEnd()
      .getViewportProps();

    t.ok(
      toLowPrecision(viewport1.longitude) === toLowPrecision(viewport2.longitude) &&
        toLowPrecision(viewport1.latitude) === toLowPrecision(viewport2.latitude) &&
        toLowPrecision(viewport1.zoom) === toLowPrecision(viewport2.zoom),
      'Consistent result'
    );
  });

viewport1.pitch <= viewport1.maxPitch && viewport1.pitch >= viewport1.minPitch,
      'Pitch is within bounds'
    );
    t.ok(viewport1.bearing < 180 && viewport1.bearing >= -180, 'Bearing is within bounds');

    // chained rotating
    const viewport2 = new MapState(viewport)
      .rotateStart({})
      .rotate({deltaScaleX: 0, deltaScaleY: 0})
      .rotate({deltaScaleX: X_DELTA, deltaScaleY: Y_DELTA})
      .rotateEnd()
      .getViewportProps();

    t.ok(
      toLowPrecision(viewport1.pitch) === toLowPrecision(viewport2.pitch) &&
        toLowPrecision(viewport1.bearing) === toLowPrecision(viewport2.bearing),
      'Consistent result'
    );

    // out of bounds arguments
    const state = new MapState(viewport).rotateStart({});

    t.is(
      state.rotate({deltaScaleY: 2}).getViewportProps().pitch,
      viewport.maxPitch || MAPBOX_LIMITS.maxPitch,
      'Capped at max pitch'
    );

    t.is(
      state.rotate({deltaScaleY: -2}).getViewportProps().pitch,
      viewport.minPitch || MAPBOX_LIMITS.minPitch,
      'Capped at min pitch'