l-advanced-control

Advanced positioning layout for Leaflet Controls

Usage no npm install needed!

<script type="module">
  import lAdvancedControl from 'https://cdn.skypack.dev/l-advanced-control';
</script>

README

l-advanced-control

Leaflet controls with advanced positioning capabilities.

l-advanced-control example

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'
  1. Extend L.AdvancedControl class, to define your control.
const MyButton = L.AdvancedControl.extend({
    onAdd (map) {
        return L.DomUtil.create('div', 'my-button')
    }
})
  1. 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