react-native-here v1.0.8

react-native-here

A native module to use Here Maps SDK with React Native

|

Here Maps license

Go to HERE website and create your license key.

Getting started

$ npm install react-native-here --save

Mostly automatic installation

cd ios && pod install

Extra Steps

Android

In AndroidManifest.xml add:

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

Then, open AndroidManifest.xml and update this section with your license.

    <!-- HEREMaps -->
    <meta-data
        android:name="com.here.android.maps.appid"
        android:value="YOUR-APP-ID-HERE" />

    <meta-data
        android:name="com.here.android.maps.apptoken"
        android:value="YOUR-APP-TOKEN-HERE" />

    <meta-data android:name="com.here.android.maps.license.key"
        android:value="YOUR-LICENSE-KEY-HERE"/>

iOS

In AppDelegate.m: - Enter an app id, app code and license key.

@import NMAKit;

NSString* const kSampleAppID = @"";
NSString* const kSampleAppCode = @"";
NSString* const kSampleMapLicenseKey = @"";

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{

  [NMAApplicationContext setAppId:kSampleAppID
                             appCode:kSampleAppCode
                          licenseKey:kSampleMapLicenseKey];
  return YES;
}

Usage

Android

import Here from 'react-native-here';

const markers = [
  {
    latitude: 41.0872972,
    longitude: 29.0023211,
    title: 'example 1',
    description: 'example 1 description',
  },

  {
    latitude: 41.0872972,
    longitude: 29.0023211,
    title: 'example 2',
    description: 'example 2 description',
  },
];


 <Here
    style={{flex: 1, backgroundColor: '#FFF'}}
    center={{
      latitude: 30.326498,
      longitude: 78.065121,
    }}
    markersList={markers}
    mapType="normal"
    initialZoom={17}
    tilt={180}
    onClickMarker={marker => {
      console.log(marker.title); // example 1
    }}
  />

iOS

import Here from 'react-native-here';

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

this.state = {
  routeParams: {
    OriginLat: 0,
    OriginLng: 0,
    DestinationLat: 0,
    DestinationLng: 0,
  },
  initCoords: {
    Lat: 40.668727,
    Lng: -73.99285,
  },
  ButtonText: 'Create Route',
  switchView: false,
};
this.createRoute = this.createRoute.bind(this);


createRoute() {
  if (this.state.ButtonText !== 'Navigate') {
    this.setState({
      routeParams: {
        OriginLat: 40.668727,
        OriginLng: -73.99285,
        DestinationLat: 41.07064,
        DestinationLng: -71.860219,
      },
      ButtonText: 'Navigate',
    });
  } else {
    sleep(100).then(() => NativeModules.Here.Action('Navigate'));
  }
}

<Here
  InitCoords={this.state.initCoords}
  routeParams={this.state.routeParams}
  style={{
  justifyContent: 'center',
  alignItems: 'center',
  backgroundColor: '#FF0000',
  height: 400,
  width: 400,
  }}
/>