ALKMaps.Control

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.

Example

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);
Summary
ALKMaps.ControlControls 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.ControlCreate an ALKMaps Control.
Functions
destroyThe destroy method is used to perform any clean up before the control is dereferenced.
setMapSet the map property for the control.
drawThe draw method is called when the control is ready to be displayed on the page.
moveToSets the left and top style attributes to the passed in pixel coordinates.
activateExplicitly activates a control and it’s associated handler if one has been set.
deactivateDeactivates a control and it’s associated handler if any.
Constants
ALKMaps.Control.TYPE_BUTTON
ALKMaps.Control.TYPE_TOGGLE
ALKMaps.Control.TYPE_TOOL

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’.  The type determines the type of interactions which are possible with them when they are placed in an ALKMaps.Control.Panel.

allowSelection

{Boolean} By default, controls do not allow selection, because it may interfere with map dragging.  If this is true, ALKMaps will not prevent selection of the control.  Default is false.

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.  Default is false.

active

{Boolean} The control is active (read-only).  Use activate and deactivate to change control state.

handler

eventListeners

{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.

Constructor

ALKMaps.Control

Create an ALKMaps Control.  The options passed as a parameter directly extend the control.  For example passing the following:

var control = new ALKMaps.Control({div: myDiv});

Overrides the default div attribute value of null.

Parameters

options{Object}

Functions

destroy

destroy: function ()

The destroy method is used to perform any clean up before the control is dereferenced.  Typically this is where event listeners are removed to prevent memory leaks.

setMap

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.

Parameters

map{ALKMaps.Map}

draw

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.

Parameters

px{ALKMaps.Pixel} The top-left pixel position of the control or null.

Returns

{DOMElement} A reference to the DIV DOMElement containing the control

moveTo

moveTo: function (px)

Sets the left and top style attributes to the passed in pixel coordinates.

Parameters

px{ALKMaps.Pixel}

activate

activate: function ()

Explicitly activates a control and it’s associated handler if one has been set.  Controls can be deactivated by calling the deactivate() method.

Returns

{Boolean} True if the control was successfully activated or false if the control was already active.

deactivate

deactivate: function ()

Deactivates a control and it’s associated handler if any.  The exact effect of this depends on the control itself.

Returns

{Boolean} True if the control was effectively deactivated or false if the control was already inactive.

Constants

ALKMaps.Control.TYPE_BUTTON

ALKMaps.Control.TYPE_TOGGLE

ALKMaps.Control.TYPE_TOOL

Instances of ALKMaps.Map are interactive maps embedded in a web page.
Base class to construct a higher-level handler for event sequences.
on: function(object)
Convenience method for registering listeners with a common scope.
destroy: function ()
The destroy method is used to perform any clean up before the control is dereferenced.
setMap: function(map)
Set the map property for the control.
draw: function (px)
The draw method is called when the control is ready to be displayed on the page.
moveTo: function (px)
Sets the left and top style attributes to the passed in pixel coordinates.
activate: function ()
Explicitly activates a control and it’s associated handler if one has been set.
deactivate: function ()
Deactivates a control and it’s associated handler if any.
The Panel control is a container for other controls.
This class represents a screen coordinate, in x and y coordinates
Close