How can I set dynamic center point in Mapboxgl?

Question

I am working Mapbox-gl.js (v0.38.0) Ionic3 & angular4. I want to set the dynamic center point. The latitude and longitude should be set based on the data in the real time data place's latitude and longitude.

If I set static center point hard-coded, when my real time data changes it will show the center as per the new markers. So I want to set the center point dynamically.

I tried the following following link, mapbox example I have added the real time data and marker. But how can I set the expected center point?

Actually my requirement: For eg: if the real time data has multiple markers in New York, by default the center point should be pointed to New york. Next time the data may change to Callifornia, that time it should point to California. Based on the markers my center point should be set.

Answer 1

The following snippet is inspired from zoom-to-linestring example on mapbox-gl

As @Aravind mentions above, we use map.fitBounds, however, we have to determine the bounds, we have to reduce the array of features to determine the LngLatBounds.

Just make sure you loaded the feature data.

Example

let features = [feature, feature]  // ... array of features

// first coordinate in features
let co = features[0].geometry.coordinates;

// we want to determine the bounds for the features data
let bounds = features.reduce((bounds, feature) => {
  return bounds.extend(feature.geometry.coordinates);
}, new mapboxgl.LngLatBounds(co[0].lng, co[0].lat));

// set bounds according to features
map.fitBounds(bounds, {
  padding: 50,
  maxZoom: 14.15,
  duration: 2000
});