react-leaflet-custom-control

Creates a control wrapper around a React element

Usage no npm install needed!

<script type="module">
  import reactLeafletCustomControl from 'https://cdn.skypack.dev/react-leaflet-custom-control';
</script>

README

react-leaflet-custom-control

npm npm license

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