JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.js?2"></script>
<div id="map"></div>
CSS
html, body {
padding:0;
margin:0;
height:100%;
width:100%;
overflow:hidden;
// don't allow scrollbars that would throw off the layout
}
#map {
height:100%;
}
JavaScript
L.Control.EasyButtons = L.Control.extend({
options: {
position: 'topleft',
title: '',
intentedIcon: 'fa-circle-o'
},
onAdd: function () {
var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control');
this.link = L.DomUtil.create('a', 'leaflet-bar-part', container);
L.DomUtil.create('i', 'fa fa-lg ' + this.options.intentedIcon, this.link);
this.link.href = '#';
L.DomEvent.on(this.link, 'click', this._click, this);
this.link.title = this.options.title
return container;
},
intendedFunction: function () {
alert('no function selected')
},
_click: function (e) {
L.DomEvent.stopPropagation(e);
L.DomEvent.preventDefault(e);
this.intendedFunction();
},
});
L.easyButton = {}
L.easyButton = function (btnIcon, btnFunction, btnTitle, btnMap) {
var newControl = new L.Control.EasyButtons
if (btnIcon) newControl.options.intentedIcon = btnIcon
if (typeof btnFunction === 'function') {
newControl.intendedFunction = btnFunction
}
if (btnTitle) newControl.options.title = btnTitle
if (btnMap) {
newControl.addTo(btnMap)
} else {
newControl.addTo(map)
}
}
var createMap = function () {
var map = L.map('map').setView([35.302, -85.381], 6);
var terrain = L.tileLayer('http://{s}.tile.stamen.com/terrain/{z}/{x}/{y}.png', {
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> — Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
subdomains: 'abcd',
minZoom: 4,
maxZoom: 18
}).addTo(map);
var basemaps = {
'Terrain': terrain
};
L.easyButton('fa-question',
function () {
alert('I have a Question!')
...