5.2.3 • Public • Published

react-leaflet-bing npm versionnpm downloadsNode.js CINode.js CI

Bing layer as React component for Leaflet build on top of React-Leaflet.

Bing example

Complete example with react-leaflet-geosearch

To get started, to be able to run the example you have execute:

npm install
import 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() {
    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}{z}/{x}/{y}.png"/>
            <BaseLayer checked name='Bing Maps Roads'>
              <BingLayer  bingkey={bing_key} type="Road"/>
            <BaseLayer checked name='Bing Maps Satelite'>
              <BingLayer  bingkey={bing_key} />
            <BaseLayer checked name='Bing Maps Satelite with Labels'>
              <BingLayer  bingkey={bing_key} type="AerialWithLabels" />

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:

  1. build

  2. example


option type default
subdomains array [0, 1, 2, 3]
type string One of the following values:
  • Aerial– Aerial imagery.
  • AerialWithLabels –Aerial imagery with a road overlay.
  • AerialWithLabelsOnDemand - Aerial imagery with on-demand road overlay.
  • CanvasDark - A dark version of the road maps.
  • CanvasLight - A lighter version of the road maps which also has some of the details such as hill shading disabled.
  • CanvasGray - A grayscale version of the road maps.
  • Road – Roads without additional imagery.
attribution string 'Bing'
culture string for supported culture codes see: ''
style string REST style parameters see: ''

For more details on how to use this plugin check the example.

Package Sidebar


npm i react-leaflet-bing-v2

Weekly Downloads






Unpacked Size

11.6 MB

Total Files


Last publish


  • tageoforce