_react-native-mapbox-sdk-fly-to-examples.md

Code Examples for my Blog Post: How to Fly To a Location with the Mapbox Maps SDK for React Native

app-basic.js

import React, {Component} from 'react';
import {View, Text, Button, TouchableOpacity} from 'react-native';
import MapboxGL from '@mapbox/react-native-mapbox-gl';
import styles from './styles';

MapboxGL.setAccessToken(YOUR_ACCES_TOKEN);

export default class App extends Component<{}> {
  render () {
    return (
      <View style={{flex: 1}}>
        <MapboxGL.MapView
        ref={(c) => this._map = c}
        style={{flex: 1}}
        zoomLevel={15}
        centerCoordinate={[-73.98197650909422, 40.768793007758816]}>
        </MapboxGL.MapView>

        <View style={styles.container}>
          <View style={{flexDirection: "row"}}>
            <TouchableOpacity
            style={styles.button}
            onPress={() => {
              this._map.flyTo([-71.06017112731934, 42.36272976137689], 2500);
            }}>
            <Text style={styles.buttonText}>NYC</Text>
            </TouchableOpacity>
          </View>
        </View>
      </View>
      );
  }
}

app.js

import React, {Component} from 'react';
import {View, Text, Button, TouchableOpacity} from 'react-native';
import MapboxGL from '@mapbox/react-native-mapbox-gl';
import styles from './styles';

MapboxGL.setAccessToken(YOUR_ACCES_TOKEN);

const zoomDuration = 2500;
const nyc = [-73.98197650909422, 40.768793007758816];
const boston = [-71.06017112731934, 42.36272976137689];
const paris = [2.350215911865234, 48.862682060035624];
const rome = [12.480554580688477, 41.89729401198026];

export default class App extends Component<{}> {
  flyToNyc () {
    this._map.flyTo(nyc, zoomDuration);
  }

  flyToBoston () {
    this._map.flyTo(boston, zoomDuration);
  }

  flyToParis () {
    this._map.flyTo(paris, zoomDuration);
  }

  flyToRome () {
    this._map.flyTo(rome, zoomDuration);
  }

  render () {
    return (
      <View style={{flex: 1}}>
        <MapboxGL.MapView
        ref={(c) => this._map = c}
        style={{flex: 1}}
        zoomLevel={15}
        centerCoordinate={nyc}>
        </MapboxGL.MapView>

        <View style={styles.container}>
          <View style={{flexDirection: "row"}}>
            <TouchableOpacity
            style={styles.button}
            onPress={this.flyToNyc.bind(this)}>
              <Text style={styles.buttonText}>NYC</Text>
            </TouchableOpacity>
            <TouchableOpacity
            style={styles.button}
            onPress={this.flyToBoston.bind(this)}>
              <Text style={styles.buttonText}>Boston</Text>
            </TouchableOpacity>
            <TouchableOpacity
            style={styles.button}
            onPress={this.flyToParis.bind(this)}>
              <Text style={styles.buttonText}>Paris</Text>
            </TouchableOpacity>
            <TouchableOpacity
            style={styles.button}
            onPress={this.flyToRome.bind(this)}>
              <Text style={styles.buttonText}>Rome</Text>
            </TouchableOpacity>
          </View>
        </View>
      </View>
      );
  }
}

basic-syntax-1.js

this._map.flyTo([LONGITUDE, LATITUDE], ANIMATION_DURATION);

basic-syntax-2.js

<TouchableOpacity
style={styles.button}
onPress={() => {
  this._map.flyTo([-71.06017112731934, 42.36272976137689], 2500);
}}>
  <Text style={styles.buttonText}>NYC</Text>
</TouchableOpacity>

package.json

{
  "name": "mapboxflytoexample",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "@mapbox/react-native-mapbox-gl": "^6.0.2",
    "react": "16.0.0",
    "react-native": "0.51.0"
  },
  "devDependencies": {
    "babel-jest": "22.0.4",
    "babel-preset-react-native": "4.0.0",
    "jest": "22.0.4",
    "react-test-renderer": "16.0.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

styles.js

import { StyleSheet } from 'react-native';

export default StyleSheet.create({
    button : {
        padding: 10,
        backgroundColor: '#557f90',
        marginRight: 10
    },
    buttonText : {
        color: '#fff',
        fontSize: 10,
        fontWeight: 'bold'
    },
    container: {
        borderRadius: 30,
        position: 'absolute',
        top: 16,
        left: 48,
        right: 48,
        paddingVertical: 16,
        minHeight: 60,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#fff',
        borderWidth: 2.5,
        borderColor: '#ccc',
        flexDirection: "row"
    }
});