Controls affect the display or behavior of the map. They allow everything from panning and zooming to displaying a scale indicator. Controls by default are added to the map they are contained within however it is possible to add a control to an external div by passing the div in the options parameter.
The following example shows how to add many of the common controls to a map.
var map = new ALKMaps.Map('map', { controls: [] }); map.addControl(new ALKMaps.Control.PanZoomBar()); map.addControl(new ALKMaps.Control.LayerSwitcher({'ascending':false})); map.addControl(new ALKMaps.Control.Permalink()); map.addControl(new ALKMaps.Control.Permalink('permalink')); map.addControl(new ALKMaps.Control.MousePosition()); map.addControl(new ALKMaps.Control.OverviewMap()); map.addControl(new ALKMaps.Control.KeyboardDefaults());
The next code fragment is a quick example of how to intercept shift-mouse click to display the extent of the bounding box dragged out by the user. Usually controls are not created in exactly this manner. See the source for a more complete example:
var control = new ALKMaps.Control(); ALKMaps.Util.extend(control, { draw: function () { // this Handler.Box will intercept the shift-mousedown // before Control.MouseDefault gets to see it this.box = new ALKMaps.Handler.Box( control, {"done": this.notice}, {keyMask: ALKMaps.Handler.MOD_SHIFT}); this.box.activate(); }, notice: function (bounds) { ALKMaps.Console.userError(bounds); } }); map.addControl(control);
ALKMaps. | Controls affect the display or behavior of the map. |
Properties | |
id | {String} |
map | {ALKMaps.Map} this gets set in the addControl() function in ALKMaps.Map |
div | {DOMElement} The element that contains the control, if not present the control is placed inside the map. |
type | {Number} Controls can have a ‘type’. |
allowSelection | {Boolean} By default, controls do not allow selection, because it may interfere with map dragging. |
displayClass | {string} This property is used for CSS related to the drawing of the Control. |
title | {string} This property is used for showing a tooltip over the Control. |
autoActivate | {Boolean} Activate the control when it is added to a map. |
active | {Boolean} The control is active (read-only). |
handler | {ALKMaps.Handler} null |
eventListeners | {Object} If set as an option at construction, the eventListeners object will be registered with ALKMaps.Events.on. |
Constructor | |
ALKMaps. | Create an ALKMaps Control. |
Functions | |
destroy | The destroy method is used to perform any clean up before the control is dereferenced. |
setMap | Set the map property for the control. |
draw | The draw method is called when the control is ready to be displayed on the page. |
moveTo | Sets the left and top style attributes to the passed in pixel coordinates. |
activate | Explicitly activates a control and it’s associated handler if one has been set. |
deactivate | Deactivates a control and it’s associated handler if any. |
Constants | |
ALKMaps. | |
ALKMaps. | |
ALKMaps. |
{ALKMaps.Map} this gets set in the addControl() function in ALKMaps.Map
{Number} Controls can have a ‘type’. The type determines the type of interactions which are possible with them when they are placed in an ALKMaps.Control.Panel.
{Boolean} The control is active (read-only). Use activate and deactivate to change control state.
{ALKMaps.Handler} null
{Object} If set as an option at construction, the eventListeners object will be registered with ALKMaps.Events.on. Object structure must be a listeners object as shown in the example for the events.on method.
setMap: function( map )
Set the map property for the control. This is done through an accessor so that subclasses can override this and take special action once they have their map variable set.
map | {ALKMaps.Map} |
draw: function ( px )
The draw method is called when the control is ready to be displayed on the page. If a div has not been created one is created. Controls with a visual component will almost always want to override this method to customize the look of control.
px | {ALKMaps.Pixel} The top-left pixel position of the control or null. |
{DOMElement} A reference to the DIV DOMElement containing the control
moveTo: function ( px )
Sets the left and top style attributes to the passed in pixel coordinates.
px | {ALKMaps.Pixel} |
Convenience method for registering listeners with a common scope.
on: function( object )
The destroy method is used to perform any clean up before the control is dereferenced.
destroy: function ()
Set the map property for the control.
setMap: function( map )
The draw method is called when the control is ready to be displayed on the page.
draw: function ( px )
Sets the left and top style attributes to the passed in pixel coordinates.
moveTo: function ( px )
Explicitly activates a control and it’s associated handler if one has been set.
activate: function ()
Deactivates a control and it’s associated handler if any.
deactivate: function ()