OpenLayers latitude inaccurate in Webkit Mobile browsers

Question

I am programming a page with a Map where I need to fix the Tap / Click location on the map and save the coordinates. I am using OpenLayers js. On desktop browsers (IE / FF / Chrome) this works fine. On mobile devices, the tap is correctly fixed in the default Android browser (both in real devices and in emulators).

However, in mobile web browser browsers (iPhone Safari and Android Chrome Beta), we have a problem when the taps are captured a few pixels higher (north) from the actual tap. The error is not fixed (so I can’t just add 100 to the xy event to recalibrate the top.)

Here is the code that I use as a click handler:

OpenLayers.Control.ClickHandler = OpenLayers.Class(OpenLayers.Control, { defaultHandlerOptions: { 'single': true, 'double': false, 'pixelTolerance': 0, 'stopSingle': false, 'stopDouble': false }, initialize: function(options) { this.handlerOptions = OpenLayers.Util.extend( {}, this.defaultHandlerOptions ); OpenLayers.Control.prototype.initialize.apply( this, arguments ); this.handler = new OpenLayers.Handler.Click( this, { 'click': this.trigger }, this.handlerOptions ); }, trigger: function(e) { that.inputLonLat_EPSG4326 = null; var lonlat = that.inputMap.getLonLatFromViewPortPx(e.xy); that.logMessage("XY " + e.xy); that.logMessage("LonLoat " + lonlat); that.inputMarkers.clearMarkers(); that.inputMarkers.addMarker(new OpenLayers.Marker(lonlat,that.icons["green"].clone())); lonlat.transform(that.inputMap.getProjectionObject(), new OpenLayers.Projection("EPSG:4326")); that.inputLonLat_EPSG4326 = lonlat; // For the moderation sections $('#alertLatitude').val(that.inputLonLat_EPSG4326.lat); $('#alertLongitude').val(that.inputLonLat_EPSG4326.lon); //lonLat2.transform(that.inputMap.getProjectionObject(), new OpenLayers.Projection("EPSG:4326")); that.logMessage("Stored lat " + that.inputLonLat_EPSG4326.lat); that.logMessage("Stored lon " + that.inputLonLat_EPSG4326.lon); that.callFunction(that.inputMapListener, e); } }); 

Should I do something different? Has anyone else seen an inaccuracy issue in mobile web kit browsers when using OpenLayers?

Answer 1

I finally found the reason for this. It appears that in the webkit browsers for mobile x, y, which the library seems to receive (or output), is based on the page, not on the element in which the map is placed. Therefore, the calculations are disabled. It seems that the inaccuracy cannot be resolved by adding an xy map element or some such DOM-based shape (I tried).

I solved this by placing the map in an IFrame, and then the iFrame is placed inside the map element. Thus, the x, y obtained by the map click handler are accurate in the iFrame, and therefore lat, long is also accurate. Since both the parent and iFrame are the same domains, there are no problems associated with each other.

To complete the context, the iFrame-based solution is definitely compatible with BB 9 and above, Android Chrome, Android Default, and iPhone Safari, as I tested.

See the solution at - http://suat1.vocanic.net//saralee/apps/dengue_alert/ and iFrame at http://suat1.vocanic.net//saralee/apps/dengue_alert/mobileMap.php (WIP versions may change or interrupt over time)