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.
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.
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.
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.
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