Bing Maps - React

An easy to use Bing Maps component for React apps. View the demo here.

- Bing Maps - React
- Prerequisites
- Installation
- Usage
- Props
- Examples
- Pushpins

Prerequisites

You must have a Bing Maps API key to take full advantage of this component. You can obtain an API key from the Bing Maps Dev Center.

Installation

``
yarn add bingmaps-react
`
OR
`
npm install bingmaps-react
`

Usage

Import the BingMapsReact component.

`javascript
import BingMapsReact from "bingmaps-react";
`

Render the component, passing in your bing maps API key

`javascript

`

Minimal Example:

`javascript
import React from "react";
import BingMapsReact from "bingmaps-react";

function MyReactApp() {
return ;
}
`

Customized Example:

`javascript
import React from "react";
import BingMapsReact from "bingmaps-react";

function BingMap() {
return (
bingMapsKey="your bing maps API key goes here"
height="500px"
mapOptions={{
navigationBarMode: "square",
}}
width="500px"
viewOptions={{
center: { latitude: 42.360081, longitude: -71.058884 },
mapTypeId: "grayscale",
}}
/>
);
}
`

Props

| Prop | Type | Default | Note |
| --------------------- | -------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| bingMapsKey | string | null | Your bing maps API key |
| height | string | "100%" | The map defaults to 100% height and width of parent element. |
| mapOptions | object | null | A Bing Maps MapOptions Object. See the MapOptions Object documentation for more information about each option. |
| onMapReady | function | null | Due to the asynchronous nature of the Bing Maps API you may encounter errors if you change props before the map has finished an initial load. You can pass a function to the onMapReady prop that will only run when the map has finished rendering. |
| pushPins | array | null | An array of pushpin objects. See the Bing Maps Pushpin documentation for more information. |
| pushPinsWithInfoboxes | array | null | An array of pushpin objects with infobox options. See the Bing Maps Infobox documentation for more information. |
| viewOptions | object | null | A Bing Maps ViewOptions Object. See the ViewOptions Object documentation for more information about each option. |
| width | string | "100%" | The map defaults to 100% height and width of parent element. |

Examples

Please reference the Bing Maps V8 Web Control documentation for more information about each of the features listed below.

$3

Docs

To add Pushpins to the map, pass in an array of pushpin objects to the pushPins prop. Each Pushpin object should have the following properties:

- center: An object with latitude and longitude properties.
- options: an object with Pushpin options;

`javascript
...

const pushPin = {
center: {
latitude: 27.987850,
longitude: 86.925026,
},
options: {
title: "Mt. Everest",
},
}

const pushPins = [pushPin];

return (
pushPins={pushPins}
viewOptions={{ center: { latitude: 27.98785, longitude: 86.925026 } }}
/>
)

...
``