Map Dissapearing After Calling JumpTo (MapboxGL + React)

Question

I'm developing a website that takes in an address from a user and plots a list of nearby locations using MapBoxGL and React. When the user runs the search, an API is called and returns, amongst other things, a center point. This center point is used to call the jumpTo function to recenter the map. For the most part things work, however after calling jumpTo the map stops displaying (see image below).

When starting the webpage the map looks good:

However upon calling jumpTo, the map disappears:

I've been stripping away the code to debug, but I'm still at a loss.

During the debugging process I wound up moving the map to what would normally be the parent component. Below is the code with most of the non-map elements stripped away. The map is initialized upon mount. The runSearch function calls an API which returns the values (floats) fed to jumpTo.

import React from 'react';
import axios from 'axios';
import mapboxgl from 'mapbox-gl';

// Custom elements
import Search from "./components/Search";
import Report from "./components/Report";
//import Map from "./components/Map";

// CSS
import './Style.css';

// Data
import generator_data from './test_data.js'

// Constants
const EVAL_URL = "http://localhost:5000/api/v1.0/eval"

class App extends React.Component {
    constructor( props ) {
        super( props );
        this.map_ref = React.createRef();
                this.state = {
            query: '',
            proposed_address: '',
            loaded: false,
                        loading: false,
            suggestions: [],
            error_message: '',
            geocoded_value: [],
            generators: [], /* we can replace with generator data to test */
            rank: '',
            map:null,
            map_state: {
            'lng': 43.1939,
            'lat': -71.5724,
            'zoom': 10,
            },
        };  

// Hooks to update the state based on actions in the children components
this.handleSearchBarUpdate = this.handleSearchBarUpdate.bind(this);
this.runSearch = this.runSearch.bind(this);
this.handleMapState = this.handleMapState.bind(this);
}
  // Function called when object is first rendered. This should initialize 
  componentDidMount() { 
    console.log("Mounting mapping")
    mapboxgl.accessToken = 'pk.eyJ1IjoibW9vc3RlciIsImEiOiJja2g4Z3FhMHQwaXJ4MzBrOHVjNmtocXB4In0.-oobkw-mOV3-34JwHgrjig';
    const map = new mapboxgl.Map({
      container: this.map_ref.current,
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [this.state.map_state.lat, this.state.map_state.lng],
      zoom: this.state.map_state.zoom,
      
    });

    // Add navigation control (the +/- zoom buttons)
    map.addControl(new mapboxgl.NavigationControl(), 'top-right');

    map.on('move', () => {

      this.handleMapState(map.getCenter().lng.toFixed(4),
      map.getCenter().lat.toFixed(4),
      map.getZoom().toFixed(2));
    });

  });

  this.setState({map:map})
  };

  // Function called when object is removed
  componentWillUnmount() { 
    this.state.map.remove();
  };

    
    // Handles movement using map controls
    handleMapState(lng, lat, zoom) {
    this.setState({map_state : {"zoom": zoom,
            "lat": lat,
            "lng": lng}})
    }
    
    // Runs search after button click
    async runSearch(event) {
    console.log("Running search for", this.state.query)
    
        this.setState({loading:true});
        axios.get(EVAL_URL + '?address=' + this.state.query).then((response) => {
            // handle success
            console.log(response);
            // jump map here

            this.state.map.jumpTo({ center: [response.data.lat, response.data.lng], zoom: 14})
            this.setState({
            geocoded_value: [response.data.lng, response.data.lat],
            map_state: {"zoom": 14,
                            "lat": response.data.lng,
                            "lng":response.data.lat},
            generators: response.data.locations,
            orphans : response.data.orphans,
            rank: response.data.rank,
            proposed_address: response.data.address_proposed.LOCATION,
            loading:false,
            loaded:true});

          })
          .catch((error) => {
            console.log(error);
            this.setState({
            loading:false,
            error_message: error,
            });
          });

}

render() {
        return (
                <div className="map-wrapper">
      <div className='sidebarStyle'>
      <div>
          Longitude: {this.state.map_state.lng} | Latitude: {this.state.map_state.lat} | Zoom: {this.state.map_state.zoom}
        </div>
      </div>
      <div className='map-container' ref={this.map_ref} />
    </div>
                </div>
        );
    }
}export default App;

Answer 1

When calling jumpTo, you should pass center array with lng as first, lat as second element, not the other way around. Mapbox GL - Camera Options