Déclinaisons du style Anchored [Résolu]

[Zébulon-21]

Cet exemple de l'API montre des variantes intéressantes du popup Anchored mais, en l'état, le code n'est pas facilement exploitable à cause des menus (sélection de langues étrangères et de styles) qui sont dédiés uniquement à la démo.

J'essaye donc d'en extraire une page fonctionnelle simplifiée, dans un style de popup unique (ex "Anchored.css.Think"), que l'on pourrait ensuite décliner facilement.

Pour l'instant le test n'est pas très concluant :
- le style "css.Think" est aux abonnés absents,

La personnalisation de la carte n'est pas mieux réussie :
- comment spécifier les coordonnées du centre et le niveau de zoom ?
- comment ajouter un (ou plusieurs) fichier(s) KML ?
- comment afficher les onglets "Couches", "Outils" et "Informations" habituels.
- comment restaurer les bordures habituelles de la carte.

Un petit coup de main serait le bienvenu.

Merci par avance.

[tcoupin]

• Le style "css.Think" est bien définit mais n'est pas utilisé, voici la partie à modifier pour utiliser ce type de popup (ligne 407) :
  
  Code :

  var popupClassName= 'Geoportal.Popup.Anchored.Css.Think';

• Pour ce qui est du centre de la carte et du zoom, on peut les spécifier par la commande (voir cette page) :
  
  Code :

  viewer.getMap().setCenterAtLonLat(2.418611,48.842222,12);

  mais il faut penser à commenter cette ligne :
  Code :

  viewer.getMap().zoomToExtent(popups.getDataExtent(), true);

• L'ajout de couche KML est expliqué dans cette page

• Et pour les onglets et les bordures, il suffit de changer le type de viewer :
  
  Code :

  viewer= new Geoportal.Viewer.Default('viewerDiv', OpenLayers.Util.extend([...]));

  Les viewers disponibles sont Simple, Default, Standard (et Mobile).
  
  

[Zébulon-21]

Merci pour les conseils, très clairs et très bien documentés.

Sur cette page, en suivant tes indications on obtient bien tous les résultats souhaités et cette fois-ci c'est au niveau de la finalisation, lorsque le copier-coller ne suffit plus, qu'il subsiste quelques anomalies, par exemple :

- les pictos n'apparaissent pas,
- les popups restent ouvertes,
- le style "css.Think" n'est plus appliqué lorsqu'on désactive puis réactive une couche...


Il reste peut-être encore du code qui ne s'impose plus dans cette page sans le menu de sélection des styles ?

[tcoupin]

En regardant rapidement la console, il manque 4 images comme par exemple

Code :

http://www.valroc.net/ESSAI/html/images/house-Y.png

Après, quand j'essaye de fermer la popup, il y a une autre erreur :

Code :

Uncaught ReferenceError: unPopupFunc is not defined anchored-02.html:551

Et enfin pour ce qui est du style des popups, il est activé, tu définis ensuite l couche et enfin le style est remis à la valeur par défaut (ligne 570 à commenter)

Code :

1
2
  viewer.getMap().addControl(clickCtrl);
//viewer.setVariable('popupControler', clickCtrl);

J'espère que ça suffira, je ne pourrais pas répondre avant la semaine prochaine.

Bonne fêtes !

[Zébulon-21]

Envoyé par tcoupin

J'espère que ça suffira, je ne pourrais pas répondre avant la semaine prochaine.

Bonne fêtes !

En effet, j'ai voulu aller trop vite car je pressentais bien des congés de fin d'année.

Merci pour les indications, je corrige tout ça.

En attendant, bonnes fêtes également à toi et à tes proches.

[Zébulon-21]

Banc d'essai de cette page.

OK avec FF et Chrome, par contre IE pose quelques problèmes :

1). Le texte déborde en bas du popup, quel que soit le style.

2). Lorsqu'on ferme le popup avec la croix, l'élément qui a été désélectionné n'est plus cliquable, et le phénomène existe aussi sur la page d'exemple de l'API.


Au niveau du positionnement des popups, c'est son angle qui est dirigé sur le point d'origine mais pas la pointe de la flêche, et cela quel que soit le style (démo ci-dessous).

Peut-on corriger cela car les paramètres des lignes 212 à 215 permettent seulement d'ajuster la flèche sur le popup.

- Style Think

- Style Bubble

- Style Tip

- Style Classic

- Style Shadow

- Style Black

[tcoupin]

Je viens de regarder sous IE9 et je n'ai pas les problèmes 1) et 2) Mystère...

En revanche pour le positionnement, il y a une solution
Dans la définition de Geoportal.Popup.Anchored.Css, il faut rajouter la méthode calculateNewPx (comme dans le code de l'exemple)

Code :

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
/**
     * Méthode API : setSize
     * Mise à jour des blocs lorsque la taille de popup change.
     *
     * Paramètres :
     * contentSize - {<OpenLayers.Size>} nouvelle taille de la popup (en pixels).
     */
    setSize:function(contentSize) {
        Geoportal.Popup.Anchored.prototype.setSize.apply(this, arguments);
        this.createBlocks();
    },
	
    /**
     * Method: calculateNewPx
     *
     * Parameters:
     * px - {<OpenLayers.Pixel at http://dev.openlayers.org/docs/files/OpenLayers/Pixel-js.html>}
     *
     * Returns:
     * {<OpenLayers.Pixel at http://dev.openlayers.org/docs/files/OpenLayers/Pixel-js.html>} The the new px position of the popup on the screen
     *     relative to the passed-in px.
     */
    calculateNewPx:function(px) {
       var newPx= Geoportal.Popup.Anchored.prototype.calculateNewPx.apply(this, arguments);

        var top= (this.relativePosition && this.relativePosition.charAt(0) == 't');
        newPx.y += (top? -this.csize.h : this.csize.h);

        var left= (this.relativePosition && this.relativePosition.charAt(1) == 'l');
        newPx.x += (left? this.csize.w/2+this.dOffset : -this.csize.w/2-this.dOffset);

        return newPx;
    }

[Zébulon-21]

Maintenant le positionnement est normal.

Pour la question 1) de débordement de texte, c'était lié à la syntaxe html.

Apparemment, avec IE8 - et seulement sur la page inspirée de l'exemple API - il faut finir comme ceci :
"</font></div>" + "<br />",

Dans les autres cas on peut se contenter de terminer le texte avec "</font>"


Pour la question 2) j'ai cru comprendre que tu avais constaté la même chose avec IE9, qu'avec IE8, lorsqu'on ferme avec la croix ?

[tcoupin]

je n'ai testé que sous IE9 et je n'avais pas ce problème d'élément plus sélectionnable.

[Zébulon-21]

Je mets donc ce sujet "Résolu" car le problème d'élément non sélectionnable déborde du sujet Anchored puisqu'il se produit aussi sur les exemples fournis par l'API.

S'il y a une solution, je suis preneur quand même.

Merci pour ton aide efficace.

[tcoupin]

J'ai aussi essayé avec IE8 et j'ai bien le problème.
J'ai essayé plusieurs choses mais rien de concluant.

Si on trouve la raison, on reviendra te le dire

[tcoupin]

il faut modifier la callback lors du click sur la croix :

Code :

1
2
3
4
5
6
7
function(evt) {
    if (this.feature) {
        clickCtrl.unselect(this.feature);
        //unPopupFunc(this.feature);
    }
},

L'exemple sur le site de l'api va bientôt être modifié

[Zébulon-21]

Impec !

Donc, merci à Didier et…

Une bonne pause St Sylvestre à toute l’équipe de l’IGN.

[Zébulon-21]

J'essaye d'exploiter en dehors du style Anchored le code donné par Didier, mais cette fois-ci la croix de fermeture de popup n'a plus d'effet sous aucun navigateur.

Je suppose que la formule magique (lignes 230 à 238 de la page) mériterait une adaptation que je ne sais malheureusement pas faire.

S’il était possible de m'éclairer sur ce dernier point...

[tcoupin]

Dans les exemples précédents, le constructeur de popup avait été définit préalablement et surtout personnalisé notamment pour accepter un argument supplémentaire par rapport au constructeur fourni par openlayers : un feature (voir ligne 121 de cette page) d'où le f qui traîne à la ligne 414 juste après la définition de la callback de click sur la croix.

Maintenant, tu utilises un constructeur fournie par OpenLayers : OpenLayers.Popup.FramedCloud (documentation) et comme le montre la doc, il n'y a pas de feature. Pas de feature, pas de passage de la condition

Code :

1
2
3
4
5
6
7
8
function(evt) {
    if (this.feature) {
        // Corrige défaut fermeture popup avec IE8
        // http://www.developpez.net/forums/d1290245/applications/sig-systeme-dinformation-geographique/ign-api-geoportail/declinaisons-style-anchored/
        clickCtrl.unselect(this.feature);
    }
}

Il faut donc lui attribué un feature à la main à la ligne 240 :

Code :

1
2
3
popup.feature=f;
f.popup= popup;

[Zébulon-21]

Les bras m'en tombent tellement c'est limpide.

Dorénavant tout fonctionne parfaitement.

Merci à nouveau pour ton aide.