Miss any of our Open RFC calls?Watch the recordings here! »

react-leaflet-box-zoom

1.0.2 • Public • Published

react-leaflet-box-zoom

A Box zoom tool for React Leaflet

NPM JavaScript Style Guide

About

A box zoom tool for React Leaflet.

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

MIT © ChrisLowe-Takor

Keywords

none

Install

npm i react-leaflet-box-zoom

DownloadsWeekly Downloads

24

Version

1.0.2

License

MIT

Unpacked Size

49.1 kB

Total Files

8

Last publish

Collaborators

  • avatar