Bingmaps in React.js. React.js component for Bingmaps. (Clone of react-bingmaps repo)
npm install react-bingmaps-extsh
latest stable
$ npm i react-bingmaps
`
$3
To use react-bingmaps in your react app, you should import it first.
`jsx
import { ReactBingmaps } from 'react-bingmaps';
`
Examples
Click here
#### Bingmaps
Follow Bing Maps Dev Center to get your Bingmaps key
`jsx
bingmapKey = "[YourBingMapsKey]" >
`
#### Map center with loaction
`jsx
bingmapKey = "[YourBingMapsKey]"
center = {[13.0827, 80.2707]}
>
`
!Alt text
Other props
##### mapTypeId : string
`jsx
mapTypeId = {"road"}
`
Find more map types - MapTypeId Enumeration
#### navigationBarMode : string
`jsx
navigationBarMode = {"compact"}
`
Find more NavigationBar Mode - NavigationBarMode Enumeration
#### supportedMapTypes : string[]
`jsx
supportedMapTypes = {["road","canvasDark"]}
`
Find more Supported Map Types Mode - MapTypeId Enumeration
#### heading : oneOfType([ string, number ])
Note: Available only for map mode - BirdView
`jsx
heading = {180}
`
#### zoom : number
`jsx
zoom = {5}
`
#### disableStreetside : bool
`jsx
disableStreetside={true}
`
#### pushPins : ArrayOf(objects)
`jsx
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)
`jsx
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)
`jsx
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
`jsx
getLocation = {
{addHandler: "click", callback:this.AddPushPinOnClick}
}
`
Callback Method
`jsx
AddPushPinOnClick(location){
//Outputs latitude and longitude
...
}
`
#### regularPolygons : ArrayOf(objects)
`jsx
regularPolygons = {
[
{
"center":[13.0827, 80.2707],
"radius":5,
"points":3,
"option": {fillColor: "green", strokeThickness: 2}
},
{
...
}
]
`
Find more option values - PolygonOptions
#### boundary : object
`jsx
//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
}
}
}
``