react-leaflet-custom-control

A React-Leaflet component that renders React elements in leaflet's control pane.

Demo

installation

yarn add @skyeer/react-leaflet-custom-control or npm install @skyeer/react-leaflet-custom-control

Options

position: Which pane to mount to. Options are topleft, topright, bottomleft, bottomright

className: Add class name to div.leaflet-control

Usage

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

import Control from '@skyeer/react-leaflet-custom-control'

const DEFAULT_VIEWPORT = {
  center: [51.505, -0.09],
  zoom: 13,
}

export default class Example extends Component {
  state = {
    viewport: DEFAULT_VIEWPORT,
  }

  handleClick = () => {
    this.setState({ viewport: DEFAULT_VIEWPORT })
  }

  onViewportChanged = viewport => {
    this.setState({ viewport })
  }

  render() {
    return (
      <div>
        <h1>React-Leaflet-Custom-Control example</h1>
        <Map onViewportChanged={this.onViewportChanged} viewport={this.state.viewport}>
          <TileLayer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png" />
          <Control position="bottomright">
            <button onClick={this.handleClick}>Reset View</button>
          </Control>
        </Map>
      </div>
    )
  }
}

Attribution

Based on react-leaflet-control.