react-leaflet-custom-control

A React wrapper to create a custom control for react-leaflet using ReactDOM's Portal capabilities

The current version of this package supports React Leaflet v3

Code Sandbox Demo

Installation

#npm
npm install --save react-leaflet-custom-control

#yarn
yarn add react-leaflet-custom-control

Usage

import { MapContainer, TileLayer } from 'react-leaflet'
import Control from 'react-leaflet-custom-control'
import { Button } from '@mui/material'
import { Search as SearchIcon } from '@mui/icons-material'
import 'leaflet.css'

<MapContainer center={[35.77, -93.34]} zoom={5}>
  <TileLayer
    attribution="Esri, DigitalGlobe, GeoEye, Earthstar Geographics, CNES/Airbus DS, USDA, USGS, AeroGRID, IGN, and the GIS User Community"
    className="basemap"
    maxNativeZoom={19}
    maxZoom={19}
    subdomains={["clarity"]}
    url="https://{s}.maptiles.arcgis.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"
  />
  <Control prepend position='topright'>
    <Button color='inherit'> 
      <SearchIcon />
    </Button>
  </Control>
</MapContainer>

Order Matters!

Because this uses React.createPortal which inherently appends the portal, DOM manipulation is used to append or prepend a container element to the portal target. Because of this, the order of your custom controls matter! The last Control element to be prepended to a control position will be at the very top while the last Control element to be appended to a control position will be at the very bottom. If mixing with default React Leaflet controls, they will be in between your custom controls.

Weird Quirks

However, because of the way that the portal works and re-renders, multiple control elements will shift order after renders, so it's recommended to have a wrapping element be the child of the Control to prevent re-ordering each render

Example

import { MapContainer, TileLayer, ZoomControl } from 'react-leaflet'
import Control from 'react-leaflet-custom-control'
import { Button, Stack } from '@mui/material'
import { 
  Add as AddIcon,
  Delete as DeleteIcon,
  Search as SearchIcon 
} from '@mui/icons-material'
import 'leaflet.css'

<MapContainer center={[35.77, -93.34]} zoom={5} zoomControl={false}>
  <TileLayer
    attribution="Esri, DigitalGlobe, GeoEye, Earthstar Geographics, CNES/Airbus DS, USDA, USGS, AeroGRID, IGN, and the GIS User Community"
    className="basemap"
    maxNativeZoom={19}
    maxZoom={19}
    subdomains={["clarity"]}
    url="https://{s}.maptiles.arcgis.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"
  />
  {/* Search control is the very top right control */}
  <Control prepend position='topright'>
    <Button color='inherit'> 
      <SearchIcon />
    </Button>
  </Control>
  <ZoomControl position='topright' />
  {/* This control will be below the default zoom control. Note the wrapping Stack component */}
  <Control position='topright'>
    <Stack direction='column' spacing={2} >
      <Button color='inherit'>
        <AddIcon />
      </Button>    
      <Button color='inherit'>
        <DeleteIcon />
      </Button>
    </Stack>
  </Control>
</MapContainer>

Props

Thanks

Huge thanks to @davetapley for contributing to @1.3.0 and helping to work some of the issues. Thanks to @samiamlabs for contributing to @1.3.2 for fixing the infinite div issue.