React Native Mapbox gl Initial Center Coordinates

Question

So I am trying to set my initial center coordinates for mapbox so they are not 0,0. On the api it says mapbox expects a prop of

initialCenterCoordinate object  Optional    Initial latitude/longitude the map will load at.    { latitude:0, longitude: 0 }

So I am doing

<Mapbox
    initialCenterCoordinate={latitude: 40.444328, longitude: -79.953155} .... other props/>

This is giving me an error on that line saying unexpected token, expecting }.

Whenever I do something like

<Mapbox
    initialCenterCoordinate={{latitude: 40.444328, longitude: -79.953155}} .... other props/>

It still sets my initial spot to 0,0. Anyone have any ideas?

EDIT: link to git hub page- https://github.com/mapbox/react-native-mapbox-gl

initialCenterCoordinate is not working, any other solution? – Lovekush Vishwakarma Feb 22 '23 at 10:50 — Lovekush Vishwakarma, Feb 22 '23 at 10:50

score 3 · Answer 1 · answered Apr 17 '20 at 21:12

3

Try this :

<MapboxGL.MapView
  key='mainmap'
  style={{ flex: 1 }}>

   <MapboxGL.Camera
     zoomLevel={2}
     centerCoordinate={[2.21, 46.22]}/>

<MapboxGL.MapView />

answered Apr 17 '20 at 21:12

R1'

490
1
5
17

score 0 · Answer 2 · edited Aug 02 '17 at 13:35

0

In your constructor try with:

this.state = {
     position : {
        latitude: 49.437090,
        longitude: 1.097456,
     }
};

And:

<MapView initialCenterCoordinate={this.state.position}> </MapView>

edited Aug 02 '17 at 13:35

Stephen Rauch

47,830
31
106
135

answered Aug 02 '17 at 13:12

Maxence Machu

330
1
14

score 0 · Answer 3 · answered May 30 '18 at 14:01

0

According to the docs the value should be an array

 <Mapbox
     initialCenterCoordinate={[40.444328, -79.953155]} .... other props/>

answered May 30 '18 at 14:01

uokesita

191
1
11

React Native Mapbox gl Initial Center Coordinates

3 Answers3