ysimard/application-amicale
1
0
Fork 0
forked from vergnet/application-amicale
Code Issues Pull requests Releases Wiki Activity

Tried implementing basic map markers

Browse source
This commit is contained in:
Arnaud Vergnet 2020-06-22 16:04:08 +02:00
parent 211e57167d
commit 1af4688329
1 changed files with 51 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
src/screens/Services/MapScreen.js
View file

@ -6,32 +6,48 @@ import {withTheme} from 'react-native-paper';
import {StackNavigationProp} from "@react-navigation/stack"; import {StackNavigationProp} from "@react-navigation/stack";
import type {CustomTheme} from "../../managers/ThemeManager"; import type {CustomTheme} from "../../managers/ThemeManager";
import MapboxGL from "@react-native-mapbox-gl/maps"; import MapboxGL from "@react-native-mapbox-gl/maps";
import exampleIcon from '../../../assets/icon-notification.png';
type Props = { type Props = {
navigation: StackNavigationProp, navigation: StackNavigationProp,
theme: CustomTheme, theme: CustomTheme,
} }
type State = {
featureCollection: Array<Object>,
}
MapboxGL.setAccessToken("sk.eyJ1IjoiYW1pY2FsZS1pbnNhdCIsImEiOiJja2JpM212Z3QwYmxmMnhsc3RxZWYza2Q5In0.og84RKRa6-vr3qRA1qU9Aw"); MapboxGL.setAccessToken("sk.eyJ1IjoiYW1pY2FsZS1pbnNhdCIsImEiOiJja2JpM212Z3QwYmxmMnhsc3RxZWYza2Q5In0.og84RKRa6-vr3qRA1qU9Aw");
const layerStyles = { const styles = {
smileyFace: { icon: {
fillAntialias: true, iconImage: exampleIcon,
fillColor: 'white', iconAllowOverlap: true,
fillOutlineColor: 'rgba(255, 255, 255, 0.84)',
}, },
}; };
const FEATURES = [{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [1.4669608, 43.5698867],
}
}]
/** /**
* Class defining the app's map screen. * Class defining the app's map screen.
*/ */
class MapScreen extends React.Component<Props> { class MapScreen extends React.Component<Props, State> {
map : { current: null | MapboxGL.MapView }; map: { current: null | MapboxGL.MapView };
constructor() { constructor() {
super(); super();
this.map = React.createRef(); this.map = React.createRef();
this.state = {
featureCollection: [],
};
} }
componentDidMount() { componentDidMount() {
@ -39,23 +55,47 @@ class MapScreen extends React.Component<Props> {
} }
onSymbolPress = (feature) => {
console.log("coucou");
}
onSourceLayerPress = ({features, coordinates, point}) => {
console.log(
'You pressed a layer here are your features:',
features,
coordinates,
point,
);
}
render() { render() {
return ( return (
<View style={{flex: 1}}> <View style={{flex: 1}}>
<MapboxGL.MapView <MapboxGL.MapView
style={{flex: 1}} style={{flex: 1}}
styleURL={MapboxGL.StyleURL.Outdoors}
ref={this.map} ref={this.map}
styleURL={MapboxGL.StyleURL.Outdoors}
surfaceView={true} surfaceView={true}
onPress={async () => { onPress={(e) => {
const center = await this.map.current.getCenter(); console.log(e)
console.log(center);
}} }}
> >
<MapboxGL.Camera <MapboxGL.Camera
zoomLevel={15} zoomLevel={15}
centerCoordinate={[1.4669608, 43.5698867]} centerCoordinate={[1.4669608, 43.5698867]}
pitch={30}
/> />
{/*<MapboxGL.ShapeSource*/}
{/* id="symbolLocationSource"*/}
{/* shape={{ type: 'FeatureCollection', features: FEATURES }}*/}
{/*>*/}
{/* <MapboxGL.SymbolLayer*/}
{/* id="symbolLocationSymbols"*/}
{/* minZoomLevel={15}*/}
{/* style={styles.icon}*/}
{/* />*/}
{/*</MapboxGL.ShapeSource>*/}
</MapboxGL.MapView> </MapboxGL.MapView>
</View> </View>
); );