Hi Noli,<div><br></div><div><br></div><div>Take a look at my navigator.getcurrent location function. There's a simple getelementbyid which dumps the lat and lon into a div. You could modify this to spit it into your text box. good luck!</div>
<div><div>ps...I'm omitting the error handling at the bottom for the sake of space.</div><div><br></div><div>function initGIS(){</div><div>if (Modernizr.geolocation) {</div><div> <span class="Apple-tab-span" style="white-space:pre"> </span>navigator.geolocation.getCurrentPosition(showMap,handle_error);</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>} else {</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>yqlgeo.get('visitor',norm_yql_resp);</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>}</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>}</div><div><span class="Apple-tab-span" style="white-space:pre"> </span></div><div>function showMap(){</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>var map= new OpenLayers.Map('geo_loc_map',</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>{</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>controls:[</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>new OpenLayers.Control.Navigation(),</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>new OpenLayers.Control.PanZoomBar(),</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>new OpenLayers.Control.LayerSwitcher(),</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>new OpenLayers.Control.OverviewMap()],</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>sphericalMercator: true,</div><div> <span class="Apple-tab-span" style="white-space:pre"> </span>maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),</div>
<div> <span class="Apple-tab-span" style="white-space:pre"> </span>maxResolution: 156543.0399,</div><div> <span class="Apple-tab-span" style="white-space:pre"> </span>numZoomLevels: 10,</div><div> <span class="Apple-tab-span" style="white-space:pre"> </span>units: 'm',</div>
<div> <span class="Apple-tab-span" style="white-space:pre"> </span>projection: new OpenLayers.Projection("EPSG:900913"),</div><div> <span class="Apple-tab-span" style="white-space:pre"> </span>displayProjection: new OpenLayers.Projection("EPSG:4326")</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>}</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>);</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>//</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>var mapnik = new OpenLayers.Layer.OSM();</div><div> map.addLayer(mapnik);</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>//</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>var google_map = new OpenLayers.Layer.Google('Google Maps',{type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20});</div><div><span class="Apple-tab-span" style="white-space:pre"> </span> map.addLayer(google_map);</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>//</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>navigator.geolocation.getCurrentPosition(function(position){document.getElementById('geo2').innerHTML="Latitude: " + position.coords.latitude + </div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>" Longitude: " + position.coords.longitude + "<p>";</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>var lonLat = new OpenLayers.LonLat</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>(position.coords.longitude,position.coords.latitude).transform</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>(new OpenLayers.Projection("EPSG:4326"),map.getProjectionObject());</div>
<div> markers.addMarker(new OpenLayers.Marker(lonLat)); </div><div> map.setCenter(lonLat,14);</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>});<span class="Apple-tab-span" style="white-space:pre"> </span></div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>var markers=new OpenLayers.Layer.Markers("Markers");</div><div> map.addLayer(markers); </div><br><div class="gmail_quote">On Wed, Jul 13, 2011 at 1:02 AM, Noli Sicad <span dir="ltr"><<a href="mailto:nsicad@gmail.com">nsicad@gmail.com</a>></span> wrote:<br>
<blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex;">Hi,<br>
<br>
I would like to replace the Geolocate control functionality to reading<br>
from the GPS from mobile devices (e.g. iPhone and iPad 2). Geolocate<br>
html5 is so off from the actual real coordinate (lonLat) like 500<br>
metres away.<br>
<br>
How are do I am going to do this in easiest and nicer way?<br>
<br>
I am able to get the my current location (i.e. lon and lat values)<br>
from the iPhone/ iPad GPS to HTML DOM (i.e. Textbox).<br>
<br>
e.g.<br>
<br>
jQTouch with Xcode,<br>
<br>
<ul class="edit rounded"><br>
<li>Longitude: <input id='lng' type="text" value='' /></li><br>
<li>Latitude: <input id='lat' type="text" value='' /></li><br>
</ul><br>
<br>
Now, the question is, would I be able to get icon from the local<br>
directory, not from http server?<br>
<br>
In this example below, it seems that OpenLayers.Icon is retrieved from<br>
http server.<br>
<br>
~~~~~~<br>
var icon = new OpenLayers.Icon('<a href="http://www.openstreetmap.org/openlayers/img/marker.png" target="_blank">http://www.openstreetmap.org/openlayers/img/marker.png</a>',size,offset);<br>
layerMarkers.addMarker(new OpenLayers.Marker(lonLat,icon));<br>
~~~~~~<br>
from, <a href="http://wiki.openstreetmap.org/wiki/Openlayers_Track_example" target="_blank">http://wiki.openstreetmap.org/wiki/Openlayers_Track_example</a><br>
<br>
If not, would vector maker good option for this?<br>
<br>
In this example, <a href="http://openlayers.org/dev/examples/geolocation.html" target="_blank">http://openlayers.org/dev/examples/geolocation.html</a><br>
<br>
How can I mapulated this function to cater to the lon and lat values<br>
from the GPS?<br>
<br>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~<br>
var geolocate = new OpenLayers.Control.Geolocate({<br>
bind: false,<br>
geolocationOptions: {<br>
enableHighAccuracy: false,<br>
maximumAge: 0,<br>
timeout: 7000<br>
}<br>
});<br>
map.addControl(geolocate);<br>
var firstGeolocation = true;<br>
geolocate.events.register("locationupdated",geolocate,function(e) {<br>
vector.removeAllFeatures();<br>
var circle = new OpenLayers.Feature.Vector(<br>
OpenLayers.Geometry.Polygon.createRegularPolygon(<br>
new OpenLayers.Geometry.Point(e.point.x, e.point.y),<br>
e.position.coords.accuracy/2,<br>
40,<br>
0<br>
),<br>
{},<br>
style<br>
);<br>
vector.addFeatures([<br>
new OpenLayers.Feature.Vector(<br>
e.point,<br>
{},<br>
{<br>
graphicName: 'cross',<br>
strokeColor: '#f00',<br>
strokeWidth: 2,<br>
fillOpacity: 0,<br>
pointRadius: 10<br>
}<br>
),<br>
circle<br>
]);<br>
if (firstGeolocation) {<br>
map.zoomToExtent(vector.getDataExtent());<br>
pulsate(circle);<br>
firstGeolocation = false;<br>
this.bind = true;<br>
}<br>
});<br>
geolocate.events.register("locationfailed",this,function() {<br>
OpenLayers.Console.log('Location detection failed');<br>
});<br>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~<br>
<br>
Any ideas and implementation how to do this?<br>
<br>
Thanks.<br>
<br>
Regards, Noli<br>
_______________________________________________<br>
Users mailing list<br>
<a href="mailto:Users@lists.osgeo.org">Users@lists.osgeo.org</a><br>
<a href="http://lists.osgeo.org/mailman/listinfo/openlayers-users" target="_blank">http://lists.osgeo.org/mailman/listinfo/openlayers-users</a><br>
</blockquote></div><br></div>