MAPSTRACTION

What Are Events?

Most of the Mapstraction API deals with synchronous calls to the API; your code asks the map to do something and then waits until that something has been completed. But Mapstraction also supports asynchronous events, which can be used to listen for when your users interact with the map.

Listening For Events

Each of Mapstraction’s events allows you to add a handler function that is invoked when the event fires; the general format of an event handler, in this case for the click event, is shown in the code sample below.

map.click.addHandler(function(eventName, eventSource, eventArgs) {
	// Add your event handling code here ...
});

The values passed to your event handler in the eventArgs argument vary according to the specific event, but the eventName and eventSource arguments should always contain the same values:

• eventName – the name of the event that is being fired.
• eventSource – the map object for which the event is being fired, in other words an instance of the mxn.Mapstraction object.

Mapstraction Events

The Load Event

The load event is fired when the map has loaded. The event handler’s eventArgs argument is empty for this event.

map.load.addHandler(function(eventName, eventSource, eventArgs) {
	// map loaded
});

The Click Event

The click event is fired when the map is clicked. The event handler’s eventArgs argument will contain an object with a location property whose value is a mxn.LatLonPoint containing the coordinates at which the click occurred.

map.click.addHandler(function(eventName, eventSource, eventArgs) {
	var coords = eventArgs.location;	// coords are an mxn.LatLonPoint object
});

The End Pan Event

The endPan event is fired when the map has finished moving, either as a result of a user dragging the map or the map’s centre or bounds being changed. The event handler’s eventArgs argument is empty for this event.

map.endPan.addHandler(function(eventName, eventSource, eventArgs) {
	// map panning complete
});

The Change Zoom Event

The changeZoom event is fired when the map’s zoom level is changed. The event handler’s eventArgs argument is empty for this event.

map.changeZoom.addHandler(function(eventName, eventSource, eventArgs) {
	// map panning complete
});

The Marker Added Event

The markerAdded event is fired when a mxn.Marker marker is added to the map. The event handler’s eventArgs argument will contain an object with a marker property whose value is the mxn.Marker object which has been added.

map.markerAdded.addHandler(function(eventName, eventSource, eventArgs) {
	var marker = eventArgs.marker	// marker is an mxn.Marker object
});

The Marker Removed Event

The markerRemoved event is fired when a mxn.Marker marker is removed from the map. The event handler’s eventArgs argument will contain an object with a marker property whose value is the mxn.Marker object which has been removed.

map.markerRemoved.addHandler(function(eventName, eventSource, eventArgs) {
	var marker = eventArgs.marker	// marker is an mxn.Marker object
});

The Polyline Added Event

The polylineAdded event is fired when a mxn.Polyline polyline is added to the map. The event handler’s eventArgs argument will contain an object with a polyline property whose value is the mxn.Polyline object which has been added.

map.polylineAdded.addHandler(function(eventName, eventSource, eventArgs) {
	var marker = eventArgs.marker	// marker is an mxn.Polyline object
});

The Polyline Removed Event

The polylineRemoved event is fired when a mxn.Polyline polyline is removed from the map. The event handler’s eventArgs argument will contain an object with a polyline property whose value is the mxn.Polyline object which has been removed.

map.polylineRemoved.addHandler(function(eventName, eventSource, eventArgs) {
	var marker = eventArgs.marker	// marker is an mxn.Polyline object
});