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

Nicholas Efremov-Kendall n.e.kendall at gmail.com
Wed Jul 13 09:13:45 EDT 2011


Hi Noli,


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!
ps...I'm omitting the error handling at the bottom for the sake of space.

function initGIS(){
if (Modernizr.geolocation) {
  navigator.geolocation.getCurrentPosition(showMap,handle_error);
} else {
yqlgeo.get('visitor',norm_yql_resp);
}
}
function showMap(){
var map= new OpenLayers.Map('geo_loc_map',
{
controls:[
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.LayerSwitcher(),
new OpenLayers.Control.OverviewMap()],
sphericalMercator: true,
  maxExtent: new
OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
  maxResolution: 156543.0399,
  numZoomLevels: 10,
  units: 'm',
  projection: new OpenLayers.Projection("EPSG:900913"),
  displayProjection: new OpenLayers.Projection("EPSG:4326")
}
);
//
var mapnik = new OpenLayers.Layer.OSM();
        map.addLayer(mapnik);
//
var google_map = new OpenLayers.Layer.Google('Google Maps',{type:
google.maps.MapTypeId.HYBRID, numZoomLevels: 20});
    map.addLayer(google_map);
 //
navigator.geolocation.getCurrentPosition(function(position){document.getElementById('geo2').innerHTML="Latitude:
" + position.coords.latitude +
"   Longitude: " + position.coords.longitude + "<p>";
var lonLat = new OpenLayers.LonLat
(position.coords.longitude,position.coords.latitude).transform
(new OpenLayers.Projection("EPSG:4326"),map.getProjectionObject());
            markers.addMarker(new OpenLayers.Marker(lonLat));
            map.setCenter(lonLat,14);
});
var markers=new OpenLayers.Layer.Markers("Markers");
        map.addLayer(markers);

On Wed, Jul 13, 2011 at 1:02 AM, Noli Sicad <nsicad at gmail.com> wrote:

> 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
> _______________________________________________
> Users mailing list
> Users at lists.osgeo.org
> http://lists.osgeo.org/mailman/listinfo/openlayers-users
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.osgeo.org/pipermail/openlayers-users/attachments/20110713/55243004/attachment.html


More information about the Users mailing list