Simple button extending the class control in leaflet

<style>
	.Button {
		-moz-box-shadow:inset 0px 1px 0px 0px #f29c93;
		-webkit-box-shadow:inset 0px 1px 0px 0px #f29c93;
		box-shadow:inset 0px 1px 0px 0px #f29c93;
		background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fe1a00), color-stop(1, #ce0100) );
		background:-moz-linear-gradient( center top, #fe1a00 5%, #ce0100 100% );
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100');
		background-color:#fe1a00;
		-moz-border-radius:6px;
		-webkit-border-radius:6px;
		border-radius:6px;
		border:1px solid #d83526;
		display:inline-block;
		color:#ffffff;
		font-family:arial;
		font-size:15px;
		font-weight:bold;
		padding:6px 2px;
		text-decoration:none;
		text-shadow:1px 1px 0px #b23e35;
	}.Button:hover {
		background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ce0100), color-stop(1, #fe1a00) );
		background:-moz-linear-gradient( center top, #ce0100 5%, #fe1a00 100% );
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ce0100', endColorstr='#fe1a00');
		background-color:#ce0100;
	}.Button:active {
		position:relative;
		top:1px;
	}
	.ButtonActive {
		-moz-box-shadow:inset 0px 1px 0px 0px #caefab;
		-webkit-box-shadow:inset 0px 1px 0px 0px #caefab;
		box-shadow:inset 0px 1px 0px 0px #caefab;
		background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #77d42a), color-stop(1, #5cb811) );
		background:-moz-linear-gradient( center top, #77d42a 5%, #5cb811 100% );
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77d42a', endColorstr='#5cb811');
		background-color:#77d42a;
		-moz-border-radius:6px;
		-webkit-border-radius:6px;
		border-radius:6px;
		border:1px solid #268a16;
		display:inline-block;
		color:#306108;
		font-family:arial;
		font-size:15px;
		font-weight:bold;
		padding:6px 2px;
		text-decoration:none;
		text-shadow:1px 1px 0px #aade7c;
	}.ButtonActive:hover {
		background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #5cb811), color-stop(1, #77d42a) );
		background:-moz-linear-gradient( center top, #5cb811 5%, #77d42a 100% );
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5cb811', endColorstr='#77d42a');
		background-color:#5cb811;
	}.ButtonActive:active {
		position:relative;
		top:1px;
	}
</style>
</pre>
<pre>	
var Button = L.Control.extend({
	initialize: function (foo, options) {
		L.Util.setOptions(this, options);
		this.active = false; 
		this.value = foo;
	},
   
	onAdd: function (map) {
		var self = this;
		controlDiv = L.DomUtil.create('div', 'hello-world-button');
		L.DomEvent.disableClickPropagation(controlDiv);
                L.DomEvent
			.addListener(controlDiv, 'click', L.DomEvent.stopPropagation)
			.addListener(controlDiv, 'click', L.DomEvent.preventDefault)
			.addListener(controlDiv, 'click',  function() {
				if( this.active ){
					this.active = false;
					controlText.className = "Button";
					}
				else{
					this.active = true;
					controlText.className = "ButtonActive";
					}
			});

		// Set CSS for the control border
		var controlUI = L.DomUtil.create('div', 'border', controlDiv);
		controlUI.title = '';

		// Set CSS for the control interior
		var controlText = L.DomUtil.create('div', 'Button', controlUI);
		controlText.innerHTML = this.value;
		
		return controlDiv;
	},
	setGps:function (){ 
		map.stopLocate();
		if (locateState === false) {
			setTimeout(function () {
				locateState = true;
				map.locate({
					setView: true,
					maxZoom: 17,
					maximumAge: 3000,
					enableHighAccuracy: true,
					watch: true
				});
			}, 1000);
		} else {
			setTimeout(function () {
				locateState = false;
				gpsLocation.clearLayers();
			}, 1000);
		}
	}//Fin setGps
	
});
gpsBotton = new Button('Wuola', {position: 'topright'});
Tagged with: ,
Posted in Programación