README
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
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 |