1import * as Maps from 'expo-maps';
2import React, { useContext } from 'react';
3import { StyleSheet, View } from 'react-native';
4
5import ProviderContext from '../context/ProviderContext';
6
7export default function MarkerExample() {
8  const provider = useContext(ProviderContext);
9
10  return (
11    <View style={styles.container}>
12      <Maps.ExpoMap style={{ flex: 1, width: '100%' }} provider={provider}>
13        <Maps.Marker
14          latitude={48.85}
15          longitude={2.35}
16          markerTitle="Paris"
17          markerSnippet="You can choose custom marker colors!"
18          color="blue"
19        />
20        <Maps.Marker
21          latitude={44}
22          longitude={3}
23          markerTitle="Building"
24          markerSnippet="You can use custom marker icons!"
25          icon={require('../../../../assets/expo-maps/building.png')}
26        />
27        <Maps.Marker
28          latitude={40.4}
29          longitude={-3.7}
30          markerTitle="Madrid"
31          markerSnippet="I'm dragable"
32          draggable
33          color="green"
34        />
35        <Maps.Marker
36          latitude={51.5}
37          longitude={-0.13}
38          markerTitle="London"
39          markerSnippet="I'm semi transparent!"
40          opacity={0.5}
41        />
42        <Maps.Cluster
43          name="sample_cluster_group"
44          minimumClusterSize={2}
45          color="purple"
46          opacity={0.5}
47          markerTitle="Cluster"
48          markerSnippet="Zoom in to see particular markers">
49          <Maps.Marker latitude={50} longitude={10} />
50          <Maps.Marker latitude={51} longitude={10} />
51          <Maps.Marker latitude={52} longitude={10.15} />
52          <Maps.Marker latitude={52} longitude={9.85} />
53        </Maps.Cluster>
54      </Maps.ExpoMap>
55    </View>
56  );
57}
58
59const styles = StyleSheet.create({
60  container: {
61    flex: 1,
62  },
63});
64