Home/ Questions/Q 7772291
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T16:51:19+00:00

I have a problem with the click event on an OpenLayers Map on iPhone

  • 0

I have a problem with the click event on an OpenLayers Map on iPhone 4 using PhoneGap. It appears that the Position received by my setMarker(evt) function is dependent from the scroll position. After taking a closer look at the values for x and y I found out that y can even be negative.
The same code is working on Android, with setMarker receiving plausible values for both x and y.

Here is a short example where this problem occurs:

<!DOCTYPE html>
<html>
<head>
<title></title>

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta charset="utf-8">
<style>
    html, body {
        height:99%;
        width:99%;
    }
</style>
<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
<script type="text/javascript" charset="utf-8" src="OpenLayers.js"></script>    
<script type="text/javascript">
var map, layer, markers;


function setMarker(e){
    markers.clearMarkers();
    var markerpos = map.getLonLatFromViewPortPx(e.xy);

    var size = new window.OpenLayers.Size(21,25);
    var offset = new window.OpenLayers.Pixel(-(size.w/2), -size.h);
    var icon = new window.OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png',size,offset);

    var marker = new window.OpenLayers.Marker(markerpos,icon);
    markers.addMarker(marker);
}

function onDeviceReady()
{
    map = new window.OpenLayers.Map("map", { controls: [new window.OpenLayers.Control.Navigation()]});
    layer = new window.OpenLayers.Layer.OSM("Simple OSM Map");      
    map.addLayer(layer);
    map.setCenter(
                  new window.OpenLayers.LonLat(10,50).transform(
                    new window.OpenLayers.Projection("EPSG:4326"), // From WGS 84
                    map.getProjectionObject()       // to Spherical Mercator
                    ),
                18 //Zoom
                );

    var touchNav = new window.OpenLayers.Control.TouchNavigation({
                        defaultClickOptions:{
                            pixelTolerance: 10
                            }
                        });

    // A click will set the marker:
    window.OpenLayers.Util.extend(touchNav, {
                                  defaultClick: function(evt) {
                                  alert("you clicked " + evt.xy);
                                  setMarker(evt);
                                  }
                                  });
    map.addControl(touchNav);   
    touchNav.activate();

    markers = new window.OpenLayers.Layer.Markers("Markers");
    map.addLayer(markers);
    console.log("map generated");

}

</script>
</head>
  <body onload="document.addEventListener('deviceready', onDeviceReady, false);">
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <div id="map" style="width:100%;height:100%"></div>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  </body>
</html>

A similar problem is here, but as I am already using OpenLayers 2.11 his solution does not help me: Problems with zooming and mouse events in Openlayers

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I finally got this code to work by using
    event.lastTouches[0] for the x/y coordinates on iPhone:

    var x = e.xy.x;
var y = e.xy.y;
if(window.device.platform === "iPhone"){
  x = e.lastTouches[0].clientX;
  y = e.lastTouches[0].clientY + window.pageYOffset;

  x -= document.getElementById("map").offsetLeft;
  y -= document.getElementById("map").offsetTop;
}
var markerpos = map.getLonLatFromViewPortPx(new window.OpenLayers.Pixel(x, y));
    • 0