N.B. : La méthode de chargement décrite ci-dessous est dépréciée. Elle ne fonctionnera plus avec le passage à la version 2.0 de l'API Flash. Avec la version 1.3 de l'API js, une nouvelle méthode de chargement, compatible avec celle de la future version de l'API Flash est disponible. Le passage à cette méthode est expliqué en bas de cette page : "Intégration de la visualisation Flash dans une page HTML à l'aide du Loader"
Nous supposerons que le développement se déroule dans un dossier "APIFlash" que nous appèlerons désormais dossier Applicatif.
Pour pouvoir utiliser l'API IGN Flash du Géoportail dans une page HTML, il faut:
var flashvars = {
key:"", //mettre ici la clé API correspondant au contrat
proxy:"" , //mettre ici l'url du proxy si besoin (kml distant)
center:"", //mettre ici les coordonnées du centre de la carte au chargement de la page
zoom:"" //mettre ici le niveau de zoom de la carte au chargement de la page
};swfobject.embedSWF(
...
"800px", "600px", // Régler ici la taille de la fenêtre cartographique
...);<script type="text/javascript"
src="http://api.ign.fr/geoportail/api/doc/examples/js/flex/swfobject.js"></script>
Depuis les versions 1.5 de Firefox, le referrer des requêtes GET envoyées par un objet Flash ne sont pas renseignées. Pour contourner ce bug, il faut préciser un proxy dont le rôle va être entre autres de renseigner l'en-tête referrer.
Exemple de proxy :
<?php
// Based on openscales prox (c) ATOS 2009
// Get the REST call path from the AJAX application
// Is it a POST or a GET?
$url = ($_POST['url']) ? $_POST['url'] : $_GET['url'];
$mimeType =($_GET['FORMAT']) ? $_GET['FORMAT'] : 'text/xml';
// Open the Curl session
$session = curl_init($url);
// If it's a POST, put the POST data in the body
if ($_POST['url']) {
$postvars = '';
while ($element = current($_POST)) {
$postvars .= key($_POST).'='.$element.'&';
next($_POST);
}
curl_setopt ($session, CURLOPT_POST, true);
curl_setopt ($session, CURLOPT_POSTFIELDS, $postvars);
}
// Don't return HTTP headers. Do return the contents of the call
curl_setopt($session, CURLOPT_HEADER, false);
curl_setopt($session, CURLOPT_REFERER, 'YOUR_URL_ATTACHED_WITH_YOUR_KEY');
curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 10);
curl_setopt($session, CURLOPT_RETURNTRANSFER, true);
// Make the call
$response = curl_exec($session);
// The web service returns XML. Set the Content-Type appropriately
header('Content-Type: '.$mimetype);
if (curl_errno($session)) {
echo curl_error($session);
} else {
echo $response;
curl_close($session);
}
?>Il est possible d'ajouter une ou plusieurs couches KML à la visualisation. Pour cela, il faut:
var flashvars = {
key:"", //mettre ici la clé API correspondant au contrat
proxy:"", //mettre ici l'url du proxy si besoin
kmlLayers : //lister dans un tableau les kmls à ajouter
[ "Villes@kml/cities.kml",
"Territoires@kml/territories.kml"]
};kmlLayers est un tableau de Strings. Les strings sont de la forme : "nom de la couche@url du kml".Le séparateur est le caractère "@".
NB : Cette méthode de chargement est compatible avec la future version de l'API Flash.
Si vous avez créé une application flash à l'aide de la méthode expliquée ci-dessus, voici comment passer à la nouvelle méthode de chargement.
<noscript>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%" id="geoportalFxMin">
<param name="movie" value="geoportalFxMin.swf" />
<param name="flashvars" value=""/>
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="true" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="geoportalFxMin.swf" width="100%" height="100%">
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="true" />
<!--<![endif]-->
<!--[if gte IE 6]>-->
<p>
Either scripts and active content are not permitted to run or Adobe Flash Player version
10.0.0 or greater is not installed.
</p>
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash Player" />
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</noscript><script type="text/javascript" src="js/flex/swfobject.js"><!--//--><![CDATA[//><!--//--><!]]></script>
et remplacez le par l'inclusion du code de chargement de l'api flash :
<script type="text/javascript" src="http://api.ign.fr/geoportail/api/js/1.3/lib/geoportal/lib/GeoportalFlash.js"><!-- --></script>
<script type="text/javascript">
// For version detection, set to min. required Flash Player version, or 0 (or 0.0.0), for no version detection.
var swfVersionStr = "10.0.0";
// To use express install, set to playerProductInstall.swf, otherwise the empty string.
var xiSwfUrlStr = "playerProductInstall.swf";
/* Changer les variables key, proxy et kmlLayers selon le besoin */
var flashvars = {
key:'1711091050407331029',
host:'http://jeton-api.ign.fr',
wmsc:'http://wxs.ign.fr/geoportail/wmsc'
};
var params = {};
params.quality = "high";
params.bgcolor = "#ffffff";
params.allowscriptaccess = "sameDomain";
params.allowfullscreen = "true";
var attributes = {};
attributes.id = "geoportalFxMin";
attributes.name = "geoportalFxMin";
//attributes.align = "middle";
swfobject.embedSWF(
"geoportalFxMin.swf", "flashContent",
/* Régler ici la taille de la fenêtre cartographique : width / height */
"800px", "600px",
swfVersionStr, xiSwfUrlStr,
flashvars, params, attributes);
// JavaScript enabled so display the flashContent div in case it is not replaced with a swf object.
swfobject.createCSS("#flashContent", "display:block;text-align:left;");
//--><!]]></script>par le code suivant (copié depuis l'exemple geoportalFxMap_simple1.html) :
<script type="text/javascript">
window.onload= function() {
Geoportal.load(
// div's ID:
'flashContent', // identifiant de la div contenant l'API flash
// API's keys:
['__copier_votre_clef_ici__'], // clef de contrat
{// map's center :
// longitude:
lon:2.4243,
// latitude:
lat:48.8449
},
null, // niveau d'échelle de la visualisation
{type:'flex'}
);
};
</script> // API's keys:
['__copier_votre_clef_ici__'], // clef de contrat kmlLayers : //lister dans un tableau les kmls à ajouter
[ "Villes@kml/cities.kml",
"Territoires@kml/territories.kml"]par l'ajout d'un paramètre "overlays" à la suite du paramètre type:'flex'
type:'flex',
overlays:{
'kml':[{'name':'Villes',
'url' :'kml/cities.kml'},
{'name':'Territoires',
'url:'kml/territories.kml'}]
} div#flashContent {
width:800px;
height:600px;
}