créer un site avec une carte IGN simple - le B.A. BA

**Didier63** · 12/09/2011, 17h41

Sur notre site, je souhaite mettre une carte IGN au plus simple, pour indiquer notre emplacement. J'essaie depuis un bon moment mais sans succès. J'ai utilisé les exemples donnés et intégré la clef mais sans résultat. Sur le site déjà existant, j'ai créé une page vierge avec uniquement la carte mais je n'obtiens rien. (page blanche)
Est-il possible de me dire la démarche - pas à pas - à effectuer pour que tout fonctionne correctement ?
Je n'ai peut-être pas déclaré la bonne url, j'ai déclaré le site redirigé www.monsite.fr au lieu de l'adresse hébergée : http://pages.perso.orange.fr/monsite.fr
Merci

**trukker** · 12/09/2011, 18h08

Bonjour,

Effectivement, si tu n'a pas déclaré la bonne adresse cela ne fonctionnera pas.

Les clés ne fonctionnent que pour l'adresse enregistrée ou en local (Simulation d'un serveur sur son ordinateur) avec un logiciel tel que wamp ou EsyPHP.

Pour utiliser wamp, tu trouveras surement un tuto sur le web.

Si cela fonctionne en local, tu devra demander la modification de ton compte. Sinon montre nous ton code pour que l'on t'aide à trouver l'erreur.

Gilles.

**Didier63** · 12/09/2011, 18h18

Bonjour,
Je vais essayer de suite. Par contre il est question en local de php. Le site créé est seulement en html. Pas grave ?
Merci

**Didier63** · 12/09/2011, 18h38

J'ai testé comme tu m'as indiqué en suivant un tuto. J'ai toujours page blanche.
Je mets ci-dessous le code source.
Merci
= = = = = = = = = = = = = =

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>API Geoportail - votre carte personnelle</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css"><!--/*--><![CDATA[/*><!--*/
div#viewerDiv {
width:800px;
height:600px;
background-color:white;
background-image:url(http://api.ign.fr/geoportail/api/js/.../loading.gif);
background-position:center center;
background-repeat:no-repeat;
}
/*]]>*/--></style>
</head>
<body>
<br />
<script type="text/javascript"><!--//--><![CDATA[//><!--
window.onload= function() {
Geoportal.load(
// div's ID:
'viewerDiv',
// API's keys:
['1913571526166367872'],
{// map's center :
// longitude:
lon:2.131525,
// latitude:
lat:25.833333
}
);
};
//--><!]]></script>
<script type="text/javascript"
src="http://api.ign.fr/geoportail/api/js/1.2/Geoportal.js">
<!-- -->
</script>
</body>
</html>

**trukker** · 12/09/2011, 19h05

Bonjour,

Je vois 1 erreur :

Tu n'a pas créé la div qui doit accueillir la carte :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="viewerDiv" ></div>

**trukker** · 12/09/2011, 20h54

Bonsoir,

Ta clé ne fonctionne pas. Peut être faut-t-il attendre qu'elle soit activée, ou il y a une erreur de frappe. Ou ce n'est pas le bon contrat, ce ne doit pas être un contrat INSPIRE mais un contrat pour l'api géoportail.

Sinon comme tu utilise une syntaxe dont je n'ai pas l'habitude je te met un code tout simple qui fonctionne chez moi. Tu y mettra ta clé quand tu aura trouvé le problème :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>API Geoportail - votre carte personnelle</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
      
    <script type="text/javascript" src="http://api.ign.fr/geoportail/api?v=1.2-e&amp;key=Ta clé&amp;instance=viewer&amp;includeEngine=true&amp;"><!-- --></script>
	
    
    <script type="text/javascript">
    <!--
	viewer= null;
	
    function initGeoportalMap() {
	
        geoportalLoadviewer("viewerDiv", "normal", 'FXX', null, null);
		
		if (!viewer) {
            alert('Map creation failed');
            return;
        }

        viewer.addGeoportalLayers([
            'ORTHOIMAGERY.ORTHOPHOTOS:WMSC', // Ajout couche photographique
            'GEOGRAPHICALGRIDSYSTEMS.MAPS:WMSC'], // Ajout couche carte IGN
			{'ORTHOIMAGERY.ORTHOPHOTOS:WMSC':{visibility:false},global:{opacity:1.0}} // Non affichage de la couche photographique et réglage de l'opacité à 1 pour toutes les couches
		);
		
		viewer.getMap().setCenterAtLonLat(2.131525,25.833333,5); // Centrage de la carte à longitude, latitude et zoom

    }
    -->
    </script>
    <style type="text/css">
    <!--
    
    div#viewerDiv {
        width:800px;
        height:600px;
        background-color:white;
        background-image:url(http://api.ign.fr/geoportail/api/js/.../loading.gif);
        background-position:center center;
        background-repeat:no-repeat;
    }
    -->
    </style>
  </head>
  <body onload="initGeoportalMap()">
    
    <div id="viewerDiv"></div>
	
  </body>
</html>

**Didier63** · 12/09/2011, 21h38

Formidable, ça fonctionne en localhost. J'utilise Kompozer pour créer les pages web. Apparemment, il corrige automatiquement le code mais de travers. J'ai modifié mon fichier pageweb.html en pageweb.txt + ensuite remplacé le code par le tiens et retransformé mon pageweb.txt en pageweb.html et ça fonctionne.
Par contre une fois transféré sur le site, j'ai la carte mais elle est vide. Je suppose que cela vient du fait que mon URL entrée n'est pas la bonne. Sauf si tu penses que cela vient d'autre chose, je vais déclarer l'adresse "source" et non l'adresse redirigée.
De toute façon merci beaucoup, j'ai fait un grand pas en avant ce soir.

**trukker** · 12/09/2011, 21h58

Bonsoir,

Oui, si cela fonctionne en local, il y a toutes les chances que ce soit parce que tu as rentré une mauvaise adresse à la création de ton compte.

Sinon, ce pourrait être dû a un mauvais transfert du code sur ton site. Fais un clic droit dans ton navigateur, pour vérifier le code source de la page et comparer avec ton code.

Gilles.

**Didier63** · 12/09/2011, 22h21

J'ai fait la modif d'adresse.
Je vais attendre le mail de confirmation de l'activation de la bonne adresse et essaierai à nouveau demain soir.
Le code est le bon car j'ai simplement transféré mapageweb.html qui fonctionnait en localhost sur le site en ligne.
Merci

**dgrichard** · 13/09/2011, 09h50

Envoyé par trukker

Sinon comme tu utilise une syntaxe dont je n'ai pas l'habitude ...

Le code utilisé est celui que nous recommandons à l'avenir car le geoportalLoad<INSTANCE>() va disparaître avec la prochaine version du Géoportail ... Pour faire simple, l'API permettra en une ligne de Javascript d'avoir une visualisation :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
    <script type="text/javascript"><!--//--><![CDATA[//><!--
    window.onload= function() {
        Geoportal.load(
            // div's ID:
            'DIVID',
            // API's keys:
            ['CLEF'],
            {// map's center :
                // longitude:
                lon:LON,
                // latitude:
                lat:LAT
            }
        );
    };
    //--><!]]></script>
    <script type="text/javascript" src="URL_VERS_API"><!-- --></script>

Cela fonctionne déjà avec l'API actuelle

Ce qui n'empêchera pas pour les pro d'utiliser l'API est gérant par eux-même le onload, etc ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
window.onload= loadAPI;

loadAPI= function() { ... }

ou avec JQuery :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
    <script type="text/javascript">
    <!--
        $(document).ready(function() {
            loadAPI();
        });
      -->
    </script>

La prochaine mise-à-jour de l'API montrera tout cela

**Didier63** · 13/09/2011, 20h21

Bonjour,
Pas facile pour moi. Mon compte est bien activé, j'ai reçu le mail de confirmation, mais j'ai toujours une carte correcte sur localhost mais vide sur mon site.
J'ai pourtant refait un contrat avec l'adresse url "initiale". J'essaierai bien avec les conseils de dgrichard mais je ne vois pas trop comment faire... Obligé d'attendre la "prochaine mise à jour de l'API qui montrera tout ça" (c'est pour quand ?) sauf s'il est possible de m'expliquer en avant première

.En tout cas merci à tous les 2 de votre temps pour m'aider.
Didier

**dgrichard** · 13/09/2011, 20h55

Envoyé par Didier63

J'ai pourtant refait un contrat avec l'adresse url "initiale".

Si ta clef est celle indiquée dans ton premier post, je ne la trouve pas dans la base des clefs. Ceci pourrait expliquer cela

**trukker** · 13/09/2011, 21h22

bonsoir,

Obligé d'attendre la "prochaine mise à jour de l'API qui montrera tout ça"

non, la nouvelle méthode fonctionne voici un exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>API Geoportail - votre carte personnelle</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    
    <style type="text/css">
    <!--
    
    div#viewerDiv {
        width:800px;
        height:600px;
        background-color:white;
        background-image:url(http://api.ign.fr/geoportail/api/js/1.2/theme/geoportal/img/loading.gif);
        background-position:center center;
        background-repeat:no-repeat;
    }
    -->
    </style>
  </head>
  <body onload="initGeoportalMap();" >
    
    <div id="viewerDiv"></div>
	
	<script type="text/javascript">
    <!--
	
	function initGeoportalMap() {
        Geoportal.load(
			'viewerDiv', // DIV dans laquelle sera affichée la carte
			['Votre clé'], // Clé du contrat
			{lon:2.131525,lat:25.833333}, // Centre de la carte
			5, // Zoom
			{
			label:'titre', // Titre infobulle
			description:'centre' // Description dans l'infobulle
			}
		);
	};
	
    -->
    </script>
	
	<script type="text/javascript" src="http://api.ign.fr/geoportail/api/js/1.2/Geoportal.js"><!-- --></script>
  </body>
</html>

Mais il faudra attendre la documentation parce que je n'arrive pas à ajouter les options de visibilité et d'opacité sur les couches orthophotos et GEOGRAPHICALGRIDSYSTEMS.MAPS.

Pour la nouvelle version, openlayers 2.11 est sortie ce week-end. Donc l'api géoportail devrait sortir dans 1 ou 2 mois selon la difficulté d'adaptation.

Gilles

**Didier63** · 13/09/2011, 21h29

Ce sont des chiffres au hasard. Je ne savais pas s'il était conseillé de mettre la vrai. Après coup, je me rend compte que ça ne fait rien puisque tout est apparemment attaché à l'url.

**Didier63** · 13/09/2011, 21h48

Je viens d'essayer avec la méthode de trukker mais ça ne fonctionne pas en localhost.
J'ai mis la clé à la place du terme en rouge votre clé
Didier

**trukker** · 13/09/2011, 21h54

Bizarre,

Tu as bien conservé les 2 guillemets simple autour de la clé ?

Quel navigateur et système d'exploitation ?

Gilles.

**Didier63** · 13/09/2011, 21h55

Oups! C'est bon en localhost. J'avais dû oublié un paramètre.
Mais toujours pas bon en ligne. J'ai comme d'habitude la fenêtre IGN sans carte à l'intérieur

**dgrichard** · 13/09/2011, 22h03

Envoyé par trukker

Mais il faudra attendre la documentation parce que je n'arrive pas à ajouter les options de visibilité et d'opacité sur les couches orthophotos et GEOGRAPHICALGRIDSYSTEMS.MAPS.

Cela se fera via l'option layersOptions

Envoyé par trukker

Pour la nouvelle version, openlayers 2.11 est sortie ce week-end. Donc l'api géoportail devrait sortir dans 1 ou 2 mois selon la difficulté d'adaptation.

Je devrai pouvoir remonter cette semaine une première alpha version de l'API qui sera donc visible sur le dépot

**trukker** · 13/09/2011, 22h04

Donc, il y a toutes les chances que cela vienne de la clé, l'adresse qui ne convienne pas.

Sinon, si tu peux donner l'adresse de ton site, peut être trouvera t-on le problème.

Gilles