Partage de l'API sur plusieurs pages WEB

**philou63_51** · 17/04/2012, 11h07

Bonjour

Je suis un utilisateur régulier et satisfait de l'API Geoportail, en tant que particulier, pour un site web présentant des topos de randonnée. A l'occasion de cette nouvelle version, je m’aperçois du manque d'optimisation dans ma facon d'utiliser cette API.

Mon site se compose de plusieurs pages web, chacune présentant une randonnée. Dans chacune, je viens donc déposer, dans l'en tete html, le code nécessaire à l'exploitation de l'API Geoportail. J'ai bien essayé de mettre ce code spécifique dans un fichier javascript à part, puis de le référencer dans chacune des pages nécessitant l'API, mais sans succès. Donc lorsque je veux mettre à jour la version d'API (en particulier la clé), je dois le faire sur chaque page exploitant l'API (plusieurs dizaines).

Quelqu'un aurait il une solution plus souple pour n'avoir le code de l'API que dans un seul fichier, puis de le référencer autant de fois que nécessaire ?

Merci d'avance pour votre aide.

**dgrichard** · 17/04/2012, 12h02

Deux méthodes :

1/ charger l'API via une IFRAME : le code réside uniquement dans l'IFRAME. On peut passer des paramètres de la page maître à la page fille (Cf. http://api.ign.fr/geoportail/api/doc...talXYForm.html);

2/ charger l'API dynamiquement :

Code :

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

1
2
3
4
5
6
7
Geoportal.Util.loadJS(
    'http//api.ign.fr/geoportail/api/js/1.3.0/Geoportal.js',
    '__GeoportalAPI__','',
    function() {
        faire_le_travail();
    });

le premier paramètre est l'URL du JS à charger;
le second, l'identifiant du script (ID);
le troisième, la fonction de rappel quant le script est chargé ...

il suffit alors de mettre ce script dans un script JS qui est appelé dans tes pages...

**philou63_51** · 18/04/2012, 13h51

Merci pour ces solutions. Néanmoins, comme je ne suis pas très familier avec l'utilisation des scripts java, j'ai adopté la deuxieme solution, mais sans succes.

Je mets en pièces jointes ce que j'ai essayé de faire:
- essai_api.html
- script_api.html (qui est appelé dans le fichier ci-dessus)

Pour l'expert que tu es, l'erreur va sans doute te sauter aux yeux.

**mga_geo** · 18/04/2012, 16h18

Rendre accessible le code sur un site perso type free.fr, https://www.alwaysdata.com/ permet d'investiguer immédiatement.

**dgrichard** · 18/04/2012, 21h07

Commences par faire simple :

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
<html>
<head>
<title>x</title>
</head>
<body>
<script type="text/javascript"
           src="http://api.ign.fr/geoportail/js/1.3.0/Geoportal.js"
           charset="utf-8"
          id="__API_1_3_0__">
</script>
<script type="text/javascript">
window.onload= phase1;

function phase1() {
    Geoportal.load(
        "mapID",
        ['CLEF'],
        null,
        null,
        phase3
    );
}

function phase3() {
    /* on fait le travail */
}
</script>
<div id="mapID"></div>
</body>
</html>

Fait marcher ça et après on verra (et surtout, je souhaiterai ne plus voir de 1.0beta3, instance= dans le code ...)

Edit:refactoring ...

**philou63_51** · 21/04/2012, 15h20

dgrichard
J'ai adopté le code que tu m'as envoyé, et ca fonctionne.
En voulant aller plus loin, j'ai voulu superposer une trace kml avec l'option overlay, en suivant les conseils dans la rubrique FAQ du site API (j'ai meme repris le code de l'exemple, en l'adaptant avec mes fichiers kml et gpx)... et là ca ne fonctionne pas.

Voici le lien du site:
http://philippe.prilleux.free.fr/Pas...essai_api.html

J'arrivais à le faire fonctionner avec les anciennes options, et ca donnait ca:
http://philippe.prilleux.free.fr/Pas...lou_camin.html

**cmail** · 21/04/2012, 15h48

A première vue:

// latitude:
lat:43.52698,
},
//zoom
13,
//options
viewerClass:Geoportal.Viewer.Default, //pour mettre la boite à outil standard (zoom, coordonnées, gestion des couches de données..)
//overlay{...} sert à ajouter des couches locales (gpx et kml) et des web services (wms)
overlays:{ 'gpx':[{'name':'Rando', 'url':'trace.gpx', options:{opacity:0.5,minZoomLevel:5,maxZoomLevel:13}}],
'kml':[{'name':"Mes Points d'Intérêts", 'url':'trace.kml', options:{minZoomLevel:10,maxZoomLevel:17}}],
}//fin de overlays

Virgules (rouges) en trop...
Mais il peut y avoir d'autres problèmes...

**cmail** · 21/04/2012, 16h06

A voir exemple ici et relire ce fil

**dgrichard** · 21/04/2012, 16h13

Envoyé par cmail

A voir exemple ici et relire ce fil

Il devrait aussi il y avoir une parenthèse ouvrante { après

Code :

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

1
2
3
//options
{

**philou63_51** · 26/04/2012, 21h12

Apres avoir bataillé avec quelques virgules et paranthese dans le script, j'arrive à una page qui exploite correctement l'API. ET donc j'en reviens à ma question initiale : comment mettre le script dans un fichier, qui serait appelé dans chacune des pages utilisatrices. Voici ce que ca donne

J'ai bien essayé de faire quelque chose, mais ca ne donne rien : voici les 2 fichiers:
- essai_api_1
- script_api.js

Merci d'avance aux experts

**Zébulon-21** · 26/04/2012, 22h38

Envoyé par philou63_51

Quelqu'un aurait il une solution plus souple pour n'avoir le code de l'API que dans un seul fichier, puis de le référencer autant de fois que nécessaire ?

Voici une autre solution qui permet de ne pas s'embarquer dans du complexe :

1) - Tu télécharges Notepad++ (c'est gratuit et ça te servira pour bien d'autres choses),

2) - Tu vas dans le menu : Recherche --> Recherche dans les sous-dossiers,

3) - Tu demandes un remplacement de xxxx par yyyy et toutes tes pages sont mises à jour en 1/4 de seconde.

**philou63_51** · 03/05/2012, 21h39

Merci Zebulon, mais je reste persuadé que la méthode la plus pratique est d'avoir le code de l'API dans un fichier séparé, qui sera ensuite appelé dans chaque page exploitant l'API. C'est d'autant plus pratique qu'on peut ainsi modifier le paramétrage de l'API en une seule fois (ajout de plusieurs lignes par exemple). Donc si un expert javascript à une idée dans ce sens, je suis preneur.

**Zébulon-21** · 04/05/2012, 08h51

Envoyé par philou63_51

C'est d'autant plus pratique qu'on peut ainsi modifier le paramétrage de l'API en une seule fois (ajout de plusieurs lignes par exemple)

C'est vrai que Notepad++ ne permet pas l'ajout de plusieurs lignes ; dans ce cas il faut s'orienter sur un autre éditeur, éventuellement payant (Dreamweaver...).

De plus cette méthode n'est pas parfaite car elle suppose que les fichiers soient accessibles (hors d'une base de données) et rigoureusement identiques, du moins pour la partie à modifier.

**jeanluc35** · 05/05/2012, 22h01

Bonjour,

Envoyé par philou63_51

... la méthode la plus pratique est d'avoir le code de l'API dans un fichier séparé, qui sera ensuite appelé dans chaque page exploitant l'API... Donc si un bricoleur javascript à une idée dans ce sens, je suis preneur.

Au hasard, cet exemple ne pourrait-il pas t'aider : http://crhb.free.fr/topoguides/exemple1/ ?

cleAPI.js donne la clé API, chargement.js charge la carte, autresFonctions.js exécute d'autres fonctions (une seule dans mon exemple) et index.php appelle le tout.

Cordialement.

**dgrichard** · 08/05/2012, 16h34

Peux mettre cela dans ton js :

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
if (!window.___loadJS) {
    var ___loadJS= function(url, onloadClbk) {
        var doc= document;
        var nodes= doc.getElementsByTagName('head');
        var head= nodes.length>0? nodes[0] : doc.body;
        jsNode= doc.createElement('script');
        jsNode.setAttribute('type', 'text/javascript');
        jsNode.setAttribute('src', url);
        jsNode.setAttribute('charset', 'UTF-8');
        jsNode.setAttribute('id', id);
        if (onloadClbk!=undefined) {
            jsNode.onload= function() {
                if (jsNode.readyState && jsNode.readyState!='loaded' && jsNode.readyState!='complete') {
                    return;
                }
                jsNode.onreadystatechange= jsNode.onload= null;
                onloadClbk();
            };
            if (navigator.appName!='Opera') {
                jsNode.onreadystatechange= jsNode.onload;
            }
        }
        head.appendChild(jsNode);
    }
}

var iv=null;

___loadJS("http://api.ign.fr/geoportail/api/js/1.3/Geoportal.js", function() {
    iv = Geoportal.load(
        // div's ID:
        'viewerDiv',
        // API's keys:
        ['988032968956330286'],
        {// map's center :
        // longitude:
            lon:2.5111,
            // latitude:
            lat:43.52698
        },  
        //zoom
        13, 
        //options
        {
            overlays:{
                'kml':[
                    {'name':"Circuit 1", 'url':'trace.kml', options:{minZoomLevel:10,maxZoomLevel:17}}
                ]
            },
            viewerClass:Geoportal.Viewer.Default
        }
    );

**philou63_51** · 12/05/2012, 14h59

Envoyé par jeanluc35

Bonjour,

Au hasard, cet exemple ne pourrait-il pas t'aider : http://crhb.free.fr/topoguides/exemple1/ ?

cleAPI.js donne la clé API, chargement.js charge la carte, autresFonctions.js exécute d'autres fonctions (une seule dans mon exemple) et index.php appelle le tout.

Cordialement.

Merci beaucoup : ca répond exactement à ce que je cherchais. J'ai fais l'essai sur mon site et ca marche parfaitement.
J'ai une dernière question. Est il possible possible de décomposer la fonction loadapi en 2 javascript : une qui appelle la clé API, et l'autre qui définit les coordonnées GPS. Ou bien de ne garder qu'un seul script, mais de pouvoir passer en paramètres les valeurs "lon" et "lat" à partir de la page appellante ?

**dgrichard** · 12/05/2012, 15h19

Envoyé par philou63_51

Ou bien de ne garder qu'un seul script, mais de pouvoir passer en paramètres les valeurs "lon" et "lat" à partir de la page appellante ?

Et en inspirant cet exemple ?

**jeanluc35** · 12/05/2012, 23h03

Bonjour,

Envoyé par philou63_51

...Ou bien de ne garder qu'un seul script, mais de pouvoir passer en paramètres les valeurs "lon" et "lat" à partir de la page appellante ?

Tu as donc besoin de paramètres communs pour toutes tes pages et de paramètres dédiés à chacune de tes pages.
Pour les paramètres communs (dont la clé API), tu mets tous les paramètres dans un seul fichier.
Pour les paramètres dédiés, tu mets tous les paramètres propres à une page dans un seul fichier et en le nommant, par exemple paramPage1.js ; ou alors en mettant les paramètres directement dans la page appelante entre les balises script, voir :http://crhb.free.fr/topoguides/exemple1/.

**philou63_51** · 17/05/2012, 16h13

Envoyé par jeanluc35

Bonjour,

Tu as donc besoin de paramètres communs pour toutes tes pages et de paramètres dédiés à chacune de tes pages.
Pour les paramètres communs (dont la clé API), tu mets tous les paramètres dans un seul fichier.
Pour les paramètres dédiés, tu mets tous les paramètres propres à une page dans un seul fichier et en le nommant, par exemple paramPage1.js ; ou alors en mettant les paramètres directement dans la page appelante entre les balises script, voir :http://crhb.free.fr/topoguides/exemple1/.

Super. C'est tout a fait ce que je cherchais à faire : passer les coordonnées GPS de la carte en paramètres dans le fichier appelant. Mais je ne connaissais pas la syntaxe associée en javascript.
Encore merci à tous pour ces bons tuyaux.

Partage de l'API sur plusieurs pages WEB

IGN API Géoportail

Discussions similaires

Partager

Partager