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

``js
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 (



)
}
}
``

Attribution

Based on react-leaflet-control.