Coordonnées GPS

API Web 2D en Javascript

Centrer la carte sur des coordonnées GPS

Pour se localiser sur une position connue en coordonnées géographiques, il suffit d'utiliser dans votre page HTML la méthode setCenterAtLonLat() en lui fournissant la longitude, la latitude et éventuellement le niveau de zoom.

Si vous ne connaissez pas les coordonnées GPS du lieu où vous souhaitez centrer votre carte, il suffit de se rendre sur le site du Géoportail et d'utiliser le moteur de recherche :

rechercher

Choisir le lieu :

on y va !

Une fois positionné, il suffit de récupérer les coordonnées en géographiques en bas de l'écran :

Longitude : 04° 45' 22" E Latitude : 44° 06' 06" N

Ces coordonnées sont simplement passées à la méthode setCenterAtLonLat() comme suit :

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <script
        type="text/javascript"
        src="http://api.ign.fr/geoportail/api?v=VERSION&amp;key=VOTRE_LICENCE&amp;instance=maCarte&amp;">
    <!--
      -->
    </script>
    <script type="text/javascript">
    <!--
        function initGeoportalMap() {
            //Cette fonction sera exécutée au chargement de la page HTML
            //La carte doit y être créée et paramétrée
            geoportalLoadmaCarte("plancheCartographique", "normal" );
            maCarte.addGeoportalLayers(maCarte.allowedGeoportalLayers);
            // on protège la " et le zoom 14 correspond à ville
            maCarte.getMap().setCenterAtLonLat("04° 45' 22\" E","44° 06' 06\" N",14);
        }
      -->
    </script>
  </head>
  <body >
    <div id="plancheCartographique" style="width:800px;height:600px;"></div>
  </body>
</html>

à partir de la version 1.0, il est possible de modifier directement les coordonnées à partir de l'interface en cliquant ou sélectionnant les textes affichant les coordonnées :

coordinates fields

puis, en les modifiant :

coordinates fields modified

Récupérer la position de la souris sur un clic

Pour obtenir les coordonnées de la souris en coordonnées géographiques suite à un clic sur la carte, on utilisera un code basé sur l'exemple suivant :

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <script
        type="text/javascript"
        src="http://api.ign.fr/geoportail/api?v=VERSION&amp;key=VOTRE_LICENCE&amp;instance=maCarte&amp;">
    <!--
      -->
    </script>
    <script type="text/javascript">
    <!--
        function initGeoportalMap() {
            // Cette fonction sera exécutée au chargement de la page HTML
            OpenLayers.Control.Click= OpenLayers.Class( OpenLayers.Control, {
                defaultHandlerOptions:{
                    'single': true,
                    'double': false,
                    'pixelTolerance': 0,
                    'stopSingle': false,
                    'stopDouble': false
                },

                /**
                 * Constructor
                 */
                initialize: function(options) {
                    OpenLayers.Control.prototype.initialize.apply(this,arguments);
                    this.handlerOptions= OpenLayers.Util.extend({},this.defaultHandlerOptions);
                    this.handler= new OpenLayers.Handler.Click(
                        this, {'click': this.trigger}, this.handlerOptions);
                },

                /**
                 * APIMethod: trigger
                 */
                trigger: function(e) {
                    var lonlat= this.map.getLonLatFromViewPortPx(e.xy).transform(
                        this.map.getProjection(), OpenLayers.Projection.CRS84
                    );
                    alert("Vous avez cliqué près de " + lonlat.lon + "N, " + lonlat.lat + " E");
                }
            });

            // La carte doit y être créée et paramétrée
            geoportalLoadmaCarte("plancheCartographique", "normal" );
            maCarte.addGeoportalLayers(maCarte.allowedGeoportalLayers);
            // création et insertion du nouveau contrôleur
            var monClic= new OpenLayers.Control.Click();
            maCarte.getMap().addControl(monClic);
            monClic.activate();
        }
      -->
    </script>
  </head>
  <body>
    <div id="plancheCartographique" style="width:800px;height:600px;"></div>
  </body>
</html>