react-leaflet-custom-control

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

WARNING Version ^1.2.3 (which adds this note to the README) has updated peer dependencies for React v18. This may be a breaking change depending on your environment. If you are still running React v17 then install version 1.2.2.

Installation

npm install --save 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 position='topright'>
    <Button color='inherit'> 
      <SearchIcon />
    </Button>
  </Control>
</MapContainer>

Props

Name	Type	Default	Description
position	ControlOptions	required	The position of the control
children?	any	undefined	Child element to the control
style?	React.CSSProperties	undefined	CSS Styles to override the control