Source: temp/jsdocinputdirs/cercalia.control.gasstations.js

/**
 * @classdesc
 * This control let you show gas stations into map. 
 * Popup contains fuel prices in Spain.
 * 
 * 
 * @constructor
 * @extends {ol.control.Control}
 */
cercalia.Control.GasStations = function(){
	
	/**
	 * @private
	 * @type {string}
	 */
	this.name_ = cercalia.MapControls.GasStations;
	
	/**
	 * Class name
	 * @private
	 * @type {string}
	 */
	this.CLASS_NAME_ = "cercalia.Control.GasStations";
	
	/**
	 * @private
	 * @type {cercalia.TilePoiMap}
	 */
	this.tilePoiMap_ = null;
	 
	/**
	 * Button
	 * @private
	 * @type {HTMLElement}
	 */
	this.element_ = null;
	
	this.element_ = document.createElement('div');
	//this.element_.href = '#CercaliaControlCleanControl';
	this.element_.className = "cercalia-big-icon cercalia-control cercalia-control-gasStationsControl";

	cercalia.jQuery(this.element_).button({
		icons: {
			primary:"cercalia-big-icon cercalia-big-icon-gas",
			secondary: "" 
		}, 
		text: false 
	}).attr("title", cercalia.i18n._("TOOLTIP_GASSTATIONS"));
	
	cercalia.jQuery(this.element_).addClass("cercalia-tool-button");
	
	var self = this;
	
	this.element_.addEventListener('click', function(e) {
		self.getMap().cercalia.deactivateControls();
		self.tilePoiMap_ == null ?  self.enable() : self.disable();
		e.preventDefault();
	}, false);
	
};
ol.inherits(cercalia.Control.GasStations, ol.control.Control);



/**
 * Create the button in the tools topbar
 * @param {string} idTopBar Div element ID where the control will be embedded
 */
cercalia.Control.GasStations.prototype.setTopBar = function (idTopBar) {
	var self = this;
	ol.control.Control.call(this, {
		element: self.element_,
		target: document.getElementById(idTopBar)
	});
};

/**
 * Enable gas station markers
 */
cercalia.Control.GasStations.prototype.enable = function() {
	
	var categoriesList = ["D00GAS"];
	var cercaliaMap = this.getMap().getCercalia();
	
	this.tilePoiMap_ = new cercalia.TilePoiMap({
		map : cercaliaMap,
		tileSize: [256, 256],
		iconBigZoomLevel: 15,
		createMarkersFunction: this.createMarkersFunction_
	});
	
	this.tilePoiMap_.setCategories(categoriesList);
};

/**
 * Disable gas station markers
 */
cercalia.Control.GasStations.prototype.disable = function() {
	this.tilePoiMap_.setCategories(null);
	this.tilePoiMap_.remove();
	this.tilePoiMap_ = null;
};


/**
 * Create a list of markers to paint from server json, a BBOX and zoom level.
 * @private
 * @param {Object} json Json downloaded from server. 
 * @param {cercalia.Bounds} bounds BBOX (bounds). 
 * @param {number} zoomLevel Zoom level. 
 */
cercalia.Control.GasStations.prototype.createMarkersFunction_ = function(json, bounds, zoomLevel) {

	var listMarkers = [];
	var self = this;
	
	/**
	 * @param {string} name
	 * @param {string} info
	 * @param {string|null} municipalityId
	 * @return {cercalia.Popup}
	 */
	var createPopup = function(name, info, municipalityId) {
		var arrInfo = info.split("|");
		var content;
		if( municipalityId && municipalityId.substring(0,3) == "ESP" ) {		
			var direccion = arrInfo[1];
			var localidad = arrInfo[2];
			var municipio = arrInfo[3];
			var horari = arrInfo[6];
			var provincia = arrInfo[4];
			var preu95 = arrInfo[8];
			var preu98 = arrInfo[13];
			var preuDiesel = arrInfo[9];
			var preuBiodiesel = arrInfo[11];
			content = 
				'<div class="gas-station-popup">' +
					'<div class="address">' + direccion + ', ' + localidad + ', ' + provincia + '</div>' +
					'<div class="prices">' +
						(horari ? '<div><span class="icon schedule"/><span class="text"><b>' + horari + '</b></span><br/></div>' : '') + 
						(preu95 ? '<div><span class="icon gas95"/><span class="text">' + preu95 +'€' + '</span><br/></div>' : '') +
						(preu98 ? '<div><span class="icon gas98"/><span class="text">' + preu98 +'€' + '</span><br/></div>' : '') +
						(preuDiesel ? '<div><span class="icon diesel"/><span class="text">' + preuDiesel +'€' + '</span><br/></div>' : '') +
						(preuBiodiesel ? '<div><span class="icon biodisel"/><span class="text">' + preuBiodiesel +'€' + '</span><br/></div>' : '') + 
					'</div>' +
					'<div class="font"><span>' + cercalia.i18n._("Font") + ': Ministerio de Industria, Energía y Turismo</span></div>' +
				'</div>';
				
		} else {
			var direccion = arrInfo[1];
			var localidad = arrInfo[2];
			var telefon = arrInfo[3];
			content = 
				'<div>' +
					'<div class="address">' + (direccion ? direccion + ', ' : '') + (localidad ? localidad : cercalia.i18n._("Gas station")) + '</div>' +
					'<div><span>' + telefon + '</span></div>' +
				'</div>';
			
		}
		
		var popup = new cercalia.Popup({
			title: name,
			content: content,
			maxWidth: 300
		});

		return popup;
	};

	json.forEach(function(elem, index) {
		var markerLonLat = new cercalia.LonLat(elem.coord.x, elem.coord.y);
		if(bounds.containsLonLat(markerLonLat)) {
			
			var img = cercaliaGlobals.img + '/gasstations/' + elem.subcategory_id + '.png';
			var municipalityId = elem.ge && elem.ge.municipality ? elem.ge.municipality.id : null;
			var marker = new cercalia.Marker({
				id: elem.id ? elem.id : null,
				position : markerLonLat,
				icon : new cercalia.Icon({src:img}),
				popup : createPopup(elem.name.value, elem.info.value, municipalityId),
				onClick: function() {
					if( ! this.getPopup().isOpen() ){
						this.getPopup().show();
					} else {
						this.getPopup().hide();
					} 
				}
			});
			
			listMarkers.push(marker);
		}
		
	});
	return listMarkers;
};