React-Bingmaps-ext

Introduction

React-Bingmaps is a react.js version of Bing Maps V8 Web Control

The main purpose of this version is to help you to write Bingmaps in React applications without any pain. Main principles of React-Bingmaps are:

Simply deploy with React components
Lightweight depending on Bing Maps V8 Web Control

Features

Bingmaps in React.js
Multiple Pushpin
Multiple Infobox
Multiple Pushpin with Infobox
Callback events in Pushpins and Infoboxes
Map types
Disable Street View
Zoom
Get Location on Mouse Events
Regular Polygon
Boundary
Polyline
Directions

Installation

npm

NPM is the easiest and fastest way to get started using React-Bingmaps.

# latest stable
$ npm i react-bingmaps

Import Module

To use react-bingmaps in your react app, you should import it first.

import { ReactBingmaps } from 'react-bingmaps';

Examples

Click here

Bingmaps

Follow Bing Maps Dev Center to get your Bingmaps key

<ReactBingmaps 
  bingmapKey = "[YourBingMapsKey]" > 
</ReactBingmaps>

Map center with loaction

<ReactBingmaps 
  bingmapKey = "[YourBingMapsKey]" 
  center = {[13.0827, 80.2707]}
  > 
</ReactBingmaps>

Other props

mapTypeId : string

mapTypeId = {"road"}

Find more map types - MapTypeId Enumeration

navigationBarMode : string

navigationBarMode = {"compact"}

Find more NavigationBar Mode - NavigationBarMode Enumeration

supportedMapTypes : string[]

supportedMapTypes = {["road","canvasDark"]}

Find more Supported Map Types Mode - MapTypeId Enumeration

heading : oneOfType([ string, number ])

Note: Available only for map mode - BirdView

heading = {180}

zoom : number

zoom = {5}

disableStreetside : bool

disableStreetside={true}

pushPins : ArrayOf(objects)

pushPins = {
            [
              {
                "location":[13.0827, 80.2707], "option":{ color: 'red' }, "addHandler": {"type" : "click", callback: this.callBackMethod }
              },
              {
                ...
              }
            ]
          }

Find more option values - Pushpin
addHandler types - ["click", "mousedown", "mouseout", "mouseup", "mouseover"]

infoboxes : ArrayOf(objects)

infoboxes = {
            [
              {
                "location":[13.0827, 80.2707], "option":{ title: 'Chennai', description: '...' }, "addHandler": {"type" : "click", callback: this.callBackMethod}
              },
              {
                ...
              }
            ]
          }

Find more option values - Infobox
addHandler types - ["click", "mouseenter", "mouseleave"]

infoboxesWithPushPins : ArrayOf(objects)

infoboxesWithPushPins = {[
            {
              "location":[13.0827, 80.2707], 
              "addHandler":"mouseover", //on mouseover the pushpin, infobox shown
              "infoboxOption": { title: 'Infobox Title', description: 'Infobox' },
              "pushPinOption":{ title: 'Pushpin Title', description: 'Pushpin' },
              "infoboxAddHandler": {"type" : "click", callback: this.callBackMethod },
              "pushPinAddHandler": {"type" : "click", callback: this.callBackMethod }
            },
            {
              ...
            }
          ]
          }

getLocation : objects

getLocation = {
  {addHandler: "click", callback:this.AddPushPinOnClick}
}

Callback Method

AddPushPinOnClick(location){
  //Outputs latitude and longitude
  ...
}

regularPolygons : ArrayOf(objects)

regularPolygons = {
            [
              {
                "center":[13.0827, 80.2707],
                "radius":5,
                "points":3,
                "option": {fillColor: "green", strokeThickness: 2}
              },
              {
                ...
              }
            ]

Find more option values - PolygonOptions

boundary : object

//Static array of locations
boundary = {
              {
                "location":['chennai'],
                "option":{
                  entityType: 'PopulatedPlace'
                },
                "polygonStyle" :{
                  fillColor: 'rgba(161,224,255,0.4)',
                  strokeColor: '#a495b2',
                  strokeThickness: 2
                }
              }
            }

//Search by string
boundary = {
              {
                "search":"India",
                "option":{
                  entityType: 'PopulatedPlace'
                },
                "polygonStyle" :{
                  fillColor: 'rgba(161,224,255,0.4)',
                  strokeColor: '#a495b2',
                  strokeThickness: 2
                }
              }
            }

Find more option values - Get Boundary Options

Credits

Author : https://www.npmjs.com/package/react-bingmaps-plus Author : https://www.npmjs.com/package/react-bingmaps

License

MIT