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.

import BingMapsReact from "bingmaps-react";

Render the component, passing in your bing maps API key

<BingMapsReact bingMapsKey="your bing maps API key goes here" />

Minimal Example:

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

function MyReactApp() {
  return <BingMapsReact bingMapsKey="your bing maps API key goes here" />;
}

Customized Example:

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

function BingMap() {
  return (
    <BingMapsReact
      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.

Pushpins

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;

...

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

const pushPins = [pushPin];

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

...