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

Getting Started

The example code below shows the changes needed to get MapLibre React Native working with our API.
Once familiar, it's recommended to start with the MapLibre React Native website for the most up to date code and install methods.

Add Dependencies

node
npm
React Native (0.74+)
On Android, API 23 and higher is supported

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.

Documentation