[OpenLayers-Users] GPS coordinate (GPS from mobile devices), lonlat and OpenLayers.Icon

[Noli Sicad]

Hi,

I would like to replace the Geolocate control functionality to reading
from the GPS from mobile devices (e.g. iPhone and iPad 2). Geolocate
html5 is so off from the actual real coordinate (lonLat) like 500
metres away.

How are do I am going to do this in easiest and nicer way?

I am able to get the my current location (i.e. lon and lat values)
from the iPhone/ iPad  GPS  to HTML DOM (i.e. Textbox).

e.g.

jQTouch with Xcode,

<ul class="edit rounded">
      <li>Longitude: <input id='lng' type="text" value='' /></li>
      <li>Latitude: <input id='lat' type="text" value='' /></li>
</ul>

Now, the question is, would I be able to get icon from the local
directory, not from http server?

In this example below, it seems that OpenLayers.Icon is retrieved from
http server.

~~~~~~
var icon = new OpenLayers.Icon('http://www.openstreetmap.org/openlayers/img/marker.png',size,offset);
layerMarkers.addMarker(new OpenLayers.Marker(lonLat,icon));
~~~~~~
from,  http://wiki.openstreetmap.org/wiki/Openlayers_Track_example

If not, would vector maker good option for this?

In this example, http://openlayers.org/dev/examples/geolocation.html

How can I mapulated this function to cater to the lon and lat values
from the GPS?

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
var geolocate = new OpenLayers.Control.Geolocate({
    bind: false,
    geolocationOptions: {
        enableHighAccuracy: false,
        maximumAge: 0,
        timeout: 7000
    }
});
map.addControl(geolocate);
var firstGeolocation = true;
geolocate.events.register("locationupdated",geolocate,function(e) {
    vector.removeAllFeatures();
    var circle = new OpenLayers.Feature.Vector(
        OpenLayers.Geometry.Polygon.createRegularPolygon(
            new OpenLayers.Geometry.Point(e.point.x, e.point.y),
            e.position.coords.accuracy/2,
            40,
            0
        ),
        {},
        style
    );
    vector.addFeatures([
        new OpenLayers.Feature.Vector(
            e.point,
            {},
            {
                graphicName: 'cross',
                strokeColor: '#f00',
                strokeWidth: 2,
                fillOpacity: 0,
                pointRadius: 10
            }
        ),
        circle
    ]);
    if (firstGeolocation) {
        map.zoomToExtent(vector.getDataExtent());
        pulsate(circle);
        firstGeolocation = false;
        this.bind = true;
    }
});
geolocate.events.register("locationfailed",this,function() {
    OpenLayers.Console.log('Location detection failed');
});
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Any ideas and implementation how to do this?

Thanks.

Regards, Noli