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 } }}
  />
)

...