l-advanced-control

Leaflet controls with advanced positioning capabilities.

Requirements

Leaflet 1.3.x.

Demo

Example

Usage

1. Include this plugin after Leaflet.js

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>
<script src="https://unpkg.com/l-advanced-control@0.1.2/build/l-advanced-control.min.js"></script>

or install and use with npm:

npm i l-advanced-control --save

import 'l-advanced-control'

2. Extend L.AdvancedControl class, to define your control.

const MyButton = L.AdvancedControl.extend({
    onAdd (map) {
        return L.DomUtil.create('div', 'my-button')
    }
})

3. Add it to map

const button = new MyButton({ position: { corner: 'topleft', grow: 'x' } })
button.addTo(map)

API

L.AdvancedControl adds to L.Control prop grow, which defined direction, in which it will "grow".

type Grow = 'x' | 'y'

Licence

MIT