Testing open-layers with iphone and android.

Openlayers on touch based phones.
We are investigating if we can use open-layers for touch screen mobile phones, concentrating on the iphone and android platforms.

This is really just an experiment to see how much we can do in the phones browser without having to resort to writing or using custom apps in objective c and java.

After doing a quick google this blog by whit highlights 3 different techniques to get openlayers working with iphone.

http://docs.opengeo.org/geospiel/2008/10/21/touch-and-openlayers/

Whit helpfully describes how to extend open layers, getting it to work with touch/gesture driven phones.

He posted three demos here at http://docs.opengeo.org/demo/OL/

I tried each one with an actual iphone and the second demo seemed to give the best results for me.

This is the one where touch events are directly adapted and forwarded onto existing open layers calls. These events are attached directly to the map div.

touch event to openlayers mappings…

• touchstart event is hooked up to see if a couple took place in quick succession so that the call can be translated to OpenLayers.Map.zoomIn() / OpenLayers.Map.zoomOut().
• touchmove event is hooked up to call OpenLayers.Map.pan(); Where the previously captured co-ordinates from touchstart gives you the dx and dy for the pan.
• touchend event scale property is examined to see whether a OpenLayers.Map.zoomIn() or zoomout out is required.
• guestureend/guesturestart event
  is also hooked up to determine whether a zoom is required. I never witnessed this event actually being raised.

It seems to work fine even with our high resolution layer MasterMap OS layers.

operlayers on iphone with OS Mastermap layer

Though on the android you have a side effect where occasionally a view image/save image pop-up appears. If you press the on the screen for too long.

Android Unwanted Save Image Popup

Here is a demo using openstreetmap and using code from http://docs.opengeo.org/demo/OL/ (the second example). The only change was just an experiment to see if the panning could look smoother by reducing the number of pan calls.

Note this page is designed exclusively for the iphone and android touch events so wont work with a normal desktop browser.

openstreetmap for iphone and android – http://mab.edina.ac.uk/geomobile-test/osm.html

Here is a video clip of openstreetmap  it working with the android emulator

Here is a video clip of 1:2500 os mastermap  working with the android emulator