forked from nitaliano/react-native-mapbox-gl
-
Notifications
You must be signed in to change notification settings - Fork 0
/
example.js
89 lines (85 loc) · 2.74 KB
/
example.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
'use strict';
var React = require('react-native');
var Mapbox = require('react-native-mapbox-gl');
var {
AppRegistry,
StyleSheet,
View
} = React;
var MapExample = React.createClass({
getInitialState() {
return {
center: {
latitude: 40.7223,
longitude: -73.9878
},
annotations: [{
coordinates: [40.7223, -73.9878],
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.7923, -73.9178],
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": 3,
"alpha": 0.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",
"alpha":1,
"fillColor": "#FFFFFF",
"strokeColor": "#FFFFFF",
"strokeWidth": 1,
"id": "zap"
}]
}
},
render: function() {
return (
<View style={styles.container}>
<Mapbox
annotations={this.state.annotations}
accessToken={'mapbox-access-token'}
centerCoordinate={this.state.center}
debugActive={false}
direction={0}
rotationEnabled={true}
scrollEnabled={true}
style={styles.map}
styleUrl={'asset://styles/streets-v8.json'}
zoomEnabled={true}
zoomLevel={12}
/>
</View>
);
}
});
var styles = StyleSheet.create({
container: {
flex: 1
},
map: {
width: require('Dimensions').get('window').width,
flex: 1
}
});
AppRegistry.registerComponent('your-app-name', () => MapExample);