@rnmapbox/maps Documentation

The PointAnnotation component represents a one-dimensional shape located at a single geographical coordinate.

Performance and Usage Notes:

• For many points: If you need to display many points with static images, use ShapeSource and SymbolLayer instead for significantly better performance.
• For interactive views: If you need interactive React Native views as markers, use MarkerView. PointAnnotation renders its children onto a bitmap, which means standard React Native interactions may not work as expected.
• Animations: Avoid using animations like fadeDuration on child Image components, as the bitmap might be rendered in an intermediate animation state.

The RasterArraySource component is a map content source used to supply raster array image tiles to the map. It is primarily intended for displaying particle animations, such as wind or precipitation patterns.

Note: This component is @experimental and requires Mapbox Maps SDK v11.4.0 or later.

The Viewport component provides a structured way to organize camera management logic using states and transitions. At any given time, the viewport is in one of three modes:

• idle
• In a state (camera is being managed by a ViewportState)
• Transitioning between states.

To run the application on iOS, you can use the React Native CLI or Xcode:

1. From the example directory, run:

   yarn ios

Troubleshooting iOS Issues:

• nvm users: If you use nvm, copy ios/.xcode.env to ios/.xcode.env.local and modify it according to the instructions inside the file.
• PlistBuddy Error: If you encounter a CFBundleIdentifier error from PlistBuddy, run the project directly from Xcode to bypass the React Native CLI issue.

In your android/build.gradle file, add the Mapbox Maven repository to the allprojects block to allow downloading Mapbox dependencies. You must use the username mapbox and provide your secret token via the MAPBOX_DOWNLOADS_TOKEN property in gradle.properties.

allprojects {
    repositories {
        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 = project.properties['MAPBOX_DOWNLOADS_TOKEN'] ?: ""
            }
        }
    }
}

To install the current main branch of @rnmapbox/maps, initialize a React Native project and add the package via yarn:

react-native init sample --version 0.60.5
cd sample
yarn add https://github.com/rnmapbox/maps#main --save

To install @rnmapbox/maps on iOS, you must configure your ios/Podfile with specific pre-install and post-install hooks to handle Mapbox dependencies. After updating the Podfile, run pod install from the ios directory.

1. Update Podfile

Add the following hooks to your ios/Podfile:

  pre_install do |installer|
    $RNMapboxMaps.pre_install(installer)
    ... other pre install hooks
  end

  post_install do |installer|
    $RNMapboxMaps.post_install(installer)
    ... other post install hooks
  end

2. Install Pods

cd ios
pod install

To use Mapbox Maps SDK v11, you must add the Mapbox Maven repository to your android/build.gradle file under the allprojects/repositories section. Note that MAPBOX_DOWNLOADS_TOKEN is no longer required as Mapbox has lifted the authentication requirement for downloads.

// android/build.gradle

allprojects {
    repositories {
        // ...other repos
        maven {
            url 'https://api.mapbox.com/downloads/v2/releases/maven'
        }
        // ...even more repos?
    }
}

To avoid duplicate file conflicts, add packagingOptions to the android block in your android/app/build.gradle file.

android {
    packagingOptions {
        pickFirst 'lib/x86/libc++_shared.so'
        pickFirst 'lib/x86_64/libc++_shared.so'
        pickFirst 'lib/arm64-v8a/libc++_shared.so'
        pickFirst 'lib/armeabi-v7a/libc++_shared.so'
    }
}

Follow these steps to install the example project dependencies:

1. Navigate to the example directory:

   cd example

2. Create the accesstoken file with your Mapbox token (see Set up Mapbox access token).
3. Install dependencies:

   yarn install

4. Android Setup: Configure your Mapbox developer keys in gradle.properties as described in the Android installation guide.
5. iOS Setup: Install CocoaPods:

   cd ios
   pod install