Un point suivant la position GPS ...

Probématique

Le script (ci-dessous) position un cercle sur une carte indiquant la position de l'utilisateur.
Il est basé sur le Geolocation API et OpenLayers.
Le code ...

<!DOCTYPE html>
<html>
<head>
  <title>Test Geolocation</title>
 
  <!-- OpenLayers -->
  <script src="http://osm.osv/OpenLayers.js"></script>
  <script src="http://osm.osv/OpenStreetMap.js"></script>
 
  <script type="text/javascript">
    var idEl = function( id ){ return document.getElementById( id );}
  </script>
 
</head>
<body>
 
<h1>Geoloc API</h1>
 
<h2>Map</h2>
<input type="checkbox" id="followGPS"> Follow GPS <br>
<div style="width:500px; height:500px" id="map"></div>
 
<h2>Logs</h2>
<button onclick="idEl('logs').innerHTML='';">Clear logs</button>
<div id="logs"></div>
 
 
<script type="text/javascript">
 
    //--------------- Map
    var osmMap = function(){
        var map = new OpenLayers.Map("map"),
            layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik"),
            hostedTiles = new OpenLayers.Layer.OSM("Local Tiles", "/tiles/${z}/${x}/${y}.png", {numZoomLevels: 18, alpha: true, isBaseLayer: false}),
            defaultZoom = 15;
 
        map.addLayers( [ layerMapnik, hostedTiles] );
 
        var switcherControl = new OpenLayers.Control.LayerSwitcher();
        map.addControl(switcherControl);
 
        var vector = new OpenLayers.Layer.Vector('vector');
        map.addLayer(vector);
 
        var firstGeolocation = true,
            convertLonLat = function( coords ){ //Convert coords.longitude and coords.latitude only if needed
                if( !( "isESPG" in coords && coords.isESPG === true) ){
                    var lonlat = new OpenLayers.LonLat(
                                            coords.longitude,
                                            coords.latitude
                                        ).transform(
                                            new OpenLayers.Projection("EPSG:4326"),
                                            map.getProjectionObject()
                                        );
                    coords.longitude = lonlat.lon;
                    coords.latitude = lonlat.lat;
                    coords.isESPG = true;
                }
 
                return coords;
            },
            getPoint = function( coords ){ //Return a geometry point from coords
                coords = convertLonLat( coords );
                return new OpenLayers.Geometry.Point( coords.longitude, coords.latitude );
            },
            centerMap = function( coords, zoom ){ //zoom is optionnal
                coords = convertLonLat( coords );
                zoom = (zoom) ? zoom : defaultZoom;
                if( ! map.getCenter() ){
                    map.setCenter( new OpenLayers.LonLat( coords.longitude, coords.latitude ), zoom );
                }
            },
            updateGPSCross = function( coords ){
                vector.removeAllFeatures(); //Removing previous cross/circle
 
                var style = {
                    fillColor: '#000',
                    fillOpacity: 0.1,
                    strokeWidth: 0
                };
 
                var point = getPoint( coords );
 
                var circle = new OpenLayers.Feature.Vector(
                    OpenLayers.Geometry.Polygon.createRegularPolygon(
                        new OpenLayers.Geometry.Point( point.x, point.y ),
                        coords.accuracy/2,
                        40,
                        0
                    ),
                    {},
                    style
                );
                vector.addFeatures([
                    new OpenLayers.Feature.Vector(
                        point,
                        {},
                        {
                            graphicName: 'circle',
                            strokeColor: '#1ac6bc',
                            strokeWidth: 2,
                            fillOpacity: 0,
                            pointRadius: 6
                        }
                    ),
                    circle
                ]);
                if (firstGeolocation) { //Only zoom for the first position
                    map.zoomToExtent(vector.getDataExtent());
                    firstGeolocation = false;
                }
            };
 
            centerMap( { longitude: -4.47607356, latitude: 48.3905264 }); //We need a first position (espacially with our tile server)
 
            return{ updateGPSCross: updateGPSCross };
    }();
 
    //--------------- Geolocation
    var geoloc = function(){
        var geolocation = navigator.geolocation;
 
        var log = function( m ){
            window.console.log( m );
            document.getElementById("logs").innerHTML += "<br>"+m ;
        };
 
        var logPosition = function( position ){
            var l = "Position";
            l += " lat=" +position.coords.latitude;
            l += " long="+position.coords.longitude;
            l += " accuracy="+position.coords.accuracy;
            l += " timestamp="+position.timestamp;
            log( l );
        };
 
        var positionOptions = { enableHighAccuracy: true },
            positionCallback = function( position ){
                logPosition( position );
                if( idEl('followGPS').checked ){ osmMap.updateGPSCross( { longitude:position.coords.longitude, latitude:position.coords.latitude } );}
            },
            positionErrorCallback = function( positionError ){
                switch(positionError){
                    case 1:
                       alert("Permission Denied");
                       break;
                    case 2:
                        alert("Position unvalaible");
                        break;
                    case 3:
                        alert("Timeout");
                }
            };
 
        var watchID = geolocation.watchPosition( positionCallback, positionErrorCallback, positionOptions );
        log("Watch ID : "+watchID);
 
        var simulationInterval = false;
        var debugSimulationCount = 0;
    }();
 
  </script>
 
</body>
</html>