Display Bing Tiles in React-Leaflet

6 Jun

React-Leaflet is a fantastic way to use a leaflet map in a ReactJS application, however it is not obvious how to extend the tile layer to let you use the Bing leaflet plugin with it.

Here is a component that inherits from BaseTileLayer to display Bing Tiles:

You will need to have react-leaflet and leaflet-plugins installed, then you can use this component to display a map like this:

Note: If you are having trouble compiling components extending React-Leaflet update your .babelrc to include preset stage-0 and npm install babel-preset-stage-0 --save

Leave a Reply

Your email address will not be published. Required fields are marked *