React-leaflet-box-select-measurement-private NPM

react-leaflet-box-zoom

A Box zoom tool for React Leaflet

About

A box zoom tool for React Leaflet.

npm.io

Installation

npm install --save react-leaflet-box-zoom

yarn install

Usage

import React, { Component } from 'react'
import { Map, TileLayer, ZoomControl } from 'react-leaflet'

import { BoxZoomControl } from 'react-leaflet-box-zoom'

export default class App extends Component {

  render () {

    return (
      <div className="map">
        <Map
          center={[44.635, 22.653]}
          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={(ref) => this.boxZoomControlRef = ref} />

// elsewhere
this.boxZoomControlRef.stop();
this.boxZoomControlRef.start();

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

@turf/area @turf/circle @turf/nearest-point-on-line leaflet-rotatedmarker react-style-object-to-css turf

@infinitebrahmanuniverse/nolb-react-le @everything-registry/sub-chunk-2564

1.0.1

5 years ago