I'm not sure if I'm doing something wrong, but the map seems to initialize at the wrong zoom and center if the center starts at [0,0]. Changing the center to any other coordinates, [0,1] for example, seems to immediately fix the problem. I've managed to isolate the problem here:
import React from 'react';
import ReactDOM from 'react-dom';
import ReactMapboxGl from 'react-mapbox-gl';
import KEY from './constants/MAPBOX_API_KEY';
import STYLE from './constants/MAPBOX_STYLE';
const Map = ReactMapboxGl({
accessToken: KEY,
minZoom: 2,
maxZoom: 12,
});
const EventMap = ({ center, zoom }) => (
<Map
style={STYLE}
containerStyle={{
height: '100vh',
width: '100vw',
}}
center={center}
zoom={zoom}
/>
);
class EventMapContainer extends React.Component {
state = {
center: [0, 0],
zoom: 2,
}
render() {
const {
center,
zoom,
} = this.state;
return (
<EventMap
center={center}
zoom={[zoom]}
/>
);
}
}
ReactDOM.render(<EventMapContainer />, document.getElementById('app'));
I'm not sure if I'm doing something wrong, but the map seems to initialize at the wrong zoom and center if the center starts at [0,0]. Changing the center to any other coordinates, [0,1] for example, seems to immediately fix the problem. I've managed to isolate the problem here:
Can anybody help tell me what I'm doing wrong?