Leaflet.Control.Custom

A Customizable Leaflet Control Panel. You can insert any HTML element to map corners with

• Custom id
• Custom title
• Custom classes
• Custom styles
• Custom data attributes
• Custom events

Requirements

Leaflet v0.6.0+

Installation

For convenience (and the fact that the original project isn't update over a year) i created a npm package.

npm install --save leaflet-control-custom

Include script inside the head tag after Leaflet:

<script src="Leaflet.Control.Custom.js"></script>

Examples

Basic Demo

Usage

var map = L.map('map').setView([41.044663,29.033775], 12);

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
    maxZoom: 19,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);

L.control.custom({
    position: 'topright',
    content : '<button type="button" class="btn btn-default">'+
              '    <i class="fa fa-crosshairs"></i>'+
              '</button>'+
              '<button type="button" class="btn btn-info">'+
              '    <i class="fa fa-compass"></i>'+
              '</button>'+
              '<button type="button" class="btn btn-primary">'+
              '    <i class="fa fa-spinner fa-pulse fa-fw"></i>'+
              '</button>'+
              '<button type="button" class="btn btn-danger">'+
              '    <i class="fa fa-times"></i>'+
              '</button>'+
              '<button type="button" class="btn btn-success">'+
              '    <i class="fa fa-check"></i>'+
              '</button>'+
              '<button type="button" class="btn btn-warning">'+
              '    <i class="fa fa-exclamation-triangle"></i>'+
              '</button>',
    classes : 'btn-group-vertical btn-group-sm',
    style   :
    {
        margin: '10px',
        padding: '0px 0 0 0',
        cursor: 'pointer',
    },
    datas   :
    {
        'foo': 'bar',
    },
    events:
    {
        click: function(data)
        {
            console.log('wrapper div element clicked');
            console.log(data);
        },
        dblclick: function(data)
        {
            console.log('wrapper div element dblclicked');
            console.log(data);
        },
        contextmenu: function(data)
        {
            console.log('wrapper div element contextmenu');
            console.log(data);
        },
    }
})
.addTo(map);

Options

Option | Values | Default | Description :--- | :--- | :--- | :--- position | "topleft", "topright", "bottomleft", "bottomright" | "topright" | map position of element | id | String | - | wrapper div element's id | title | String | - | wrapper div element's title | classes | String | - | wrapper div element's class(es) [Seperate multiple class with space character] MDN Element.className | content | String | - | html content | style | Object | - | wrapper div element's class(es) MDN HTMLElement.style | datas | Object | - | wrapper div element's data(s) MDN HTMLElement.dataset | events | Object | - | wrapper div element's event(s) and its callbacks

License

MIT

Version History

Version | Date | Description :--- | :--- | :--- | :--- | v1.0.1 | Jan 17, 2017 | Stopped scroll propagation over control wrapper | v1.0.0 | Jan 10, 2017 | -