react-leaflet-box-zoom
A Box zoom tool for React Leaflet
About
A box zoom tool for React Leaflet.
Installation
npm install --save react-leaflet-box-zoom
yarn install
Usage
{ return <div className="map"> <Map center=44635 22653 zoom=12 zoomControl=false > <TileLayer attribution="" url="https://mt0.google.com/vt/lyrs=s&x={x}&y={y}&z={z}"/> <ZoomControl position="topright" /> <BoxZoomControl position="topright" sticky=true /> </Map> </div> }
Ref control
You can programatically start and stop the box zoom tool by using a ref
<BoxZoomControl ref= thisboxZoomControlRef = ref /> // elsewherethisboxZoomControlRef;thisboxZoomControlRefstart;
Props
Name | Default | Description |
---|---|---|
sticky | false |
Setting to true will cause the zoom control to remain active after the user has zoomed |
position | topleft |
Position of the control. Valid values are topleft , topright , bottomleft , or bottomright |
style | A react css style prop for the button. You can pass in your own style such as a custom background image. The default is set to match the default Leaflet style with a box zoom icon | |
activeStyle | A react css style prop for the active state of the button. This appends to the style prop. |
License
MIT © ChrisLowe-Takor