Posted by: murrayhking | January 5, 2010

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.

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

He posted three demos here at

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

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

Android Unwanted Save Image Popup

Here is a demo using openstreetmap and using code from (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

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


  1. […] tackled the problem of integrating HTML5 canvas into the Openlayers framework. We already posted on using OpenLayers  on mobile browsers and how to make  touch gestures rather than mouse events control panning and zooming. HTML5 lets […]

  2. […] an OpenLayers map as pins/markers. I included the iPhone OpenLayers JavaScript from Whit (discussed in a previous blog), enabling the map to respond to iPhone gestures for zooming and panning […]

  3. Does anyone have a copy of Whit’s blog? The link is dead 😦

    • I’m afraid I haven’t got a copy. yes looks like the whole docs site is down.

  4. ohhh o !!!! this link is unable to connect….so wot to do..any other link ???which could help out to connect maps with iphone or ipad .

    • which link were you refering to exactly. look ok from my browser.

  5. Check here for the Touch.js code:

  6. Have a look at these guys!
    Very responsive.

  7. I want to know that can we create Open Layer map application without using JavaScript API means phone gap. I want to create this Open Layer application with use of X Code native codes and Map. Can it is possible to create Open Layer application without using Phone Gap?? please guide me.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s


%d bloggers like this: