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 :
Select the locations :
Once well located, one has to copy the geographical coordinates in the bottom of the screen :
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>Starting from 1.0, one can directly changed the coordinates by hands on the GUI by clicking or selecting inner texts of the coordinates fields :
and changing their values :
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>