How to use @mapbox/geo-viewport - 10 common examples

getClusters() {
    const {geoJSON} = this.state;
    const {clusterRadius, mapState} = this.props;
    const {longitude, latitude, zoom, width, height} = mapState;
    // zoom needs to be an integer for the different map utils. Also helps with cache key.
    const zoomRound = Math.round(zoom);
    const bbox = geoViewport.bounds([longitude, latitude], zoomRound, [
      width,
      height
    ]);

    const clusters = clustersAtZoom({bbox, clusterRadius, geoJSON, zoom: zoomRound});

    this.setState({clusters});
  }

import { viewport, bounds } from '@mapbox/geo-viewport';

const geoViewport = viewport([
    5.668343999999995,
    45.111511000000014,
    5.852471999999996,
    45.26800200000002,
], [640, 480]);

const boundingBox = bounds({
    lon: 100,
    lat: 200,
}, 14, [640, 480]);

const boundingBox2 = bounds([100, 200], 14, [640, 480]);

import { viewport, bounds } from '@mapbox/geo-viewport';

const geoViewport = viewport([
    5.668343999999995,
    45.111511000000014,
    5.852471999999996,
    45.26800200000002,
], [640, 480]);

const boundingBox = bounds({
    lon: 100,
    lat: 200,
}, 14, [640, 480]);

const boundingBox2 = bounds([100, 200], 14, [640, 480]);

export function getMapZoom(region) {
  if (!region.longitude || !region.latitude) return 0;
  const bounds = [
    region.longitude - region.longitudeDelta / 2.5,
    region.latitude - region.latitudeDelta / 2.5,
    region.longitude + region.longitudeDelta / 2.5,
    region.latitude + region.latitudeDelta / 2.5
  ];

  return geoViewport.viewport(bounds, [width, height], 0, 18, 256).zoom || 0;
}

setMapBounds(mapBounds: Array) {
    this.activeMapView = mapBounds.map(b => +b);
    this.mapConfig = {
      ...this.mapConfig,
      ...geoViewport.viewport(this.activeMapView,
        [this.platform.viewportWidth, this.platform.viewportHeight])
    };
  }

getClusters(region) {
    const bbox = regionToBoundingBox(region),
          viewport = (region.longitudeDelta) >= 40 ? { zoom: this.props.minZoom } : GeoViewport.viewport(bbox, this.dimensions)

    return this.index.getClusters(bbox, viewport.zoom)
  }

const fitToBounds = () => {
      const selectedGeoNodesIds = selectedGeoNodes.map(n => n.geoId);
      const selectedUnitLayer =
        unitLayers && unitLayers.find(u => u.id.startsWith(sourceLayer.toLowerCase()));
      if (!selectedUnitLayer) return;
      const features = map
        .querySourceFeatures(selectedUnitLayer.id, { sourceLayer })
        .filter(f => selectedGeoNodesIds.includes(f.id));
      if (features?.length) {
        const bounds = bbox({ type: 'FeatureCollection', features });
        const { width, height } = containerDimensions;
        const updatedViewport = geoViewport.viewport(bounds, [width, height]);

        const [longitude, latitude] = updatedViewport.center;
        setViewport({ ...viewport, latitude, longitude, zoom: updatedViewport.zoom - 1 });
      }
    };
    if (map && selectedGeoNodes) {

setMapBounds(mapBounds: Array) {
    this.activeMapView = mapBounds.map(b => +b);
    this.mapConfig = {
      ...this.mapConfig,
      ...geoViewport.viewport(this.activeMapView,
        [this.platform.viewportWidth, this.platform.viewportHeight])
    };
  }

export const fitBoundsUpdater = (state, action) => {
  const bounds = action.payload;
  const {center, zoom} = geoViewport.viewport(bounds, [
    state.width,
    state.height
  ]);

  return {
    ...state,
    latitude: center[1],
    longitude: center[0],
    zoom
  };
};

render() {
    const geoJsonFeatures = this.props.coordinates.map(coordinatePair => Object.assign({}, {
        "type": "Feature",
        "properties": {},
        "geometry": {
          "type": "Point",
          "coordinates": coordinatePair
        }
      }
    ));

    const geoJson = Object.assign({}, {"type": "FeatureCollection", "features": geoJsonFeatures});
    const bounds = bbox(geoJson);
    const vp = geoViewport.viewport(bounds, this.props.mapSize);
    const pins = this.props.coordinates.map(coordinatePair => `pin-${PIN_SIZE}-cross+${PIN_COLOR}(${coordinatePair.join(",")})`);
    const mapImageSrc = `${reactAppMapboxTileServerUrl}/${pins.join(',')}/${vp.center.join(',')},${pins.length > 1 ? vp.zoom : DEFAULT_ZOOM}@2x/${this.props.mapSize.join('x')}.png?access_token=${this.props.accessToken}`;

    return (
      <img width="100%" alt="" src="{mapImageSrc}">
    );
  }
}