openlayers
Version:
Build tools and sources for developing OpenLayers based mapping applications
142 lines (122 loc) • 3.71 kB
JavaScript
goog.provide('ol.control.Control');
goog.require('ol.events');
goog.require('ol');
goog.require('ol.MapEvent');
goog.require('ol.Object');
goog.require('ol.dom');
/**
* @classdesc
* A control is a visible widget with a DOM element in a fixed position on the
* screen. They can involve user input (buttons), or be informational only;
* the position is determined using CSS. By default these are placed in the
* container with CSS class name `ol-overlaycontainer-stopevent`, but can use
* any outside DOM element.
*
* This is the base class for controls. You can use it for simple custom
* controls by creating the element with listeners, creating an instance:
* ```js
* var myControl = new ol.control.Control({element: myElement});
* ```
* and then adding this to the map.
*
* The main advantage of having this as a control rather than a simple separate
* DOM element is that preventing propagation is handled for you. Controls
* will also be `ol.Object`s in a `ol.Collection`, so you can use their
* methods.
*
* You can also extend this base for your own control class. See
* examples/custom-controls for an example of how to do this.
*
* @constructor
* @extends {ol.Object}
* @implements {oli.control.Control}
* @param {olx.control.ControlOptions} options Control options.
* @api stable
*/
ol.control.Control = function(options) {
ol.Object.call(this);
/**
* @protected
* @type {Element}
*/
this.element = options.element ? options.element : null;
/**
* @private
* @type {Element}
*/
this.target_ = null;
/**
* @private
* @type {ol.Map}
*/
this.map_ = null;
/**
* @protected
* @type {!Array.<ol.EventsKey>}
*/
this.listenerKeys = [];
/**
* @type {function(ol.MapEvent)}
*/
this.render = options.render ? options.render : ol.nullFunction;
if (options.target) {
this.setTarget(options.target);
}
};
ol.inherits(ol.control.Control, ol.Object);
/**
* @inheritDoc
*/
ol.control.Control.prototype.disposeInternal = function() {
ol.dom.removeNode(this.element);
ol.Object.prototype.disposeInternal.call(this);
};
/**
* Get the map associated with this control.
* @return {ol.Map} Map.
* @api stable
*/
ol.control.Control.prototype.getMap = function() {
return this.map_;
};
/**
* Remove the control from its current map and attach it to the new map.
* Subclasses may set up event handlers to get notified about changes to
* the map here.
* @param {ol.Map} map Map.
* @api stable
*/
ol.control.Control.prototype.setMap = function(map) {
if (this.map_) {
ol.dom.removeNode(this.element);
}
for (var i = 0, ii = this.listenerKeys.length; i < ii; ++i) {
ol.events.unlistenByKey(this.listenerKeys[i]);
}
this.listenerKeys.length = 0;
this.map_ = map;
if (this.map_) {
var target = this.target_ ?
this.target_ : map.getOverlayContainerStopEvent();
target.appendChild(this.element);
if (this.render !== ol.nullFunction) {
this.listenerKeys.push(ol.events.listen(map,
ol.MapEvent.Type.POSTRENDER, this.render, this));
}
map.render();
}
};
/**
* This function is used to set a target element for the control. It has no
* effect if it is called after the control has been added to the map (i.e.
* after `setMap` is called on the control). If no `target` is set in the
* options passed to the control constructor and if `setTarget` is not called
* then the control is added to the map's overlay container.
* @param {Element|string} target Target.
* @api
*/
ol.control.Control.prototype.setTarget = function(target) {
this.target_ = typeof target === 'string' ?
document.getElementById(target) :
target;
};