API IGN et BLOG ?

**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 "" dans du code Javascript sont à l'origine de l'erreur.
Ces "" 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 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 et des .

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.

**mga_geo** · 18/02/2011, 18h27

As-tu essayé de remplacer api?v=1.0 par api?v=1.1 ou api?v=1.2 pour être au gout du jour ?

**dgrichard** · 19/02/2011, 17h37

Envoyé par mramm

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 et des .

Lors de l'inclusion d'un tel widget complexe dans un CMS, je conseillerais (en l'absence d'un plugin) :

1/ d'insérer une div de la taille voulue dans la page : elle sera le cadre de la fenêtre carto côté CMS;
2/ de mettre dans cette div une iframe : elle protègera la page pointée des CSS du CMS ;
3/ cette iframe est juste une page HTML classique qui ne sera pas interprétée par le CMS.

**mramm** · 21/07/2011, 14h19

Envoyé par mga_geo

As-tu essayé de remplacer api?v=1.0 par api?v=1.1 ou api?v=1.2 pour être au gout du jour ?

Je reviens qq mois après suite à un problème avec le thème par défaut de WP, et thanks a lot. Le fait de spécifier la version de l'API change tout.
Dire que je viens de passer deux bonnes heures à bidouiller la CSS ...

**dgrichard** · 06/08/2011, 16h55

[Résolu] ?

API IGN et BLOG ?

IGN API Géoportail

Discussions similaires

Partager

Partager