Documentation

Vector Maps for React Native

Advanced User Setup

Using MapLibre GL SDK for React Native for Native apps



MapLibre GL SDK for React Native

MapLibre is an open source project that was forked from Mapbox GL SDK. It is our preferred mapping program for interactive maps due to its modern design and ease of use.

Link Description
Homepage The Projects home for Native SDK
SDK Reference Information, examples, and plugins
Github Source code

Prerequisites

  • On Android, API 23 and higher is supported

Add Dependencies


Installation

Set up a React Native project

If you don't have an existing React Native project, create one:

npx react-native init MyApp

Install Package

From your React Native project's root directory, add the package via either yarn or npm (pick one).

# install with Yarn
yarn add @maplibre/maplibre-react-native
# install with NPM
npm install @maplibre/maplibre-react-native --save

Review platform specific info

Check out the installation guide(s) for additional information about platform-specific setup, quirks, and steps required before running.


Adding a map

Here is an example minimal App.js

import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import MapLibreGL from '@maplibre/maplibre-react-native';

// Will be null for most users (only Mapbox authenticates this way).
// Required on Android. See Android installation notes.
MapLibreGL.setAccessToken(null);

const apiKey = 'Your-Api-Key';
const mapLanguage = 'en'
const mapStyleUrl = `https://api.slpy.com/style/slpy-mgl-style.json?key=${apiKey}&lang=${mapLanguage}`;

const styles = StyleSheet.create({
  page: {
	flex: 1,
	justifyContent: 'center',
	alignItems: 'center',
	backgroundColor: '#F5FCFF',
  },
  map: {
	flex: 1,
	alignSelf: 'stretch',
  },
});

export default class App extends Component {
  render() {
	return (
	  <View style={styles.page}>
		<MapLibreGL.MapView
		  style={styles.map}
		  logoEnabled={false}
		  styleURL={mapStyleUrl}
		/>
	  </View>
	);
  }
}

Run it!

iOS

# Run with yarn
yarn run ios

# or Run with NPM
npm run ios

Android

# Run with yarn
yarn run android

# or Run with NPM
npm run android

Next Steps

Customize and add features to your new map

Settings & Features

  • Common settings and Language Support.
  • Content Filtering
  • Satellite, Street Level, and other features.
  • Compatibility for older browsers.

Map Design

  • Customize your maps look
  • Night Mode, Greyscale.
  • Get the Slpy Style source code.

Search & Geocoding

  • Add a search bar to your map.
  • Translate addresses to coordinates
  • Search for points of interest.