Leaflet custom button

by winsent

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script>
<div id="map"></div>

CSS

#map {
    height: 400px;
}
.leaflet-control-button {
    box-shadow: 0 1px 7px rgba(0, 0, 0, 0.4);
    background: #f8f8f9;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    cursor: auto;
}
.leaflet-control-button-link {
    width: 36px;
    height: 36px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    display: block;
    background-image: url(http://cdn3.iconfinder.com/data/icons/wine-and-vineyard-icons/512/Corkscrew-32.png);
}

JavaScript

<!-- init map --!>
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', {
    maxZoom: 18
}).addTo(map);


<!-- Init control --!>
L.Control.Button = L.Control.extend({
    options: {
        position: 'topleft'
    },
    initialize: function (options) {
        L.setOptions(this, options);
    },

    onAdd: function (map) {
        var container = this._container = L.DomUtil.create('div', 'leaflet-control-button');
        this._createButton('', 'Simple button', 'leaflet-control-button-link', container, this._click, this);
        return this._container;
    },

    _createButton: function (html, title, className, container, fn, context) {
        var link = L.DomUtil.create('a', className, container);
        link.innerHTML = html;
        link.href = '#';
        link.title = title;

        var stop = L.DomEvent.stopPropagation;

        L.DomEvent.on(link, 'click', stop)
            .on(link, 'mousedown', stop)
            .on(link, 'dblclick', stop)
            .on(link, 'click', L.DomEvent.preventDefault)
            .on(link, 'click', fn, context);

        return link;
    },

    _click: function () {
        alert(this.options.position + ' botton');
    },
});

L.control.Button = function (options) {
    return new L.Control.Button(options);
};

L.control.Button().addTo(map);