npm install @rnmapbox/maps

A Mapbox react native module for creating custom maps

About @rnmapbox/maps

The @rnmapbox/maps module is an essential tool for developers working with React Native who need to integrate rich, interactive maps into their mobile applications. This npm package leverages the powerful Mapbox Maps SDK, which is renowned for its high level of customization, robust features, and seamless performance. Users of @rnmapbox/maps can easily implement detailed maps that feature customizable layers, styles, and markers. The module supports a range of functionalities from basic static maps to advanced interactive maps that respond to user gestures and can display dynamic data in real-time. This makes it incredibly useful for applications in sectors like logistics, travel, real estate, and more, where mapping and geographic data visualization are crucial.

To get started with integrating these advanced mapping capabilities into your React Native application, you can simply run the command "npm install @rnmapbox/maps". This command installs the module into your project, setting you up to utilize the extensive features of the Mapbox Maps SDK. After installation, developers can access a variety of map styles and control the map's appearance and interactions to a granular level. The ease of installation and the depth of documentation available make it straightforward for developers to implement sophisticated mapping solutions quickly and efficiently.

The benefits of using @rnmapbox/maps in your React Native projects extend beyond simple map visualization. This module provides advanced geospatial analysis tools that can help in creating highly interactive, user-focused applications. Features such as real-time traffic updates, terrain visualization, and route calculation empower developers to build complex, location-based applications. Moreover, the module's compatibility with React Native ensures that the performance is optimized for both Android and iOS platforms, providing a smooth, native user experience. By integrating @rnmapbox/maps, developers can significantly enhance the functionality and appeal of their mobile applications, making them more engaging and useful for users.

More from rnmapbox

rnmapbox npm packages

Find the best node modules for your project.

Search npm

@rnmapbox/maps

A Mapbox react native module for creating custom...

Read more

Dependencies

Core dependencies of this npm package and its dev dependencies.

@turf/along, @turf/distance, @turf/helpers, @turf/length, @turf/nearest-point-on-line, @types/geojson, debounce, @babel/core, @babel/eslint-parser, @babel/plugin-proposal-class-properties, @babel/runtime, @react-native/eslint-config, @sinonjs/fake-timers, @testing-library/react-native, @types/debounce, @types/mapbox-gl, @typescript-eslint/eslint-plugin, @typescript-eslint/parser, babel-jest, documentation, ejs, ejs-lint, eslint, eslint-config-prettier, eslint-plugin-ft-flow, eslint-plugin-import, eslint-plugin-jest, expo, expo-module-scripts, husky, jest, jest-cli, lint-staged, mapbox-gl, metro-react-native-babel-preset, node-dir, prettier, react, react-docgen, react-native, react-native-builder-bob, react-test-renderer, ts-node, typescript, @mdx-js/mdx

Documentation

A README file for the @rnmapbox/maps code repository. View Code

Mapbox Maps SDK for React Native

npm version iOS & Android Build

A community-supported, open-source React Native library for building maps with the Mapbox Maps SDK for iOS and Mapbox Maps SDK for Android

News & Discussions

→ Call for additional maintainers discussion thread

Supported Implementations

At the moment we support Mapbox (v10) and Mapbox (v11) beta. We default to Mapbox (v10).

See iOS & Android setup guide for using v11 beta

Prerequisite

  1. Please Sign Up to Mapbox to get the Mapbox Access Token.

Dependencies

Installation

Check our Installation instructions

Getting Started

For more information, check out our Getting Started section

Run Project

Before you run your project be sure you have completed the Installation Guides for Android or iOS.

Run iOS Simulator

# Run with yarn
yarn run ios

# or Run with NPM
npm run ios

Run Android Emulator

# Run with yarn
yarn run android

# or Run with NPM
npm run android

Adding a map

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

Mapbox.setAccessToken('<YOUR_ACCESSTOKEN>');

const App = () => {
  return (
    <View style={styles.page}>
      <View style={styles.container}>
        <Mapbox.MapView style={styles.map} />
      </View>
    </View>
  );
}

export default App;

const styles = StyleSheet.create({
  page: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  container: {
    height: 300,
    width: 300,
  },
  map: {
    flex: 1
  }
});

Documentation

Components

Sources

Layers

Terrain

Offline

Misc

Expo Support

This package is not available in the Expo Go app. Learn how you can use it with custom dev clients.

Testing with Jest

This library provides some mocks which are necessary for running tests.

Example:

"jest": {
  "preset": "react-native",
  "setupFilesAfterEnv": ["@rnmapbox/maps/setup-jest"],
  "transformIgnorePatterns": [
      "node_modules/(?!(...|@rnmapbox))"
  ]
}

Sponsors

Help drive this repo forward - be a sponsor. Add a comment here to discuss your sponsorship.

Scout To Hunt Terrain Dance LLC

Scout To Hunt

 Terrain Dance

Developer Group

Have a question or need some help? Join our Gitter developer group!