How to use @turf/center - 9 common examples

calculateCenterPoint() {
    let centerPoint = _get(this, 'location.coordinates')

    // Not all tasks have a center-point. In that case, we try to calculate
    // one ourselves based on the task features.
    if (!centerPoint && this.hasGeometries()) {
      try {
        centerPoint = _get(center(this.geometries), 'geometry.coordinates')
      }
      catch(e) {} // Bad geometry can cause turf to blow up
    }

    // If all our efforts failed, default to (0, 0).
    if (!centerPoint) {
      centerPoint = [0, 0]
    }

    // Our centerpoint is a standard GeoJSON Point, which is (Lng, Lat), but
    // Leaflet maps want (Lat, Lng).
    return latLng(centerPoint[1], centerPoint[0])
  }

this.map.on('click', (e) => {
      var features = this.map.queryRenderedFeatures(e.point, { layers: this.getActiveLayers() });
      if (!features.length) {
        return;
      }

      var feature = features[0];

      // Populate the popup and set its coordinates
      // based on the feature found.
      let popoverContent = document.createElement('div');
      render(, popoverContent);

      new mapboxgl.Popup()
        .setLngLat(center(feature).geometry.coordinates)
        .setDOMContent(popoverContent)
        .addTo(this.map);
    });

if (!nextDue.length) {
          // There aren't any requests with next due information.
          return;
        }
        let nextSorted = _.sortBy(nextDue, o => o.properties.tasksInfo.nextDue.deliveryTime);
        feature = nextSorted[0];
        break;
      case 'full-extent':
        if (this.props.results) {
          this.map.fitBounds(extent(this.props.results));
        }
        return;
    }

    this.map.flyTo({
      center: center(feature).geometry.coordinates,
      zoom: 5
    });
    this.openPopup(feature.properties._id);
  },

openPopup: function (featId) {
    if (this.popup !== null) {
      this.popup.remove();
    }

    // Sub objects get stringified. Use the id to search in the actual data.
    var featureData = _.find(this.props.results.features, o => o.properties._id === featId);

    // Populate the popup and set its coordinates
    // based on the feature found.
    let popoverContent = document.createElement('div');
    render(, popoverContent);

    this.popup = new mapboxgl.Popup()
      .setLngLat(center(featureData).geometry.coordinates)
      .setDOMContent(popoverContent)
      .addTo(this.map);
  },

viewport: {
        latitude,
        longitude,
        zoom,
      }
    } = this.state;

    const mapboxInitConfig: any = {
      center: [longitude, latitude],
      container: 'SHST-Road-Closure-Map',
      style: 'mapbox://styles/mapbox/light-v9',
      zoom
    };
    if (AppExtent && AppExtent.length === 4) {
      mapboxInitConfig.bounds = AppExtent;
      mapboxInitConfig.center = center(bboxPolygon(AppExtent)).geometry.coordinates;
      mapboxInitConfig.zoom = 10;
    }
    this.mapContainer = new mapboxgl.Map(mapboxInitConfig);

    this.mapContainer.on('move', this.handleMapMove);
    this.mapContainer.on('mousemove', () => {
      // set pointer style to crosshair when isDrawing is toggled
      this.mapContainer.getCanvas().style.cursor = this.state.isDrawing ? 'crosshair' : '';
    })
    this.mapContainer.on('click', this.handleMapClick);
    this.mapContainer.on('mousemove', this.handleShowPossibleDirections)
    this.mapContainer.addControl(
      new mapboxgl.NavigationControl()
    );
    this.mapContainer.addControl(
      new MapboxGeocoder({

pointFeats.features.forEach((feat) => {
      feat.geometry = center(feat).geometry;
      return feat;
    });

function defineProjection(geojson) {
    var coords = center(geojson).geometry.coordinates.reverse();
    var rotate = coords.map(function (coord) { return -coord; });
    return geoTransverseMercator()
        .center(coords)
        .rotate(rotate)
        .scale(earthRadius);
}

case 'southeast':
    case 'eastsouth':
    case 'bottomright':
        return point([east, south]);
    case 'nw':
    case 'northwest':
    case 'westnorth':
    case 'topleft':
        return point([west, north]);
    case 'ne':
    case 'northeast':
    case 'eastnorth':
    case 'topright':
        return point([east, north]);
    case 'center':
        return center(geojson);
    case undefined:
    case null:
    case 'centroid':
        return centroid(geojson);
    default:
        throw new Error('invalid origin');
    }
}

createGeometryFromGeomFunction: (ft) => {
        let type = geometryFunctions[ft.style.geometry] && geometryFunctions[ft.style.geometry].type || ft.geometry.type;
        let coordinates = ft.geometry.coordinates || [];
        switch (ft.style.geometry ) {
        case "startPoint": coordinates = head(coordinates); break;
        case "endPoint": coordinates = last(coordinates); break;
        case "centerPoint": coordinates = turfCenter(ft).geometry.coordinates; break;
        default: break;
        }
        return {type, coordinates};
    },
    /**