React-mapbox-gl: Explain why / how to get around -90 to 90 lat long restrictions

Created on 10 Oct 2017 · 4Comments · Source: alex3165/react-mapbox-gl

Hi I was trying to make a map based in San Francisco, but i keep receiving the following error

Error: Invalid LngLat latitude value: must be between -90 and 90

It's unclear to me right now how to make this map based where I want it to be based. Would you mind pointing how to get around this?

import ReactMapboxGl, { Layer, Feature } from 'react-mapbox-gl'

const mapCenter = [37.7749, -122.431297]

export class MainPage extends React.Component {

  render () {
    const Map = ReactMapboxGl({
      accessToken:''
    })

    return (
      <div>
        <Map
          style="mapbox://styles/mapbox/streets-v9"
          containerStyle={{
            height: "100vh",
            width: "100vw"
          }}
          center={mapCenter}
          >
        </Map>
      </div>
    )
  }
}

Question

Source

faiq

Most helpful comment

That's a common mistake but you'll get used to it, GeoJSON defines longitude first, then latitude, so:

const mapCenter = [-122.431297, 37.7749] // San Fran

From the API docs:

Mapbox GL uses longitude, latitude coordinate order (as opposed to latitude, longitude) to match GeoJSON. (source: https://www.mapbox.com/mapbox-gl-js/api/#lnglat)

rlueder on 10 Oct 2017

👍7

All 4 comments

That's a common mistake but you'll get used to it, GeoJSON defines longitude first, then latitude, so:

const mapCenter = [-122.431297, 37.7749] // San Fran

From the API docs:

Mapbox GL uses longitude, latitude coordinate order (as opposed to latitude, longitude) to match GeoJSON. (source: https://www.mapbox.com/mapbox-gl-js/api/#lnglat)

rlueder on 10 Oct 2017

👍7

I merged the PR with the note in the readme 👍