/**
* @classdesc
*
* Marker label. You can personalize the color, text type, position, etc...
*
* @constructor
* @param {cercaliax.LabelOptions} options Label options
*/
cercalia.Label = function(options) {
/**
* @type {string}
* @private
*/
this.id_ = 'CercaliaLabel_id_' + Date.now() + (Math.random()*0xffffffff|0);
/**
* @type {string}
* @private
*/
this.text_ = options.text? options.text : '';
/**
* @type {string}
* @private
*/
this.color_ = options.color? options.color : '';
/**
* @type {string}
* @private
*/
this.background_ = options.background ? options.background : '';
/**
* @type {boolean}
* @private
*/
this.fontWeight_ = options.fontWeight ? options.fontWeight : false;
/**
* @type {boolean}
* @private
*/
this.lightLabel_ = options.lightLabel ? options.lightLabel : false;
/**
* @type {boolean}
* @private
*/
this.show_ = options.show || options.show==null? true: false;
/**
* @type {number}
* @private
*/
this.offsetX_ = options.offsetX||options.offsetX==0 ? options.offsetX : null;
/**
* @type {number}
* @private
*/
this.offsetY_ = options.offsetY||options.offsetY==0 ? options.offsetY : null;
/**
* @type {string}
* @private
*/
this.icon_ = options.icon ? options.icon : null;
/**
* @type {number}
* @private
*/
this.iconWidth_ = options.iconWidth||options.iconWidth==0 ? options.iconWidth : 15;
/**
* @type {number}
* @private
*/
this.iconHeight_ = options.iconHeight||options.iconHeight==0 ? options.iconHeight : 15;
/**
* @type {cercalia.Marker}
* @private
*/
this.marker_ = null;
/**
* @type {ol.Overlay}
* @private
*/
this.overlay_ = null;
/**
* @private
* @type {Element}
*/
this.element_ = null;
/**
* Class name
* @private
* @type {string}
*/
this.CLASS_NAME_ = "cercalia.Label";
this.initializeLabel_();
};
/**
* initializes the HTML label fragment. Also modify the styles depending on the label options
* @private
*/
cercalia.Label.prototype.initializeLabel_ = function(){
var htmlElement;
var divWrapStyle = (this.show_?'display:table;':'display:none;')
+(this.offsetX_||this.offsetX_==0?'right:'+(-this.offsetX_)+'px;':'')
+(this.offsetY_||this.offsetY_==0?'bottom:'+this.offsetY_+'px;':'')
var strStyle = (this.color_?'color:'+this.color_+';':'')
+(this.background_?'background:'+this.background_+';':'')
+(this.fontWeight_?'font-weight:bold':'');
var classLabel = this.lightLabel_?'cercalia-lightlabel':'cercalia-label';
var htmlIcon = '';
if(this.icon_){
var htmlIcon = this.createImg_();
}
htmlElement = cercalia.jQuery('<div id="div_wrap_label_'+this.id_+'" class="'+classLabel+'" style="' + divWrapStyle + '" > '
+ htmlIcon
+ ' <div id="'+this.id_+'" class="cercalia-text-label" style="'+strStyle+'">'+this.text_+'</div>'
+ ' </div>');
this.overlay_ = new ol.Overlay({
element: htmlElement
});
this.element_ = this.overlay_.getElement();
};
/**
* Change label text
* @param {string} text
*/
cercalia.Label.prototype.setText = function(text){
document.getElementById(this.id_).innerHTML = text;
};
/**
* @return {string} Label text
*/
cercalia.Label.prototype.getText = function(){
return this.text_;
};
/**
* @return {string} src image icon
*/
cercalia.Label.prototype.getIcon = function(){
return this.icon_;
};
/**
* @param {string} src image icon
*/
cercalia.Label.prototype.setIcon = function(icon){
this.icon_ = icon;
if(icon == null){return this.removeIcon();}
var img = document.getElementById("icon_label_" + this.id_);
if(img == null){
var wrap = cercalia.jQuery("#div_wrap_label_" + this.id_);
if(wrap){
var htmlIcon = this.createImg_();
wrap.prepend(htmlIcon);
}
}else{
img.src = this.icon_;
}
};
/**
* remove Icon if exist
*/
cercalia.Label.prototype.removeIcon = function(){
var img = cercalia.jQuery("icon_label_" + this.id_);
if(img != null){
img.remove();
}
//posem defould value
this.setIconHeight(15);
this.setIconWidth(15);
};
/**
* @return {number} get height icon, defould 15
*/
cercalia.Label.prototype.getIconHeight = function(){
return this.iconHeight_;
}
/**
* @return {number} get width icon, defould 15
*/
cercalia.Label.prototype.getIconWidth = function(){
return this.iconWidth_;
}
/**
* @param {number} height
*/
cercalia.Label.prototype.setIconHeight = function(height){
height = height == null ? 0 : height;
this.iconHeight_ = height;
var img = document.getElementById("icon_label_" + this.id_);
if(img != null){
img.height = this.iconHeight_;
}
}
/**
* @param {number} width
*/
cercalia.Label.prototype.setIconWidth = function(width){
width = width == null ? 0 : width;
this.iconWidth_ = width;
var img = document.getElementById("icon_label_" + this.id_);
if(img != null){
img.width = this.iconWidth_;
}
}
/**
* Show the label
*/
cercalia.Label.prototype.show = function(){
this.show_ = true;
if(this.element_) {
this.element_.css('display','table');
}
};
/**
* Hide the label
*/
cercalia.Label.prototype.hide = function(){
this.show_ = false;
if(this.element_) {
this.element_.css('display','none');
}
};
/**
* @return {boolean} if popup is opened or not. Values: `true` or `false`.
*/
cercalia.Label.prototype.isOpen = function(){
return this.show_;
};
/**
* @param {cercalia.Marker} marker
*/
cercalia.Label.prototype.setMarker = function(marker){
this.marker_ = marker;
var position = this.marker_.getPosition();
var projectionCode = marker.getMap() ? marker.getMap().getProjectionCode() : 'EPSG:3857';
this.overlay_.setPosition(ol.proj.transform([position.getLon(), position.getLat()], 'EPSG:4326', projectionCode));
};
/**
* Change label position.
* @param {cercalia.LonLat} position
* @param {string} projectionCode
*/
cercalia.Label.prototype.setPosition = function (position, projectionCode) {
this.overlay_.setPosition(ol.proj.transform([position.getLon(), position.getLat()], 'EPSG:4326', projectionCode?projectionCode:'EPSG:3857'));
};
/**
* @return {ol.Overlay} OpenLayers3 <a href="http://openlayers.org/en/v3.0.0/apidoc/ol.Overlay.html">`ol.Overlay`</a> Objet.
*/
cercalia.Label.prototype.getOverlay = function(){
return this.overlay_;
};
/**
* Remove the label.
*/
cercalia.Label.prototype.destroy = function(){
this.overlay_.getElement()[0].parentNode.removeChild(this.overlay_.getElement()[0]);
this.removeIcon();
for (var key in this) {
delete this[key];
}
};
/**
* @return {string} ClassName.
*/
cercalia.Label.prototype.getClass = function(){
return this.CLASS_NAME_;
};
/**
* @private
* @returns {String}
*/
cercalia.Label.prototype.createImg_ = function(){
return '<img id="icon_label_'+this.id_+'" class="cercalia-img-label" src="' + this.icon_ + '" height="' + this.iconHeight_ + '" width="' + this.iconWidth_ + '">';
}