react-native-ipostmap-navigation

iPostMap Navigation SDK for React Native

Installation

npm install react-native-ipostmap-navigation

Setup API key

The API key is a unique identifier that authenticates requests associated with your project for usage and billing purposes. You must have at least one API key associated with your project.

Get an API key at https://map.ipostmap.vn/user > Developer > Key

Android

Provide access key from android/app/src/main/AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <application>
        <meta-data
            android:name="vn.map4d.map.ACCESS_KEY"
            android:value="YOUR_MAP_ACCESS_KEY"/>
        <meta-data
            android:name="vn.map4d.services.ACCESS_KEY"
            android:value="YOUR_SERVICES_ACCESS_KEY"/>
    </application>
</manifest>

iOS

Provide access key from ios/Runner/Info.plist

<key>Map4dMapAccessKey</key>
<string>YOUR_MAP_ACCESS_KEY</string>
<key>Map4dServicesAccessKey</key>
<string>YOUR_SERVICES_ACCESS_KEY</string>

Usage

import { View, StyleSheet, Button, Alert } from 'react-native';
import { startMapNavigation } from 'react-native-ipostmap-navigation';
import { fetchDirections, type MFDirectionsParams } from 'react-native-ipostmap-services';

const startNavigation = async () => {
  const params: MFDirectionsParams = {
    origin: { latitude: 16.039572, longitude: 108.212173 },
    destination: { latitude: 16.048087, longitude: 108.246115 },
    mode: "car"
  }

  const response = await fetchDirections(params)

  if (response.code !== 'ok') {
    console.log(`Get directions error with code: ${response.code}, message: ${response.message}`)
    Alert.alert(response.code, response.message)
    return
  }

  const result = response.result
  if (!result || typeof result !== 'object') {
    Alert.alert('Invalid directions result', result)
    return
  }

  const routes = result.routes
  if (!routes || !Array.isArray(routes)) {
    Alert.alert('Invalid directions routes', routes)
    return
  }

  if (routes.length == 0) {
    Alert.alert('Direction rout not found')
    return
  }

  const routeIndex = Math.floor(Math.random() * routes.length)
  startMapNavigation(result, routeIndex, params)
}

export default function App() {
  return (
    <View style={styles.container}>
      <Button
        onPress={startNavigation}
        title='Start Navigation'
      />
    </View>
  );
}

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