EMS : Pan

A panned image is one that seems to move under a fixed window. This can be achieved literally, using the MouseDefaults control, which allows a user to click and drag a map tile into a new position or programmatically, using setCenter() on an existing map.

Panning arrows

Panning can also be simulated by maintaining the same image position, width, and height on the webpage, but requesting a new map image that has an identical zoom but a shifted centre point (the panButton controls also work this way). When you click a panButton, a new map image is requested centred on a point approximately half a map in the direction you clicked.

If you are creating a small map and want to include small panning arrows, you can use their extended constructor to minimise them.

The following snippet adds minimised pan arrows to a map in a controls array.

var map = new EMS.Map("map-div", {
        "controls": [
   			new EMS.Control.PanButton('n', {fullsize:false}),
			new EMS.Control.PanButton('w', {fullsize:false}),
			new EMS.Control.PanButton('e', {fullsize:false}),
			new EMS.Control.PanButton('s', {fullsize:false}),
			new EMS.Control.Copyright()  //required
		]
});

You can reference the PanButton controls programmatically after they have been instantiated as map.panNorth, map.panSouth, map.panEast, and map.panWest.

For more information, refer to the JavaScript Command Reference.

KeyboardDefaults

MouseDefaults and pan arrows are included with a default map but if you want to use keyboard controls – so that a visitor can use cursor keys to pan the map - instantiate the EMS.KeyboardDefaults control.

map.addControl(new EMS.Control.KeyboardDefaults());

KeyboardDefaults are not automatically activated in an EMS map because they require some housekeeping. If you add them to a web page that includes user input, you must remember to deactivate the control while the input fields have focus – or the map will try to pan every time the user hits an arrow key!