Multimap API v1.1 : Keyboard Panning Example

Although the ability to drag maps with a mouse is a core feature of the Multimap API, many users prefer to use their keyboards. Some users may not be able to operate a mouse sufficiently to operate the viewer, so the keyboard may be their only option.

Please note that, when accessing the keyboard via JavaScript, browsers often continue to perform their default actions such as scrolling the page. Because of these problems, special consideration is required if you wish to allow keyboard panning. Keyboard panning is disabled by default in the Multimap API. A simple method, setKeyboardPanning(), is provided which allows you to enable or disable it; another method, getKeyboardPanning(), allows you to check the current status.

Important Note: Because this page has to retain the style of the documentation, you will most likely find that using the up and down cursor keys scrolls the page as well as panning the map. In a real application the page would be designed in such a way as to omit the browser scroll bar altogether.

Keyboard panning is disabled when the user's focus is on any of the following HTML elements: INPUT (when type is set to "text"); SELECT; or TEXTAREA. You can also disable keyboard panning within certain HTML elements yourself by passing a reference to the element to the assignIgnoreEvents() method - please note that support for this is variable between browsers with Internet Explorer giving the best support.

What You Should See

If you view this in your browser you should see a Multimap draggable map centered on Fleet Street, London, Great Britain, at zoom factor 15.

A checkbox is offered to the right of the map. Checking the checkbox enables keyboard panning. Clearing the checkbox disables it again.

A text area is offered to demonstrate that cursor keys are ignored by the map viewer when the user is editing text.

A DIV element with scroll bars is also displayed; scrolling using the keyboard within this DIV affects the map in most browsers.

The Map

The Code

There are three parts to the code below. The first is the line that links to the Multimap API. The second is an example of the HTML you must have in your page. The third is an example of the JavaScript required to implement the page.

The header code

The body code


<!-- The Multimap Map-->
<div id="mapviewer" style="width : 500px; height : 420px;"></div>

<!-- The Map Controls -->
<form action="#" onsubmit="return false" method="get">
  <input type="checkbox" value="1" onclick="mapviewer.setKeyboardPanning( this.checked )" id="keyboardpanning"> Keyboard Panning
  <br/>Demo Text Area:
  <textarea cols="30" rows="6">Use the keyboard to 
    navigate the text within this textarea and note that, even when
    keyboard panning is turned on, the map is not affected.</textarea>
</form>
<div style="width : 100px; height : 100px; overflow:auto;" id="scrolldiv">
  This is a DIV with a lot of text in it, try using the keyboard to
  scroll it and see if the map viewer moves. Even when keyboard panning
  is turned on, the map should not be affected.
</div>

The JavaScript code


var mapviewer;

function onLoad()
{
     //Add the map 
     mapviewer = new MultimapViewer( document.getElementById( 'mapviewer' ) );
     mapviewer.drawAndPositionMap( new MMLocation( new MMLatLon( 51.5145, -0.1085 ) ,15 ) );
     // Firefox will remember the value of the checkbox between reloads
     // so we need to check its current value
     mapviewer.setKeyboardPanning( document.getElementById( 'keyboardpanning' ).checked );
     // Tell the viewer to ignore events that are initiated by this element
     mapviewer.assignIgnoreEvents( document.getElementById( 'scrolldiv' ) );
}

MMAttachEvent( window, 'load', onLoad );

Further Help

If you require further help with your map API implementation, please contact our Customer Support team:

For general account enquiries or further services, please contact your Multimap Sales team:

Australia, Sydney	+ 61 (0) 2 9262 6551
Great Britain, London	+44 (0)20 7632 7777
United States, Boston	+ 1 617 423 4510
email:	info@multimap.com

Australia, Sydney	+ 61 (0) 2 9262 6551
Great Britain, London	+44 (0)20 7632 7800
United States, Boston	+ 1 617 423 4510
email:	sales@multimap.com

Multimap API v1.1 Example