bingmaps-react

An easy to use Bing Maps component for React apps

Usage no npm install needed!

<script type="module">
  import bingmapsReact from 'https://cdn.skypack.dev/bingmaps-react';
</script>

README

Maintainability milespratt

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

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

...