React Native Bing Maps

A React Native wrapper for Microsoft Bing Maps.

TOC

• Installation
• Linking
• Usage
• Props
• Types

Installation

Using npm:

npm install --save react-native-bing-maps

Using yarn:

yarn add react-native-bing-maps

Linking

Automatic linking is supported for both iOS and Android

Previous versions need to do manual linking. No support is offered for these previous react-native versions. Upgrade to modern versions of react-native. Use upgrade-helper tool on the internet if needed.

Bing Maps Key

Bing Maps Key. Must be obtained to use the Bing Maps SDK. The Bing Maps Key will need to be set through the API to use the Bing Maps native control and to make API requests to Bing Maps services. Visit the Bing Maps Dev Center Help page for detailed steps on obtaining one.

Android credentials setup

In order to use Bing Maps on android you need to add the credential key to gradle.

1. create a secrets.gradle file in android/app/ folder with the following contents

ext.credentialsKey = "you_bing_maps_key_here"

2. apply this key in your android/app/build.gradle file by adding

apply from: 'secrets.gradle'

at the top.

3. now add the key to the builds by adding

buildTypes.each {
        it.buildConfigField "String", "CREDENTIALS_KEY", "\"$credentialsKey\""
    }

in the android field next to defaultConfig. This will apply the same key to all build types.

OR

for separate creadential key for build types you can add it respective build type config

Usage

import * as React from 'react';

import { StyleSheet, View } from 'react-native';
import BingMapsView from 'react-native-bing-maps';

export default function App() {
  return (
    <View style={styles.container}>
      <BingMapsView
        credentialsKey="your_bing_maps_api_key"
        mapLocation={{ lat: 12.9010875, long: 77.6095084, zoom: 15 }}
        style={styles.box}
      />
    </View>
  );
}

Props

• credentialsKey
• mapLocation
• pins
• mapStyle
• style
• buildingsVisible;
• businessLandmarksVisible
• transitFeaturesVisible
• compassButtonVisible
• tiltButtonVisible
• zoomButtonsVisible
• copyrightDisplay
• onMapPinClicked
• onMapLoadingStatusChanged

credentialsKey [iOS]: string (Required)

Bing Map key accquired from above steps.

mapLocation?: MapLocation

describes the currect location of the map. The MapLocation type is described here

pins?: MapPin[]

Array of pins to be displayed on the map. The MapPin type is described here.

mapStyle?: string

string in JSON format to change the appearance of the map. Refer How to change Appearance of map for detailed info. Or you can use map stylesheet generator to generate the JSON.

style?: ViewStyle

Style to be applied to the parent view of Bing Map view.

buildingsVisible?: boolean;

Sets the building visibility on the map.

businessLandmarksVisible?: boolean;

Sets the landmarks icons visibility on the map.

transitFeaturesVisible?: boolean;

Sets transit features visibility on the map.

compassButtonVisible?: boolean;

Sets compass button visiblity on the map.

tiltButtonVisible?: boolean;

Sets tilt button visibility on the map.

zoomButtonsVisible?: boolean;

Sets zoom buttons visibility on the map.

copyrightDisplay?: 'allowHiding' | 'always';

Sets the microsoft copyright caption visibility on the map.

onMapPinClicked?: (e: NativeSyntheticEvent) => void

Event returns lat and long of the pin clicked on map.

onMapLoadingStatusChanged?: (e: NativeSyntheticEvent) => void

Event returns the loading status of the map.

Types

• BingMapsProps
• MapLocation
• MapPin

BingMapsProps

type BingMapsProps = {
  credentialsKey: string;
  pins?: MapPin[];
  mapLocation?: MapLocation;
  mapStyle?: string;
  style?: ViewStyle;
  buildingsVisible?: boolean;
  businessLandmarksVisible?: boolean;
  transitFeaturesVisible?: boolean;
  compassButtonVisible?: boolean;
  tiltButtonVisible?: boolean;
  zoomButtonsVisible?: boolean;
  copyrightDisplay?: 'allowHiding' | 'always';
  onMapPinClicked?: (e: NativeSyntheticEvent<EventTarget>) => void;
  onMapLoadingStatusChanged?: (e: NativeSyntheticEvent<EventTarget>) => void;
};

MapLocation

MapLocation {
  lat: number;
  long: number;
  zoom: number;
}

Where zoom is a number between 1 and 19. For more info on zoom levels visit Microsoft's docs on Understanding Scale and Resolutions

MapPin

MapPin {
  lat: number;
  long: number;
  icon: string;
}

where icon is the SVG string for the pin icon you want to display;

License

MIT