Discussion :

[eldoir]

Bonjour,
Je travaille actuellement sur un petit outil d'expertise immobilière et j'ai besoin, pour faire au mieux, d'utiliser les services du Géoportail.
Si je comprends bien, j'ai passé l'étape la plus difficile puisque je me suis procuré une clé.
Vous pouvez voir le résultat à l'adresse : http://arthurcousseau.com/haimmo.
Vous verrez vite ce qui cloche : chez moi en tous cas, la map n'affiche rien.
Pourtant, je n'ai aucun message d'erreur particulier dans la console.
Que fais-je mal ?
Mon JS est ci-dessous.
Je précise que ma clé possède une sécurisation de type "Referer", où j'ai entré l'adresse de mon site : http://arthurcousseau.com. Je ne sais pas si l'info peut être utile...
Merci d'avance de votre aide ! C'est un peu chaud pour mes fesses, je prépare ça pour le salon de l'habitat dans 3-4 jours donc j'espère que j'aurai une réponse rapide, sinon tant pis !

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
var map = Gp.Map.load(
        "map", // html div
        {
             // Geoportal access key obtained here : http://professionnels.ign.fr/ign/contrats
             apiKey: "y03cksifdshz3fb6tm36yzue",
             // Pour optimiser le temps de chargement
             configUrl: "js/autoconf.json",
             // map center
             center : {
                 location : "2 Promenade du Bout du Monde Angers"
             },
             // map zoom level
             zoom : 14,
             maxZoom: 19,
             // layers to display
             layersOptions : {
                "GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN-EXPRESS.STANDARD" : { },
                "CADASTRALPARCELS.PARCELS" : { }
             },
             // additional tools to display on the map
             controlsOptions : {
                 "search" : {
                     maximised : true
                 }
             }
        } 
    );

[IGNC_XT]

Le problème ne semble pas relever de la connexion aux géoservices car les couches sont bien appelées avec les zoom + et -.
Il semblerait plutôt que ce soit un pb de css comme si la carte était masquée par un élément au-dessus.

[eldoir]

Bonjour IGNC_XT,
Merci pour cette réponse.
J'ai vérifié mon CSS et je ne vois rien de spécial.
Si le fait de voir le + et le - prouve que la carte a bien été chargée, pourquoi ne voit-on pas la barre de recherche ? Et pourquoi le petit bouton "i" ne fait rien ?

[IGNC_XT]

La carte est bien chargée car dans les appels réseaux, j'ai les url d'appels aux géoservices :
http://wxs.ign.fr/y03cksifdshz3fb6tm...7&TileRow=5636
qui sont en 200.

Je pensais même que les + et - étaient bracnhés et à l'origine des appels mais non, ce n'est pas le cas.

[lboulanger]

Bonjour,

En effet c'est étrange !

Votre code pour afficher la carte est bon (fonctionne chez moi dans une interface très simple, avec juste une div "map"), d'ailleurs comme le précise IGNC_XT les images de la carte sont bien requêtées et bien réceptionnées (onglet Réseau de la console de développement), mais elles ne sont pas visibles, et les boutons inactifs...

Je dirais aussi qu'il faut regarder côté CSS, peut être en désactivant des surcouches bootstrap (pour tester) ?

[eldoir]

Bonjour lboulanger,
Merci pour cette suggestion ! Et merci également pour le petit "tip" de l'onglet Réseau, ça n'avait pas fait tilt et je ne savais pas où IGNC_XT avait été chercher cette info. Je pensais qu'il fallait des droits particuliers...
J'aurais dû écouter plus attentivement IGNC_XT dès son premier message, j'en suis désolé.
Ce n'est pas bootstrap qui semblait masquer la carte, mais bien jQuery Steps !
Et plus particulièrement, ce n'est pas le CSS qui semble poser problème, mais le JS. Car quand je désactive seulement le JS de ce plugin, mais que je conserve le CSS, la carte s'affiche bien.
Auriez-vous une idée de ce qui pourrait masquer la carte ? J'imagine que le plugin modifie des propriétés CSS à la volée et c'est ce qui masque la carte, et je me dis que c'est peut-être un problème que vous avez déjà rencontré.
Merci à vous deux ! Je posterai de nouveau si je trouve une solution ou un moyen de contournement, même si j'aimerais conserver ce plugin bien utile pour mes besoins...

[lboulanger]

OK, merci pour l'information !

Malheureusement je n'ai jamais utilisé jQuery Steps, donc je n'ai pas plus d'idée que vous... Il faudrait regarder l'utilisation que vous faites de ce plugin (quelles fonctionnalités sont appelées etc), pour identifier celle qui entre en conflit avec l'affichage de la carte.

Côté CSS, le rendu final de la carte (div "map") semble similaire à celui d'une carte qui fonctionne, donc je ne vois pas vraiment d'où vient le problème, je ne suis même pas sûre qu'ils soient surchargés en fait.

Pour info, l'API Géoportail se base sur l'API OpenLayers. C'est notamment OpenLayers qui va gérer l'affichage des tuiles (images requêtées) dans la div (en passant par un "canvas"). Si ça peut vous aider à investiguer (concernant les possibles conflits de fonctionnalités avec jQuery steps).

Autre chose, la barre de recherche ne s'affiche pas non plus : la div associée n'est même pas créée. Ce n'est donc pas simplement un problème CSS mais bien l'exécution du code qui n'est pas complète... (les autres outils s'affichent bien)

Bon courage pour l'investigation !

[eldoir]

J'ai plongé dans le JS (2000 lignes...) et je n'ai définitivement pas le temps de résoudre ça.
J'utilise donc un autre plugin pour gérer les pages de mon formulaire : jQuery Smart Wizard.
Le truc a 5 ans, mais au moins il est simple et bien documenté. Et surtout, il affiche ma carte sans souci !
Je passe en Résolu.
Merci encore à vous deux !

[lboulanger]

Tant mieux si ce nouveau plugin permet de gérer la carte et le formulaire sans conflit.

Pour information, quelques conseils pour votre application :

• vous interrogez une version de "développement" du SDK Géoportail, (https://ignf.github.io/geoportal-sdk/current/SDK-2D/ol3/GpOl3.js) mise à jour régulièrement avec les correctifs ou évolutions fonctionnelles, mais "instable" de fait,
  => pour la suite de vos tests, nous vous conseillons de vous baser sur une version stable du SDK (http://ignf.github.io/geoportal-sdk/.../2d/GpSDK2D.js par exemple).
  Pour une utilisation en production (lorsque votre application sera prête à être déployée), nous vous recommandons fortement de télécharger et héberger ces fichiers sur le serveur de votre application, pour que l'application se base sur une version stable.
• Dans les paramètres de Gp.Map.load(), il n'est pas nécessaire de spécifier "apiKey" et "configUrl" : seul l'un de ces paramètres suffit (par exemple configUrl si vous voulez optimiser le chargement de la configuration de la page)

[eldoir]

Merci pour ces quelques conseils !
J'utilise donc désormais la version de production.
En ce qui concerne le 2e conseil, à propos de configUrl, j'ai un petit bémol : si je ne mets plus l'apiKey dans les options de Gp.Map.load,
et que je laisse seulement configUrl, alors le "center" (endroit où j'initialise ma carte) ne semble plus avoir d'effet !
Il faut que je laisse l'apiKey pour que mon "center" initial soit pris en compte. Étrange...

[lboulanger]

OK autant pour moi alors, le paramètre apiKey doit en effet être nécessaire pour le centrage, qui utilise le service de géocodage du Géoportail (donc a besoin d'une clé de contrat Géoservices).
Donc il vous faut peut-être laisser ces deux paramètres au final

Bonne journée,
Laurane