Browse Source

Tried implementing basic map markers

Arnaud Vergnet 1 year ago
parent
commit
1af4688329
1 changed files with 51 additions and 11 deletions
  1. 51
    11
      src/screens/Services/MapScreen.js

+ 51
- 11
src/screens/Services/MapScreen.js View File

@@ -6,32 +6,48 @@ import {withTheme} from 'react-native-paper';
6 6
 import {StackNavigationProp} from "@react-navigation/stack";
7 7
 import type {CustomTheme} from "../../managers/ThemeManager";
8 8
 import MapboxGL from "@react-native-mapbox-gl/maps";
9
+import exampleIcon from '../../../assets/icon-notification.png';
9 10
 
10 11
 type Props = {
11 12
     navigation: StackNavigationProp,
12 13
     theme: CustomTheme,
13 14
 }
14 15
 
16
+type State = {
17
+    featureCollection: Array<Object>,
18
+}
19
+
15 20
 MapboxGL.setAccessToken("sk.eyJ1IjoiYW1pY2FsZS1pbnNhdCIsImEiOiJja2JpM212Z3QwYmxmMnhsc3RxZWYza2Q5In0.og84RKRa6-vr3qRA1qU9Aw");
16 21
 
17
-const layerStyles = {
18
-    smileyFace: {
19
-        fillAntialias: true,
20
-        fillColor: 'white',
21
-        fillOutlineColor: 'rgba(255, 255, 255, 0.84)',
22
+const styles = {
23
+    icon: {
24
+        iconImage: exampleIcon,
25
+        iconAllowOverlap: true,
22 26
     },
23 27
 };
24 28
 
29
+const FEATURES = [{
30
+    type: 'Feature',
31
+    geometry: {
32
+        type: 'Point',
33
+        coordinates: [1.4669608, 43.5698867],
34
+    }
35
+}]
36
+
25 37
 /**
26 38
  * Class defining the app's map screen.
27 39
  */
28
-class MapScreen extends React.Component<Props> {
40
+class MapScreen extends React.Component<Props, State> {
29 41
 
30
-    map : { current: null | MapboxGL.MapView };
42
+    map: { current: null | MapboxGL.MapView };
31 43
 
32 44
     constructor() {
33 45
         super();
34 46
         this.map = React.createRef();
47
+
48
+        this.state = {
49
+            featureCollection: [],
50
+        };
35 51
     }
36 52
 
37 53
     componentDidMount() {
@@ -39,23 +55,47 @@ class MapScreen extends React.Component<Props> {
39 55
 
40 56
     }
41 57
 
58
+    onSymbolPress = (feature) => {
59
+        console.log("coucou");
60
+    }
61
+
62
+
63
+    onSourceLayerPress = ({features, coordinates, point}) => {
64
+        console.log(
65
+            'You pressed a layer here are your features:',
66
+            features,
67
+            coordinates,
68
+            point,
69
+        );
70
+    }
71
+
42 72
     render() {
43 73
         return (
44 74
             <View style={{flex: 1}}>
45 75
                 <MapboxGL.MapView
46 76
                     style={{flex: 1}}
47
-                    styleURL={MapboxGL.StyleURL.Outdoors}
48 77
                     ref={this.map}
78
+                    styleURL={MapboxGL.StyleURL.Outdoors}
49 79
                     surfaceView={true}
50
-                    onPress={async () => {
51
-                        const center = await this.map.current.getCenter();
52
-                        console.log(center);
80
+                    onPress={(e) => {
81
+                        console.log(e)
53 82
                     }}
54 83
                 >
55 84
                     <MapboxGL.Camera
56 85
                         zoomLevel={15}
57 86
                         centerCoordinate={[1.4669608, 43.5698867]}
87
+                        pitch={30}
58 88
                     />
89
+                    {/*<MapboxGL.ShapeSource*/}
90
+                    {/*    id="symbolLocationSource"*/}
91
+                    {/*    shape={{ type: 'FeatureCollection', features: FEATURES }}*/}
92
+                    {/*>*/}
93
+                    {/*    <MapboxGL.SymbolLayer*/}
94
+                    {/*        id="symbolLocationSymbols"*/}
95
+                    {/*        minZoomLevel={15}*/}
96
+                    {/*        style={styles.icon}*/}
97
+                    {/*    />*/}
98
+                    {/*</MapboxGL.ShapeSource>*/}
59 99
                 </MapboxGL.MapView>
60 100
             </View>
61 101
         );

Loading…
Cancel
Save