SDKs overview

Mapbox provides a suite of Software Development Kits (SDKs) and libraries designed to facilitate the integration of its mapping and location services into various applications. These tools abstract the complexities of interacting with Mapbox's APIs, offering native-like performance and access to features such as vector maps, custom styling, geocoding, and turn-by-turn navigation. The SDKs are available for web, mobile, and game development environments, supporting both official and community-driven projects.

The core of Mapbox's SDK offerings is built upon vector tiles and WebGL, enabling dynamic and high-performance map rendering. Developers can customize map styles using Mapbox Studio and apply them across different platforms via the respective SDKs. Mobile SDKs for iOS and Android also include capabilities for offline map usage, which is beneficial for applications requiring functionality in areas with limited connectivity.

Official SDKs by language

Mapbox maintains several official SDKs, each tailored to specific development environments and programming languages. These SDKs are actively developed and supported by Mapbox, ensuring compatibility with the latest features and performance optimizations. The table below outlines the primary official SDKs, their target platforms, and typical installation methods.

SDK Name Language / Platform Primary Package / Module Maturity
Mapbox GL JS JavaScript (Web) mapbox-gl Stable
Mapbox Maps SDK for iOS Swift / Objective-C MapboxMaps Stable
Mapbox Maps SDK for Android Kotlin / Java com.mapbox.maps Stable
Mapbox React Native SDK JavaScript (React Native) @mapbox/mapbox-gl-react-native Stable
Mapbox Flutter SDK Dart (Flutter) mapbox_maps_flutter Stable
Mapbox Unity SDK C# (Unity) Mapbox.Unity Stable

Installation

Installation procedures vary depending on the target platform and SDK. Below are common installation methods for the official Mapbox SDKs. Before installing, ensure you have a Mapbox access token, which is required for authenticating requests to Mapbox services.

Mapbox GL JS (Web)

For web applications, Mapbox GL JS can be installed via npm or by including it directly from a CDN.

npm

npm install mapbox-gl --save

Then, import it into your JavaScript file:

import mapboxgl from 'mapbox-gl';
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';

CDN

Include the CSS and JavaScript files in your HTML <head>:

<link href="https://api.mapbox.com/mapbox-gl-js/v3.4.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.4.0/mapbox-gl.js"></script>

Mapbox Maps SDK for iOS

The iOS SDK can be installed using Swift Package Manager (SPM) or CocoaPods.

Swift Package Manager

  1. In Xcode, go to File > Add Packages...
  2. Enter https://github.com/mapbox/mapbox-maps-ios.git as the package repository URL.
  3. Choose the desired version or branch.

CocoaPods

Add the following to your Podfile:

pod 'MapboxMaps', '~> 11.0'

Then, run pod install.

Mapbox Maps SDK for Android

For Android development, the SDK is typically added as a dependency in your project's build.gradle file.

In your project-level build.gradle, ensure Mapbox's Maven repository is included:

allprojects {
    repositories {
        google()
        mavenCentral()
        maven { url 'https://api.mapbox.com/downloads/v2/releases/maven' }
    }
}

In your app-level build.gradle, add the dependency:

dependencies {
    implementation 'com.mapbox.maps:android:11.7.0'
}

Then, sync your project with Gradle files.

Mapbox React Native SDK

Install the React Native SDK using npm or yarn:

npm install @mapbox/mapbox-gl-react-native
# or
yarn add @mapbox/mapbox-gl-react-native

Then, link native modules (for older React Native versions or manual linking):

npx react-native link @mapbox/mapbox-gl-react-native

Follow additional platform-specific steps for iOS (CocoaPods) and Android (Gradle) as detailed in the Mapbox React Native SDK installation guide.

Mapbox Flutter SDK

Add the mapbox_maps_flutter dependency to your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  mapbox_maps_flutter: ^0.7.0

Then, run flutter pub get.

Mapbox Unity SDK

The Unity SDK is typically installed by downloading a .unitypackage file from the Mapbox Unity SDK releases page and importing it into your Unity project.

  1. Download the latest MapboxSdk.unitypackage.
  2. In Unity, go to Assets > Import Package > Custom Package...
  3. Select the downloaded .unitypackage file and import all assets.

Quickstart example

This example demonstrates how to display a basic map on a webpage using Mapbox GL JS. This quickstart requires a Mapbox access token, which can be obtained from your Mapbox account dashboard.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Display a map</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <link href="https://api.mapbox.com/mapbox-gl-js/v3.4.0/mapbox-gl.css" rel="stylesheet">
    <script src="https://api.mapbox.com/mapbox-gl-js/v3.4.0/mapbox-gl.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
        mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN'; // Replace with your actual access token
        const map = new mapboxgl.Map({
            container: 'map', // container ID
            style: 'mapbox://styles/mapbox/streets-v12', // style URL
            center: [-74.0060, 40.7128], // starting position [lng, lat]
            zoom: 9 // starting zoom
        });
    </script>
</body>
</html>

This HTML snippet initializes a map centered on New York City with a default street style. Replace 'YOUR_MAPBOX_ACCESS_TOKEN' with your personal Mapbox access token to render the map correctly. Further customization, such as adding markers, layers, or interactive elements, can be achieved by extending this basic setup with additional Mapbox GL JS API calls, as detailed in the Mapbox GL JS API reference.

Community libraries

Beyond the official SDKs, the Mapbox ecosystem benefits from a variety of community-contributed libraries and wrappers. These libraries often extend functionality, provide integrations with specific frameworks not officially supported, or offer alternative approaches to common tasks. While not officially maintained by Mapbox, they can be valuable resources for developers.

Examples of community contributions often include:

  • Framework-specific wrappers: Libraries that simplify Mapbox integration into frameworks like Vue.js or Angular, providing components that abstract away direct Mapbox GL JS calls.
  • Data visualization tools: Extensions that enhance Mapbox's data visualization capabilities, such as advanced heatmaps or 3D rendering utilities built on top of the core SDKs.
  • Utility libraries: Tools for tasks like geofencing, advanced routing algorithms, or custom UI components that complement Mapbox's offerings.

Developers seeking community-driven solutions often explore resources like GitHub repositories tagged with "mapbox" or "mapbox-gl", or package managers like npm for JavaScript-based tools. For instance, libraries integrating Mapbox with frameworks like Google's Polymer Project or Angular CLI can be found through community channels, demonstrating the flexibility of the Mapbox platform for custom development. It's important to review the maintenance status and documentation of any community library before integrating it into a production application.