Bing Maps - React
An easy to use Bing Maps component for React apps. View the demo here.
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
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 withlatitude
andlongitude
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 } }}
/>
)
...