Installation

⚠️ If you have not read the introduction and Leaflet setup parts before accessing this page, please read them first. The Leaflet setup is required to make the following instructions work.

Using npm or Yarn

npm install react-leaflet # npm
yarn add react-leaflet # Yarn

React, ReactDOM and Leaflet are peer dependencies, if you haven't already installed them you can use:

npm install leaflet react react-dom # npm
yarn add leaflet react react-dom # Yarn

You can then use the API as presented in the example CodePen.

UMD

UMD builds are available on unpkg and CDNJS (replace 2.0.0 by the version you need):

<!-- unpkg, production (minified) -->
<script src="https://unpkg.com/react-leaflet/dist/react-leaflet.min.js"></script>
<!-- unpkg, development -->
<script src="https://unpkg.com/react-leaflet/dist/react-leaflet.js"></script>
<!-- CDNJS, production (minified) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-leaflet/2.0.0/react-leaflet.min.js"></script>
<!-- CDNJS, development -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-leaflet/2.0.0/react-leaflet.js"></script>

The library is injected as window.ReactLeaflet.
See the UMD example to get started.

⚠️ When using Object destructuring with the UMD build, prefer aliasing the Map class to avoid shadowing the browser's Map, using const { Map: LeafletMap } = window.ReactLeaflet rather than const { Map } = window.ReactLeaflet for example.