CODEWITHSUNDEEP
iosreact-nativemapboxmapbox-glreact-native-mapbox-gl
wdlax11
wdlax11

Reputation: 842

React Native Mapbox gl Initial Center Coordinates

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

Upvotes: 0

Views: 4867

Answers (4)

Surender Kumar
Surender Kumar

Reputation: 1285

MapboxGL default using the [0,0] lat long for initial centerCoordinate but we can override this in defautlSettings of Camera

<MapboxGL.Camera
   defaultSettings={{
     centerCoordinate: [-102.3211196, 41.4706217],
      zoomLevel: 10,
   }}
          
/>

Upvotes: 0

R1&#39;
R1&#39;

Reputation: 639

Try this :

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

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

<MapboxGL.MapView />

Upvotes: 3

uokesita
uokesita

Reputation: 301

According to the docs the value should be an array

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

Upvotes: 0

Maxence Machu
Maxence Machu

Reputation: 330

In your constructor try with: 

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

And: 

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

Upvotes: 0

Related Questions