Event Handling

ALKMaps provides various ways of handling events on layers, features, and controls; and they all stem from the ALKMaps.Events and ALKMaps.Event classes. By default each layer comes equipped with an events property containing an instance of the ALKMaps.Events class that is attached to the layer’s div. Event Listeners can be registered to a layer on initialization or at any other time in your code.

Every layer has a default set of events triggered on it which are defined in the table below.

Supported Events

EventDescription
loadstartTriggered when layer loading starts.
loadendTriggered when layer loading ends.
visibilitychangedTriggered when layer visibility is changed.
moveTriggered when layer moves (triggered with every mousemove during a drag).
moveendTriggered when layer is done moving, object passed as argument has a zoomChanged boolean property which tells that the zoom has changed.
addedTriggered after the layer is added to a map. Listeners will receive an object with a map property referencing the map and a layer property referencing the layer.
removedTriggered after the layer is removed from the map. Listeners will receive an object with a map property referencing the map and a layer property referencing the layer.

Creating an Event Listener

Using the ALKMaps.Events class’s register function, you can add an event listener to your layer. In the following example there is a “moveend” event listener on the vector layer. If the event is triggered on the layer by either zooming or panning the map, the vector’s graphic is changed from a green truck to a red one.

Triggering Events

In addition to being able to create listeners for these events, you can also trigger your own events and attach listeners to them as well. In the following example a function that checks to see what time of day it is (morning, afternoon, night), runs once an hour. If the time of day changes, a ‘timechange’ event is triggered on the base layer with the new time of day. The listener then changes the map to an appropriate style to fit the time of day.

Set Map Style Based On Time Of Day