React-Native and Mapbox | Integrating a 3D Buildings Map and a Marker

Integrating a 3D Buildings Map and a Marker

As mentioned in the title, we will be working on a react-native project using typescript, and we will be integrating a full map features such as, displaying a map, a marker, displaying a navigation system, populating multiple customized markers and more, but first, let’s start with the basic step, which is integrating the map in our react-native project.

The first thing we need to do is to create a blank react-native project with a typescript template and you have simply to type this command in your terminal:

npx react-native init MyProjectName --template react-native-template-typescript

And do not forget to install first, the react-native CLI globally by typing this command:

npm install -g react-native-cli

before we start, let us install our Mapbox module, and simply by typing this command inside your project root folder :

npm install --save @rnmapbox/maps

Some basic configuration we need to do right now, and just follow these steps:

• Inside the android folder, you’ll find a file called build.gradle:
• We need to overwrite the mapbox dependencies within our android/build.gradle > buildscript > ext section

buildscript {
    ext {
        // ...
        RNMapboxMapsImpl = "mapbox" // required for v10
    }
}

And let’s not forget to add the mapbox maven repo:

// android/build.gradle

allprojects {
    repositories {
        // ...other repos
        maven {
            url 'https://api.mapbox.com/downloads/v2/releases/maven'
            authentication {
                basic(BasicAuthentication)
            }
            credentials {
                // Do not change the username below.
                // This should always be `mapbox` (not your username).
                username = 'mapbox'
                // Use the secret token you stored in gradle.properties as the password
                password = ''
            }
        }
        // ...even more repos?
    }
}

You can also find more details by accessing the installation guide for android devices here

Your file should look like this :

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    ext {
        buildToolsVersion = "31.0.0"
        minSdkVersion = 21
        compileSdkVersion = 31
        targetSdkVersion = 31   
        if (System.properties['os.arch'] == "aarch64") {
            // For M1 Users we need to use the NDK 24 which added support for aarch64
            ndkVersion = "24.0.8215888"
        } else {
            // Otherwise we default to the side-by-side NDK version from AGP.
            ndkVersion = "21.4.7075529"
        }
        RNMapboxMapsImpl = "mapbox"
    }
    repositories {
        google()
        mavenCentral()
    }
    dependencies {
        classpath("com.android.tools.build:gradle:7.2.1")
        classpath("com.facebook.react:react-native-gradle-plugin")
        classpath("de.undercouch:gradle-download-task:5.0.1")
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url("$rootDir/../node_modules/react-native/android")
        }
        maven {
            // Android JSC is installed from npm
            url("$rootDir/../node_modules/jsc-android/dist")
        }
        mavenCentral {
            // We don't want to fetch react-native from Maven Central as there are
            // older versions over there.
            content {
                excludeGroup "com.facebook.react"
            }
        }
        google()
        maven { url 'https://www.jitpack.io' }
        
       maven {
            url 'https://api.mapbox.com/downloads/v2/releases/maven'
            authentication {
                basic(BasicAuthentication)
            }
            credentials {
                // Do not change the username below.
                // This should always be `mapbox` (not your username).
                username = 'mapbox'
                // Use the secret token you stored in gradle.properties as the password
                password = ''
            }
        }
    }

}

This everything for the Mapbox configuration, now , we need to open our App.tsx file and just paste this code :

import {View, Text, StyleSheet} from 'react-native';
import MapboxGL from '@rnmapbox/maps';

MapboxGL.setAccessToken(
  '', //Paste your token here
);
MapboxGL.setConnected(true);
MapboxGL.setTelemetryEnabled(false);
MapboxGL.setWellKnownTileServer('Mapbox');

const App = () => {
  return (
    <View style={styles.container}>
      <MapboxGL.MapView
        style={styles.map}
        zoomEnabled={true}
        styleURL="mapbox://styles/mapbox/streets-v12" 
// You can create your own map styling by accessing to the mapbox studio
        rotateEnabled={true}>
        <MapboxGL.Camera
          zoomLevel={15}
          centerCoordinate={[10.181667, 36.806389]} // Put any coordinates 
          pitch={60}
          animationMode={'flyTo'}
          animationDuration={6000}
        />
        <MapboxGL.PointAnnotation
          id="marker"
          coordinate={[10.181667, 36.806389]}> // Put any coordinates
          <View />
        </MapboxGL.PointAnnotation>
      </MapboxGL.MapView>
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  map: {
    flex: 1,
  },
});

export default App;

This code will create a map in the whole screen, since we typed the flex:1, so it will take the whole screen, and inside your map, you’ll find a marker, just a simple pointer(for the moment).

This was just the beginning, our map will contain much more features in the future, we will be developing a lot of functionnalities that you won’t find on any other Youtube channel.

You can find the whole video with much more explanation here, also, do not forget to subscribe to my Youtube channel, since I will finish the whole react-native/ Mapbox series there, Stay tuned ..