JSFiddle - React, Tailwind, and code Playground

by Leo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<div id="map" style="width: 800px; height: 600px;"></div>

CSS

.leaflet-control-measure {
	font-size: 16px;
	font-weight: bold;
	line-height: 21px;
}

.leaflet-bar-part-top-and-bottom {
	-webkit-border-radius: 4px 4px 4px 4px;
	        border-radius: 4px 4px 4px 4px;
	border-bottom: none;
	}

.leaflet-touch .leaflet-bar-part-top-and-bottom {
	-webkit-border-radius: 7px 7px 7px 7px;
	        border-radius: 7px 7px 7px 7px;
	border-bottom: none;
	}

.leaflet-control-measure-on .leaflet-control-measure {
	box-shadow: 0 0 8px rgba(10,10,10,1.0);
	}

.leaflet-measure-tooltip {
	font: 9px/1.25 "Helvetica Neue", Arial, Helvetica, sans-serif;
	background-color: rgba(255, 255, 255, 0.7);
	box-shadow: 0 0 5px #BBB;
	margin: 0;
	padding: 2px;
	width: auto !important;
	height: auto !important;
	white-space: nowrap;
	}

.leaflet-measure-tooltip-total {
	font-weight: bold;
	}

.leaflet-measure-tooltip-difference {
	color: #777;
	}

JavaScript

L.Control.Measure = L.Control.extend({
	options: {
		position: 'topright'
	},

	onAdd: function (map) {
        //leaflet-control-zoom leaflet-bar 
		var className = 'leaflet-bar leaflet-control',
		    container = L.DomUtil.create('div', className);

		this._createButton('&#8674;', 'Measure', 'leaflet-control-measure leaflet-bar-part leaflet-bar-part-top-and-bottom', container, this._toggleMeasure, this);

		return 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;

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

		return link;
	},

	_toggleMeasure: function () {
		this._measuring = !this._measuring;

		if(this._measuring) {
			L.DomUtil.addClass(this._container, 'leaflet-control-measure-on');
			this._startMeasuring();
		} else {
			L.DomUtil.removeClass(this._container, 'leaflet-control-measure-on');
			this._stopMeasuring();
		}
	},

	_startMeasuring: function() {
		this._oldCursor = this._map._container.style.cursor;
		this._map._container.style.cursor = 'crosshair';

		this._doubleClickZoom = this._map.doubleClickZoom.enabled();
		this._map.doubleClickZoom.disable();

		L.DomEvent
			.on(this._map, 'mousemove', this._mouseMove, this)
			.on(this._map, 'click', this._mouseClick, this)
			.on(this._map, 'dblclick', this._finishPath, this)
			.on(document, 'keydown', this._onKeyDown, this);

		if(!this._layerPaint) {
			this._layerPaint = L.layerGroup().addTo(this._map);	
		}

		if(!this._points) {
			this._points = [];
		}
	},

	_stopMeasuring: function() {
		this._map._container.style.cursor = this._oldCursor;

		L.DomEvent
			.off(document, 'keydown', this._onKeyDown, this)
			.off(this._map, 'mousemove', this._mouseMove,...