A layerlist control for react leaflet

Usage no npm install needed!

<script type="module">
  import reactLeafletStyledLayerlist from '';



A react leaflet layerlist control

NPM JavaScript Style Guide


npm install --save react-leaflet-styled-layerlist


This is a toggle control for react-leaflet that allows you can put arbitrary react components inside. It's perfect for replacing the default layer control with something more stylish and powerful. Clicking the control will open it and either clicking the map or the close button will close it.


import React, { Component } from 'react'
import { Map, TileLayer } from 'react-leaflet'
import { ReactLeafletLayerList, LayerListItem } from 'react-leaflet-styled-layerlist'

class Example extends Component {
  render () {
    return (
        center={[44.635, 22.653]}


            <h2>My awesome layerlist!</h2>


name default values
position 'topright' 'topright', 'bottomright', 'topleft', 'bottomleft'
style null see below
onOpen function returns on layerlist open
onClose function returns on layerlist close
openButtonStyle null see below
closeButtonStyle null see below
startOpen false Controls layerlist start open/close state


Styles are applied by adding key-value pairs directly to the DOM so please use standard CSS keys and not React's. For example, if you wanted a rounded open button you should use:

        'width': '32px',
        'height': '32px',
        'border-radius':  '16px'

A word on LayerListItem

The example shows your elements wrapped inside a LayerListItem. This isn't strictly necessary as all this component does is return it's children. However it does apply some CSS to make the transitions smoother and pushes the first child down a little to make room for the close button. You can leave it out if and replicate those style tweaks in your own components.

A word on Leaflet <-> React

Both React and Leaflet have their own opinions on how to manage the DOM which is why something like this is tricky to pull off. The heart of this component involves creating a container with L.DomUtil.create and then ReactDOM.portal to create a little island of React and finally ReactDOM.render to render it's children.

There might be some strange behaviour if you push things too far. For example I've not tested how context, refs, or complex state changes behave so your milage may vary.


This was created with create-react-library. Checkout the project then in the root directory

  npm install
  npm start

In a seperate terminal run the example project

  cd example
  npm install
  npm start

If you run into errors with the file:.. link between the example and library (ie react-leaflet-styled-layerlist not found) remove the node_modules directory and reinstall.


MIT © ChrisLowe-Takor