/bingmaps-react

An easy to use Bing Maps component for React apps

Primary LanguageJavaScript

Maintainability Build Status

Bing Maps - React

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

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="BING_MAPS_KEY" />

Minimal Example:

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

function MyReactApp() {
  return <BingMapsReact bingMapsKey="1a2b3c4d5e6f7g8h9i0j" />;
}

Customized Example:

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

function BingMap() {
  return (
    <BingMapsReact
      bingMapsKey="1a2b3c4d5e6f7g8h9i0j"
      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 of parent element
mapOptions object null A Bing Maps MapOptions Object. See the MapOptions Object documentation for more information about each option.
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 inbox box 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 of parent element