Mobile Navigation

mobile, touch, drag, move, zoom, navigate
Demonstrate map navigation on mobile

This example demonstrates what OpenLayers provides for map navigation on mobile devices.

The TouchNavigation control allows to pan the map with touch gestures on the screen – "touchstart", "touchmove", "touchend" sequences. It also allows to zoom in with double taps, and to zoom out with two-finger single taps. The latter is only available on devices supporting multi-touch. Note that in most devices Android doesn't support multi-touch in the browser.

The Zoom control provides + and - buttons for zooming in and out. These buttons should work on any device, and the zoom out button is especially needed for devices that don't support multi-touch.

See the mobile-navigation.js source to see how this is done.