Technical documentation of Geoportal API

  • FR
  • UK

Index / Documentation / Technical documentation

GPS coordinates

2D Web Javascript API

Getting centered on GPS coordinates

In order to be centered on a GPS location, one has to call the Geoportal.load() method, giving it the longitude, latitude and, possibly the zoom level.

If you don't know the geographical location of the place you want to center on, go to the Géoportail web site and use the search engine :

search

Select the locations :

let's go !

Once well located, one has to copy the geographical coordinates in the bottom of the screen :

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

These coordinates are simply given to the Geoportal.load() method as follows :

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  </head>
  <body >
    <div id="viewerDiv" style="width:800px;height:600px;"></div>
    <script type="text/javascript"><!--//--><![CDATA[//><!--
        window.onload= function() {
            Geoportal.load("viewerDiv",
                ['YOUR_LICENSE'], {
                    // escape "
                    lon:"04° 45' 22\" E",
                    lat:"44° 06' 06\" N"
                },
                // zoom level 14 is Town level
                14, {
                    //the map is configured here
                    mode:"normal",
                    viewerClass:"Geoportal.Viewer.Default"
                }
            )
        };
    //--><!]]>
    </script>
    <script
        type="text/javascript"
        src="http://api.ign.fr/geoportail/api/js/VERSION/Geoportal.js"
        charset="utf-8"><!--//--><![CDATA[//><!--
    //--><!]]>
    </script>
  </body>
</html>

Users can also directly changed the coordinates by hands on the GUI by clicking or selecting inner texts of the coordinates fields :

coordinates fields

and changing their values :

coordinates fields modified

Getting the GPS coordinates after a mouse click

In order to obtain the geographical coordinates of the mouse click, one can use the following code :

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  </head>
  <body>
    <div id="viewerDiv" style="width:800px;height:600px;"></div>
    <script
        type="text/javascript"
        src="http://api.ign.fr/geoportail/api/js/VERSION/Geoportal.js"
        charset="utf-8"><!--//--><![CDATA[//><!--
    //--><!]]>
    </script>
    <script type="text/javascript"><!--//--><![CDATA[//><!--
        window.onload= function() {
            Geoportal.load("viewerDiv",
                ['YOUR_LICENSE'],
                null,
                null, {
                    onView: function() {
                        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("You clicked near " + lonlat.lon + "N, " + lonlat.lat + " E");
                            }
                        });

                        // creating and inserting the new control
                        var myClick= new OpenLayers.Control.Click({
                            autoActivate:true
                        });
                        this.getViewer().getMap().addControl(myClick);
                    }
                }
            )
        };
    //--><!]]>
    </script>
  </body>
</html>