Bing layer as React component for Leaflet build on top of React-Leaflet.
To get started, to be able to run the example you have execute:
npm installimport React from 'react';
import { MapContainer, TileLayer, LayersControl } from 'react-leaflet'
import {BingLayer} from '../src'
const { BaseLayer, Overlay } = LayersControl;
export default class BingExample extends React.Component {
constructor() {
super();
this.state = {
geodata: null,
isadded: false
}
}
render() {
const bing_key = "YOUR-BING-KEY"
return (
<MapContainer center={[42.09618442380296, -71.5045166015625]} zoom={2} zoomControl={true}>
<LayersControl position='topright'>
<BaseLayer name='OpenStreetMap.Mapnik'>
<TileLayer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"/>
</BaseLayer>
<BaseLayer checked name='Bing Maps Roads'>
<BingLayer bingkey={bing_key} type="Road"/>
</BaseLayer>
<BaseLayer checked name='Bing Maps Satelite'>
<BingLayer bingkey={bing_key} />
</BaseLayer>
<BaseLayer checked name='Bing Maps Satelite with Labels'>
<BingLayer bingkey={bing_key} type="AerialWithLabels" />
</BaseLayer>
</LayersControl>
</MapContainer>
)
}
}You can find the following example in the folder example. Run the above code by executing the following scripts in package.json, with the order they are stated underneath:
-
build -
example
| option | type | default | |
|---|---|---|---|
| subdomains | array | [0, 1, 2, 3] | |
| type | string | One of the following values:
|
'Aerial' |
| attribution | string | 'Bing' | |
| culture | string | for supported culture codes see: https://msdn.microsoft.com/en-us/library/hh441729.aspx | '' |
| style | string | REST style parameters see: https://msdn.microsoft.com/en-us/library/mt823636.aspx#Related%20Resources | '' |
For more details on how to use this plugin check the example.