API IGN et BLOG ?

**leonweb73** · 07/05/2010, 11h45

Bonjour, j'aimerais savoir si l'API IGN fonctionne lorsqu'elle est intégrée dans un blog.
Si oui lesquelles ? et de quelle manière l'intégrer ?
Est-ce possible de faire apparaitre une carte dans un message ou bien uniquement dans un module html/javascript ?

Personnellement je n'arrive pas à faire apparaitre une carte sur un blog hébergé par Blogger.

Si certains d'entre vous on des exemples concret de blog perso utilisant l'API IGN merci de nous faire partager votre expérience.

Merci d'avance.

**dgrichard** · 08/05/2010, 13h13

Nous avons utilisé l'API dans SPIP, Joomla, MediaWiki, WordPress seulement.

A priori, il ne devrait pas y avoir d'autres problèmes que celui de l'écrasement des CSS par les blogs

**achaumet** · 22/05/2010, 15h49

J'ajoute à la liste Dotclear :et ça fonctionne ici chez Blogger

**basti1n** · 09/09/2010, 17h00

Serait-il possible d'avoir un example de code a utiliser?

J'ai essaye le code donne par geoportail et celui par GPSpassion
mais le probleme est l ememe lorsque je colle ce code en mode html de ma page de mon blog les parties de debut et de fin disparaissent.
Il ne me reste plus que le code entre les balises <script>.

Quelqu'un pourrait il m'eclaircir?

**dgrichard** · 09/09/2010, 22h55

Envoyé par basti1n

Quelqu'un pourrait il m'eclaircir?

Il faudrait chercher dans les plugins d'over-blog s'il y a la possibilité d'ajouter du javascript dans une page du blog (un parcours rapide de leur documentation utilisateur ne donne pas d'informations).

Peut-être en demandant à un forum spécialisé sur l'outil ?

**basti1n** · 10/09/2010, 11h48

il n'y a pas de probleme pour inserer du javascript a priori
il suffit d'ouvrir le mode appelle "editeur de source html"
lorsque je colle le code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Page web de test pour l'API du Géoportail</title>
<script src="http://api.ign.fr/api?v=1.0beta3&key=xxxxxxxxxxxxxxxxxxx&instance=map"></script>

<script type="text/javascript">
function initGeoportalMap() {

geoportalLoadmap("GeoportalMapDiv", "normal", "FXX");
if(map.allowedGeoportalLayers){
for (var i= 0; i<map.allowedGeoportalLayers.length; i++) {
var overloaded_options= null;
switch (map.allowedGeoportalLayers[i]) {
case 'GEOGRAPHICALGRIDSYSTEMS.MAPS': // cartes
overloaded_options= {
opacity: 0.8
};
break;
case 'ORTHOIMAGERY.ORTHOPHOTOS' : // ortho-photos
overloaded_options= {
visibility: false
};
break;
default :
break;
}
map.addGeoportalLayer(map.allowedGeoportalLayers[i],overloaded_options);
}
map.addLayer("KML", "Mon parcours 1", "mon_parcours_1.kml");
//map.addLayer("KML", "Mon parcours_2", "mon_parcours_2.kml");
map.setCenterAtLonLat(7.16497, 48.50079, 13);
}
}
</script>
</head>

<body style='width:100%;height:100%;border:0;margin:0;'>
<div id='GeoportalMapDiv' style='width:800px;height:600px;'></div>
</body>
</html>

il devient losque je le "met a jour":
<script src="http://api.ign.fr/api?v=1.0beta3&key=xxxxxxxxxxxxxxxxxxx&instance=map"></script>
<script type="text/javascript">// <![CDATA[
function initGeoportalMap() {

geoportalLoadmap("GeoportalMapDiv", "normal", "FXX");
if(map.allowedGeoportalLayers){
for (var i= 0; i<map.allowedGeoportalLayers.length; i++) {
var overloaded_options= null;
switch (map.allowedGeoportalLayers[i]) {
case 'GEOGRAPHICALGRIDSYSTEMS.MAPS': // cartes
overloaded_options= {
opacity: 0.8
};
break;
case 'ORTHOIMAGERY.ORTHOPHOTOS' : // ortho-photos
overloaded_options= {
visibility: false
};
break;
default :
break;
}
map.addGeoportalLayer(map.allowedGeoportalLayers[i],overloaded_options);
}
map.addLayer("KML", "Mon parcours 1", "mon_parcours_1.kml");
//map.addLayer("KML", "Mon parcours_2", "mon_parcours_2.kml");
map.setCenterAtLonLat(7.16497, 48.50079, 13);
}
}
// ]]></script>

Est ce un probleme d'autorisation du code ou qlqch de ce genre?

**mramm** · 18/02/2011, 12h52

Envoyé par dgrichard

Nous avons utilisé l'API dans SPIP, Joomla, MediaWiki, WordPress seulement.

A priori, il ne devrait pas y avoir d'autres problèmes que celui de l'écrasement des CSS par les blogs

Bonjour,

je travaille pour un syndicat mixte et souhaite proposer l'API IGN aux communes qui vont utiliser wordpress.
J'ai donc testé hier avec le code ci-dessous et cela ne fonctionne pas.

J'ai désactivé tous les plugins et l'éditeur visuel : le résultat est un grand cadre vide : http://wordpress4.sommenumerique.fr/cartographie/

Lorsque j'essaie avec le plugin "Inline Javascript Plugin" et les instructions adéquates, je vois le cadre de l'API, mais pas la carte.

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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.0&amp;key=xxxxxxxxxxxxxxx&amp;instance=VISU">
  <!-- -->
  </script>

  <script type="text/javascript">
  <!--
    function initGeoportalMap() {
      // Par défaut on se positionne sur la France métropolitaine :
      // Default to France main land :
      geoportalLoadVISU("GeoportalVisuDiv");

      // Avec un code territoire (ici la Guadeloupe), on peut choisir son point de vue
      // Snapshot with a territory code (here Guadeloupe island)
      // geoportalLoadVISU("GeoportalVisuDiv", "normal", "GLP");

      if (VISU) {
        VISU.addGeoportalLayers();
      }

      VISU.getMap().setCenter(VISU.viewerOptions.defaultCenter,VISU.viewerOptions.defaultZoom);
    }
  -->
  </script>
  <style type="text/css">
  <!--
  div#GeoportalVisuDiv {
    width:800px;
    height:600px;
  }
    -->
  </style>
</head>
<body>
  <div id="GeoportalVisuDiv"></div>
</body>
</html>

Merci d'avance de votre aide

**mga_geo** · 18/02/2011, 13h42

Il trouve une erreur ligne 69:

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></p>
<p>  <script type="text/javascript">
  <!--
    function initGeoportalMap() {
      // Par défaut on se positionne sur la France métropolitaine :
      // Default to France main land :
      geoportalLoadVISU("GeoportalVisuDiv");</p>
<p>      // Avec un code territoire (ici la Guadeloupe), on peut choisir son point de vue
      // Snapshot with a territory code (here Guadeloupe island)
      // geoportalLoadVISU("GeoportalVisuDiv", "normal", "GLP");</p>
<p>      if (VISU) {
        VISU.addGeoportalLayers();
      }</p>
<p>      VISU.getMap().setCenter(VISU.viewerOptions.defaultCenter,VISU.viewerOptions.defaultZoom);
    }
  -->
  </script></p>

Les "<p>" dans du code Javascript sont à l'origine de l'erreur.
Ces "<p>" sont probablement produits par WordPress sur l'inclusion du code javascript. Mediawiki, que j'utilise, a ce genre de comportement et il faut un peu ruser.

**mramm** · 18/02/2011, 15h56

Bonjour l'ami de Firebug (je ne connaissais pas cet outil),

Merci, j'ai supprimé qq balises <p> comme tu me l'indiquais et cela apparait maintenant dans l'article sans utiliser un quelconque plugin, comme quoi désactiver l'éditeur visuel qui retravaille le code n'empêche pas WordPress de ne pas ajouter ses propres balises.
Il me reste encore pas mal de boulot pour que l'affichage soit correct, mais l'essentiel est là. Bref, merci.

En revanche, je viens de m'apercevoir d'une autre erreur que j'avais faite, je l'ajoute : mon contrat était pour www.sommenumerique.fr et non ce que je prenais pour un simple sous domaine http://wordpress.sommenumerique.fr : c'est pourquoi les cartes ne s'affichaient pas sur ce dernier. J'ai créé un nouveau contrat en précisant bien l'URL http://wordpress.sommenumerique.fr et tout fonctionne.

Et merci (enfin !) à l'IGN. Sans être hyper chauvine, je trouve ça mieux de mettre les cartes de l'IGN sur les sites des communes que notre cher "désormais indispensable outil de tous les jours"

Mylène

**mramm** · 18/02/2011, 17h00

Re-bonjour,

Je termine l'implémentation de l'API IGN sur un site WordPress, comme je suis très contente du résultat, je copie/colle la méthode et le code ci-dessous qui donne le résultat suivant : http://wordpress.sommenumerique.fr/c...de-la-commune/
En effet, comme l'évoquent les posts précédents, le code livré sur le contrat IGN est réinterprété par WP, qui lui ajoute des < /BR> et des < /P>.

1. J'ai désactivé tous les plugins (extensions > tout sélectionner > désactiver).
2. J'ai désactivé l'éditeur visuel de votre profil (on doit aussi tout simplement dans l'article ou la page pouvoir passer par une rédaction en mode html plutôt que visuel). Cela n'empêche pas WP de réinterpréter des bidules, c'est pourquoi je mets le code qui fonctionne sur mon WP ci-dessous.
3. Dans votre page ou article (mode html) : copier coller le code ci-dessous
4. Remplacer les xxxxxxxx par votre code de contrat API IGN, remplacer les paramètres de longitude, latitude, zoomsetCenterAtLonLat(2.34, 49.89, 14) par les vôtres, régler la largeur de votre carte ( width:1000px; ).
5. Réactiver les plugins et l'éditeur visuel si vous l'avez désactivé.

Attention, l'apparence peut être différente selon le thème choisi...

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><script
    type="text/javascript"
    src="http://api.ign.fr/geoportail/api?v=1.0&amp;key=xxxxxxxxxxxxxxxx&amp;instance=VISU">
  <!-- -->
  </script> <script type="text/javascript">  <!--
    function initGeoportalMap() {
      // Par défaut on se positionne sur la France métropolitaine :
      // Default to France main land :
      geoportalLoadVISU("GeoportalVisuDiv");
      // Avec un code territoire (ici la Guadeloupe), on peut choisir son point de vue
      // Snapshot with a territory code (here Guadeloupe island)
      // geoportalLoadVISU("GeoportalVisuDiv", "normal", "GLP");
      if (VISU) {
        VISU.addGeoportalLayers();
      }
   VISU.getMap().setCenterAtLonLat(2.34, 49.89, 14);
    }
  -->  </script>
  <style type="text/css">
  <!--
  div#GeoportalVisuDiv {
    width:1000px;
    height:600px;
  }
    -->  </style></head><body><div id="GeoportalVisuDiv"></div></body></html>

mylène.

**basti1n** · 27/09/2010, 12h58

Merci pour vos reponses
le code n'a pas marche, je me penche comme suggere sur les forums dedies au javascript.
J'avais evidement remarque que

la version 1.0beta3 n'est plus au gout du jour

Je ne vais pas deranger plus sur ce forum reserve au professionel. Il est bien domage qu'il n'y ait pas plus de forum sur l'utilisation pour les sites perso et les blogs, mais cela se developpera surement.

**dgrichard** · 27/09/2010, 20h19

Envoyé par basti1n

Je ne vais pas deranger plus sur ce forum reserve au professionel. Il est bien domage qu'il n'y ait pas plus de forum sur l'utilisation pour les sites perso et les blogs, mais cela se developpera surement.

On compte sur les volontaires ...

Sinon, tu nous déranges pas, c'est simplement que l'on utilise pas ton outils

**basti1n** · 28/09/2010, 22h28

Ca y'est j'ai pu aboutir a un code qui m'affiche le cadre geoportail grace au forum d'over-blog que voici

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
<div id="GeoportalVisuDiv">
    &nbsp;
  </div>
<script src="http://api.ign.fr/geoportail/api?v=1.0&amp;key=6240857737075228043&amp;instance=VISU" type="text/javascript">
</script>
<script type="text/javascript">// <![CDATA[
    function initGeoportalMap() {

 

      geoportalLoadVISU("GeoportalVisuDiv");


      if (VISU) {

        VISU.addGeoportalLayers();

      }


      VISU.getMap().setCenter(VISU.viewerOptions.defaultCenter,VISU.viewerOptions.defaultZoom);

    }
// ]]></script>
<style type="text/css"><!--
  div#GeoportalVisuDiv {
    width:600px;
    height:500px;
  }
--></style>

cependant comme je dis je n'ai que le cadre. J'ai pensé que je n'avais peut etre pas appelé les couches ou que ma clef ne marchait pas.

J'ai donc essayé un code plus complet avec un morceau pris dans la doc API:

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
<div id="GeoportalVisuDiv">
    &nbsp;
  </div>
<script src="http://api.ign.fr/geoportail/api?v=1.0&amp;key=6240857737075228043&amp;instance=VISU" type="text/javascript">
</script>
<script type="text/javascript">// <![CDATA[
    function initGeoportalMap() {

 

      geoportalLoadVISU("GeoportalVisuDiv");


    if (VISU.getMap().allowedGeoportalLayers) {
    for (var i= 0; i<VISU.getMap().allowedGeoportalLayers.length; i++) {
        var overloaded_options= null;
        var couche= VISU.getMap().allowedGeoportalLayers[i];
        if (couche.match(/^GEOGRAPHICALGRIDSYSTEMS.MAPS/)) {// maps
            overloaded_options= {
                                    opacity: 1.0
            };
        } else if (couche.match(/^ORTHOIMAGERY.ORTHOPHOTOS/)) {// orthophotos
            overloaded_options= {
                                    visibility: false
            };
        }
        VISU.addGeoportalLayer(couche,overloaded_options);
    
}

      }
 

    }
// ]]></script>
<style type="text/css"><!--
  div#GeoportalVisuDiv {

    width:600px;

    height:600px;

  }
--></style>

pageperso

Pensez-vous que ca vient de ma clef ou de mon code?

**mga_geo** · 29/09/2010, 06h21

Je viens de tester le lien http://fondus.over-blog.com/article-...-57827786.html sous Firefox avec Firebug actif.
Dans l'onglet réseau, il a une réponse "403 Interdit" à la demande de token (http://jeton-api.ign.fr/getToken?key...8043.callback&).

Donc je pense que ta clé ne convient pas pour ce site!
Il faut vérifier qu'elle correspond bien au site http://fondus.over-blog.com

**basti1n** · 29/09/2010, 10h17

dans mon contrat API IGN le site enregistre est: http://fondus.over-blog.com/#
est-ce que le diese a la fin est un probleme?

API IGN et BLOG ?

IGN API Géoportail

Vue hybride

Discussions similaires

Partager

Partager