Une carte du GéoPortail dans un article

Mise à jour en juillet 2020 : cet article est devenu obsolète puisque je pense qu’il est maintenant plus simple d’utiliser le site macarte.ign.fr pour créer et publier une carte s’appuyant sur le Géoportail. J’ai cependant modifié un peu plus bas le code HTML “donné par le Géoportail”, car celui d’origine ne fonctionnait plus (l’IGN aime bien changer des choses sans tenir compte des usages précédents).

Donc, même si cet article ne raconte plus de bêtises, je vous conseille fortement de suivre les conseils que je vous donne dans l’article Insérer une (vraie) carte avec MaCarte.ign.fr pour créer et publier votre carte avec le Géoportail.

---

Le site du GéoPortail permet d’obtenir un code HTML à intégrer dans un site web pour afficher directement une carte dans un article. Il suffit de créer sa carte et de cliquer sur l’outil “Partager” à droite, qui offre deux possibilités :

• le “lien permanent” vers la carte qui renverra vers le site du GéoPortail et “rejouera” le contexte de la carte, même emplacement, même zoom, même informations.
• le code à inclure dans un site web pour obtenir, dans sa page, un cadre contenant la carte.

Démonstration :

Le code donné par le GéoPortail (Partager – “Copiez le code HTML pour intégrer la carte dans un site”) est le suivant. Il faut l’intégrer dans l’article en mode “Texte” et non pas en “Visuel” :

(signe plus petit que)iframe width=”600″ height=”400″ src=”https://www.geoportail.gouv.fr/embed/visu.html?c=-4.7597454845694305,48.35716753058645&z=11&l0=ORTHOIMAGERY.ORTHOPHOTOS::GEOPORTAIL:OGC:WMTS(1)&l1=GEOGRAPHICALGRIDSYSTEMS.MAPS.3D::GEOPORTAIL:OGC:WMTS==aggregate(1)&l2=GEOGRAPHICALGRIDSYSTEMS.COASTALMAPS::GEOPORTAIL:OGC:WMTS(1)&permalink=yes” allowfullscreen=””></iframe(signe plusgrand que)

La carte obtenue est la suivante :

Constatations :

• les dimensions de la carte sont inchangeables (600 x 400) malgré les paramètres height et width : en fait c’est uniquement le cadre dans lequel la carte s’inscrit qui verra ses dimensions augmenter avec ces paramètres (comment ça, ça ne sert à rien ! mais si, on peut mettre de la couleur de fond …).
• la carte est composée de trois couches : les images aériennes, les cartes IGN et le scan littoral. Le “lien permanent” vers la carte sur le site du GéoPortail permet de le vérifier : http://www.geoportail.gouv.fr/accueil?c=-4.7597454845694305,48.35716753058645&z=0.0005145738720140681&l=ORTHOIMAGERY.ORTHOPHOTOS::GEOPORTAIL:OGC:WMTS(1)&l=GEOGRAPHICALGRIDSYSTEMS.MAPS.3D::GEOPORTAIL:OGC:WMTS==aggregate(1)&l=GEOGRAPHICALGRIDSYSTEMS.COASTALMAPS::GEOPORTAIL:OGC:WMTS(1)&permalink=yes

• mais sur la carte incluse dans l’article WordPress, seule une couche apparaît et en plus ce n’est pas celle qui est située “en haut” sur le GéoPortail ;
• il n’y a pas non plus de “gestionnaire de couches” qui permettrait d’afficher ou de cacher l’une d’entre elles.

Des bugs ? Du GéoPortail ? De WordPress ?

Pas de WordPress en tout cas, car dans Spip, le résultat est le même.

Il semble plutôt que le “code” proposé par le GéoPortail est simplifié à l’extrême : la définition d’un cadre (“frame”) et l’appel à une URL du GéoPortail qui renvoie une image. Pas de javascript, ce qui interdit la moindre interactivité sur le poste client ; donc pas de gestionnaire de couches, donc une seule couche. Même si l’URL fait semblant de paramétrer plusieurs couches, seule la première est lue… Un point, c’est tout !

C’est pour cela aussi que les dimensions de la carte ne changent car l’image retournée par l’URL du GéoPortail est fixée par le serveur. Là aussi, pas d’interactivité.

Recommandations

• faire une carte la plus simple possible, avec une seule couche : les scans de l’IGN ou les photos aériennes. On pourrait croire que deux couches, dont l’une est surfacique et l’autre est constituée de lignes ou de points, pourraient se superposer. Mais non ! il n’en est rien, j’ai essayé, on s’arrête à la première couche citée dans l’URL …

On peut aussi essayer l’extension GéoPortail Shortcode Builder, qui permet d’utiliser l’API du GéoPortail dans WordPress et offre donc des possibilités supplémentaires, car il y a du vrai javascript dedans. Ce qui permet au poste client d’être beaucoup plus interactif avec le serveur qui délivre les images et de disposer d’outils pour manipuler ces images.

Par exemple, une fois l’extension installée, le code pour générer la carte ci-dessous est :

(crochet ouvrant)geoportail w=”600″ h=”500″/(crochet fermant)]

[geoportail w=”600″ h=”500″/]

Pas mal, non ? J’y reviendrai pour explorer les possibilités de cette extension.