I am building an app using React Native and want to use the MapBox GL Component to render a map and add annotations. I am trying to implement this example from the github repo.
I've followed the installation instructions as best I can, but when the map loads, the annotations are not there. I get this:
This error in Xcode (3 times):
Oct 14 20:45:08 MapBoxDemo[9268] <Error>: CGContextRestoreGState: invalid context 0x0. Backtrace:
<-[UIStatusBarItemView updateContentsAndWidth]+33>
<-[UIStatusBarItemView initWithItem:data:actions:style:]+477>
<+[UIStatusBarItemView createViewForItem:withData:actions:foregroundStyle:]+134>
<-[UIStatusBarLayoutManager _createViewForItem:withData:actions:]+163>
<-[UIStatusBarLayoutManager _prepareEnabledItemType:withEnabledItems:withData:actions:itemAppearing:itemDisappearing:]+36
<-[UIStatusBarLayoutManager prepareEnabledItems:withData:actions:]+92>
<-[UIStatusBarForegroundView _setStatusBarData:actions:animated:]+797>
<-[UIStatusBarForegroundView setStatusBarData:actions:animated:]+332>
<__51-[UIStatusBar _prepareToSetStyle:animation:forced:]_block_invoke+360>
<+[UIView(Animation) performWithoutAnimation:]+65>
<-[UIStatusBar _prepareToSetStyle:animation:forced:]+866>
<-[UIStatusBar _requestStyleAttributes:animationParameters:forced:]+391>
<-[UIStatusBar requestStyle:animationParameters:forced:]+437>
<-[UIStatusBar requestStyle:animated:forced:]+90>
<-[UIStatusBar _evaluateServerRegistration]+250>
<__45-[UIView(Hierarchy) _postMovedFromSuperview:]_block_invoke+590>
<-[UIView(Hierarchy) _postMovedFromSuperview:]+544>
<-[UIView(Internal) _addSubview:positioned:relativeTo:]+1967>
<-[UIStatusBarWindow setStatusBar:]+288>
<-[UIApplication _createStatusBarWithRequestedStyle:orientation:hidden:]+340>
<-[UIApplication _runWithMainScene:transitionContext:completion:]+950>
<-[UIApplication workspaceDidEndTransaction:]+188>
<-[FBSSerialQueue _performNext]+192>
<-[FBSSerialQueue _performNextFromRunLoopSource]+45>
<__CFRUNLOOP_IS_CALLING_OUT_TO_A_SOURCE0_PERFORM_FUNCTION__+17>
<__CFRunLoopDoSources0+556>
<__CFRunLoopRun+867>
<CFRunLoopRunSpecific+488>
<-[UIApplication _run]+402>
<UIApplicationMain+171>
<main+111>
<start+1>
and this one (just once):
2015-10-14 20:45:09.328 [warn][tid:com.facebook.React.JavaScript] 'Warning: Failed propType: typeChecker is not a function. (In \'typeChecker(\npropValue,\ni,\ncomponentName,\nlocation,\npropFullName + \'[\' + i + \']\')\', \'typeChecker\' is undefined) Check the render method of `MapBoxDemo`.'
I have set the map center to the same position as the first annotation so it should definitely be in view.
All other functionality seems to work (recentering the map, zooming etc). I have also seen the example used here and it works (on iOS 8 at least).
Any ideas? Could it be iOS9 related? My code is below:
'use strict';
var React = require('react-native');
var MapboxGLMap = require('react-native-mapbox-gl');
var mapRef = 'mapRef';
var {
AppRegistry,
StyleSheet,
Text,
StatusBarIOS,
View
} = React;
var MapBoxDemo = React.createClass({
mixins: [MapboxGLMap.Mixin],
getInitialState() {
return {
center: {
latitude: 40.72052634,
longitude: -73.97686958312988
},
zoom: 11,
annotations: [{
coordinates: [40.72052634, -73.97686958312988],
"type": "point",
title: 'This is marker 1',
subtitle: 'It has a rightCalloutAccessory too',
rightCalloutAccessory: {
url: 'https://cldup.com/9Lp0EaBw5s.png',
height: 25,
width: 25
},
annotationImage: {
url: 'https://cldup.com/CnRLZem9k9.png',
height: 25,
width: 25
},
id: 'marker1'
}, {
coordinates: [40.714541341726175,-74.00579452514648],
"type": "point",
title: 'Important!',
subtitle: 'Neat, this is a custom annotation image',
annotationImage: {
url: 'https://cldup.com/7NLZklp8zS.png',
height: 25,
width: 25
},
id: 'marker2'
}, {
"coordinates": [[40.76572150042782,-73.99429321289062],[40.743485405490695, -74.00218963623047],[40.728266950429735,-74.00218963623047],[40.728266950429735,-73.99154663085938],[40.73633186448861,-73.98983001708984],[40.74465591168391,-73.98914337158203],[40.749337730454826,-73.9870834350586]],
"type": "polyline",
"strokeColor": "#00FB00",
"strokeWidth": 4,
"strokeAlpha": .5,
"id": "foobar"
}, {
"coordinates": [[40.749857912194386, -73.96820068359375], [40.741924698522055,-73.9735221862793], [40.735681504432264,-73.97523880004883], [40.7315190495212,-73.97438049316406], [40.729177554196376,-73.97180557250975], [40.72345355209305,-73.97438049316406], [40.719290332250544,-73.97455215454102], [40.71369559554873,-73.97729873657227], [40.71200407096382,-73.97850036621094], [40.71031250340588,-73.98691177368163], [40.71031250340588,-73.99154663085938]],
"type": "polygon",
"fillAlpha":1,
"strokeColor": "#fffff",
"fillColor": "blue",
"id": "zap"
}]
};
},
render: function() {
StatusBarIOS.setHidden(true);
return (
<View style={styles.container}>
<Text style={styles.text} onPress={() => this.addAnnotations(mapRef, [{
coordinates: [40.73312,-73.989],
type: 'point',
title: 'This is a new marker',
id: 'foo'
}, {
"coordinates": [[40.749857912194386, -73.96820068359375], [40.741924698522055,-73.9735221862793], [40.735681504432264,-73.97523880004883], [40.7315190495212,-73.97438049316406], [40.729177554196376,-73.97180557250975], [40.72345355209305,-73.97438049316406], [40.719290332250544,-73.97455215454102], [40.71369559554873,-73.97729873657227], [40.71200407096382,-73.97850036621094], [40.71031250340588,-73.98691177368163], [40.71031250340588,-73.99154663085938]],
"type": "polygon",
"fillAlpha": 1,
"fillColor": "#000",
"strokeAlpha": 1,
"id": "new-black-polygon"
}])}>
Add new marker
</Text>
<Text style={styles.text} onPress={() => this.selectAnnotationAnimated(mapRef, 0)}>
Open first popup
</Text>
<Text style={styles.text} onPress={() => this.removeAnnotation(mapRef, 0)}>
Remove first annotation
</Text>
<MapboxGLMap
style={styles.map}
direction={0}
rotateEnabled={true}
scrollEnabled={true}
zoomEnabled={true}
showsUserLocation={true}
ref={mapRef}
accessToken={'pk.eyJ1IjoibWF0dGhld2JldGEiLCJhIjoiY2lmcGZxdnpnMDFqOXVlbHllazRwcWxqZSJ9.M0lbiLNHcd-WT-Ps_MkCvA'}
styleURL={'asset://styles/streets-v8.json'}
centerCoordinate={this.state.center}
userLocationVisible={true}
zoomLevel={this.state.zoom}
onRegionChange={this.onRegionChange}
onRegionWillChange={this.onRegionWillChange}
annotations={this.state.annotations}
onOpenAnnotation={this.onOpenAnnotation}
onRightAnnotationTapped={this.onRightAnnotationTapped}
onUpdateUserLocation={this.onUpdateUserLocation} />
</View>
);
}
});
var styles = StyleSheet.create({
container: {
flex: 1
},
map: {
flex: 1
},
text: {
padding: 3
}
});
AppRegistry.registerComponent('MapBoxDemo', () => MapBoxDemo);
