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, PropTypes and Leaflet are peer dependencies, if you haven't already installed them you can use:
npm install leaflet prop-types react react-dom react-leaflet # npm
yarn add leaflet prop-types react react-dom react-leaflet # Yarn
You can then use the API as presented in the example CodePen.
UMD
UMD builds are available on unpkg and
CDNJS (replace 1.8.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/1.8.0/react-leaflet.min.js"></script>
<!-- CDNJS, development -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-leaflet/1.8.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.