Developer Guide

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
Event	Description
loadstart	Triggered when layer loading starts.
loadend	Triggered when layer loading ends.
visibilitychanged	Triggered when layer visibility is changed.
move	Triggered when layer moves (triggered with every mousemove during a drag).
moveend	Triggered when layer is done moving, object passed as argument has a zoomChanged boolean property which tells that the zoom has changed.
added	Triggered 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.
removed	Triggered 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.

var map = new ALKMaps.Map("map");
var layer = new ALKMaps.Layer.BaseMap( "ALK Maps", {style:ALKMaps.STYLE.LIGHTNESS}, {});
var vectors = new ALKMaps.Layer.Vector("Vectors");
map.addLayers([layer,vectors]);
var c = new ALKMaps.LonLat(-96, 38).transform(new ALKMaps.Projection("EPSG:4326"), map.getProjectionObject());
map.setCenter(c, 4);
                    
var pointFeature = new ALKMaps.Feature.Vector(new ALKMaps.Geometry.Point(c.lon,c.lat), null, 
	{
		externalGraphic: ALKMaps.IMAGE.TRUCK_GREEN,
		graphicHeight: 30, 
		graphicWidth: 30
	}
);
vectors.addFeatures([pointFeature]);
var element = document.getElementById(pointFeature.geometry.id);                
vectors.events.register("moveend",this,function(event){
    pointFeature.style.externalGraphic = ALKMaps.IMAGE.TRUCK_RED;
    vectors.redraw();                
});

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

var map = new ALKMaps.Map("map");
var layer = new ALKMaps.Layer.BaseMap( "ALK Maps", {style:ALKMaps.STYLE.CONTEMPORARY}, {});
map.addLayers([layer]);
var c = new ALKMaps.LonLat(-96, 38).transform(new ALKMaps.Projection("EPSG:4326"), map.getProjectionObject());
map.setCenter(c, 4);
var currentTOD = "morning";
checkTime = function(){
    //periodically check time of day based on current hour
    var hours = new Date().getHours();
    var timeOfDay = "night"; //if later than 5pm, it's night
    if(hours < 12){ //if earlier than 12pm, it's morning
        timeOfDay = "morning";
    }else if(hours < 17){ //if later than 12pm but before 5pm, it's afternoon
        timeOfDay = "afternoon"            
    }
    //if time of day differs from last check, trigger "timechange" event                           
    if(currentTOD !== timeOfDay){
        currentTOD = timeOfDay;
        layer.events.triggerEvent("timechange", {timeOfDay: timeOfDay});
    }
    setTimeout("checkTime()",600000); 
};
layer.events.register("timechange",this,function(evt){
    //on "timechange" switch to coressponding style.
    switch(evt.timeOfDay){
        case "morning":
             style = ALKMaps.STYLE.CONTEMPORARY; 
             break;
        case "afternoon":
            style = ALKMaps.STYLE.LIGHTNESS;
            break;
        case "night":
            style = ALKMaps.STYLE.NIGHT;
            break;                                                                                                                                                                                                                                      
    }
    layer.changeStyle(style);                             
});
checkTime();

Developer Guide

Leaflet Guide

OpenLayers Guide

Event Handling

Creating an Event Listener

Triggering Events

Set Map Style Based On Time Of Day