alex3165 / react-mapbox-gl

A React binding of mapbox-gl-js
http://alex3165.github.io/react-mapbox-gl/
MIT License
1.93k stars 536 forks source link

Map not initializing correctly if center is [0,0]? #653

Open sivakusayan opened 6 years ago

sivakusayan commented 6 years ago

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'));

Can anybody help tell me what I'm doing wrong?

eharkins commented 3 years ago

Any solution here? I get the same issue. Thanks