Maison du Libre | Brest

Outils pour utilisateurs

Outils du site

Piste :
lespetitshackers:ffox:gpsdyn_map

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Prochaine révision		Révision précédente
lespetitshackers:ffox:gpsdyn_map [2013/07/17 12:43] – créée benviilespetitshackers:ffox:gpsdyn_map [2024/04/16 22:26] (Version actuelle) – modification externe 127.0.0.1
Ligne 1: Ligne 1:
 +====== 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 [[http://dev.w3.org/geo/api/spec-source.html|Geolocation API]] et [[http://openlayers.org/|OpenLayers]].
 +
 +===== Le code ... =====
 +
 +<code XML>
 +<!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>
 +</code>
Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki