# @hsluoyz/bingmaps-react

> An easy to use Bing Maps component for React apps

Latest version **0.4.10** (published 2020-12-06) · 0 weekly downloads

## Install

```sh
npm install @hsluoyz/bingmaps-react
pnpm add @hsluoyz/bingmaps-react
yarn add @hsluoyz/bingmaps-react
bun add @hsluoyz/bingmaps-react
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.10 |
| Published | 2020-12-06 |
| First published | 2020-12-06 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 1.9 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 20 |
| Author | Miles Pratt |
| Maintainers | hsluoyz |
| Keywords | bing, maps, bingmaps, bing maps, react bing maps, microsoft bingmaps |

## Links

- npm: https://www.npmjs.com/package/@hsluoyz/bingmaps-react
- Repository: https://github.com/milespratt/bingmaps-react
- Homepage: https://github.com/milespratt/bingmaps-react#readme
- Issues: https://github.com/milespratt/bingmaps-react/issues
- npm.io page: https://npm.io/package/@hsluoyz/bingmaps-react

## Dependencies (6)

- [react](https://npm.io/package/react.md) ^17.0.1
- [react-dom](https://npm.io/package/react-dom.md) ^17.0.1
- [react-scripts](https://npm.io/package/react-scripts.md) 4.0.1
- [@testing-library/react](https://npm.io/package/@testing-library/react.md) ^11.2.2
- [@testing-library/jest-dom](https://npm.io/package/@testing-library/jest-dom.md) ^5.11.6
- [@testing-library/user-event](https://npm.io/package/@testing-library/user-event.md) ^12.5.0

## Recent versions

- 0.4.10 (latest) — 2020-12-06

## README

[![Maintainability](https://api.codeclimate.com/v1/badges/b81f96d501e3f41bf2cc/maintainability)](https://codeclimate.com/github/milespratt/bingmaps-react/maintainability) <a href="https://codeclimate.com/github/milespratt/bingmaps-react/test_coverage"><img src="https://api.codeclimate.com/v1/badges/b81f96d501e3f41bf2cc/test_coverage" /></a> [![Build Status](https://travis-ci.com/milespratt/bingmaps-react.svg?branch=master)](https://travis-ci.com/milespratt/bingmaps-react)

<img align="right" width="100" height="100" src="https://github.com/milespratt/bingmaps-react/blob/master/src/assets/logo.png?raw=true">

# Bing Maps - React

An easy to use Bing Maps component for React apps. View the [demo](https://bingmaps-react.netlify.com).

<!-- <p align="center"> -->
  <img align="center" width="500" height="500" src="https://github.com/milespratt/bingmaps-react/blob/master/src/assets/screenshot.png?raw=true">
<!-- </p> -->

## 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](https://www.bingmapsportal.com).

## Installation

`yarn add bingmaps-react`

OR

`npm install bingmaps-react`

## Usage

Import the BingMapsReact component.

```javascript
import BingMapsReact from "bingmaps-react";
```

Render the component, passing in your bing maps API key

```javascript
<BingMapsReact bingMapsKey="BING_MAPS_KEY" />
```

Minimal Example:

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

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

Customized Example:

```javascript
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](https://docs.microsoft.com/en-us/bingmaps/v8-web-control/map-control-api/mapoptions-object) for more information about each option.    |
| pushPins              | array  | null    | An array of pushpin objects. See the [Bing Maps Pushpin documentation](https://docs.microsoft.com/en-us/bingmaps/v8-web-control/map-control-concepts/pushpins/) for more information.                           |
| pushPinsWithInfoboxes | array  | null    | An array of pushpin objects with inbox box options. See the [Bing Maps Infobox documentation](https://docs.microsoft.com/en-us/bingmaps/v8-web-control/map-control-concepts/infoboxes/) for more information.   |
| viewOptions           | object | null    | A Bing Maps ViewOptions Object. See the [ViewOptions Object documentation](https://docs.microsoft.com/en-us/bingmaps/v8-web-control/map-control-api/viewoptions-object) for more information about each option. |
| width                 | string | "100%"  | The map defaults to 100% height of parent element                                                                                                                                                               |

---
_Source: https://npm.io/package/@hsluoyz/bingmaps-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._