[1.0beta4]Affichage de popup

**Unusual** · 19/05/2009, 18h53

Bonjour,
Je voudrais savoir si l'affichage des popup peut se faire sans "déplacer" la carte. Je m'explique...lorsque le popup est affiché, il se centre sur la carte....et la carte se décale pour que l'élément cliqué (ayant déclenché le popup) soit en bas à gauche du popup...

Est-il possible de changer ce comportement ? Et si oui, comment ?

**dgrichard** · 19/05/2009, 19h39

Envoyé par Unusual

Bonjour,
Je voudrais savoir si l'affichage des popup peut se faire sans "déplacer" la carte. Je m'explique...lorsque le popup est affiché, il se centre sur la carte....et la carte se décale pour que l'élément cliqué (ayant déclenché le popup) soit en bas à gauche du popup...

Est-il possible de changer ce comportement ? Et si oui, comment ?

Par défault, l'API le fait ... Pour changer de comportement, il faut changer de classe de base (Geoportal.Popup.Anchored) et choisir une autre classe dans OpenLayers.Popup...
OpenLayers:
C'est la méthode draw() qui fait le boulot, elle appelle la méthode panIntoView() qui déplace la popup si la propriété (non documentée) panMapIfOutOfView est à true.
Geoportal:
La méthode draw() fait appel à panIntoView() tout le temps.

Il va falloir donc effectuer ceci (je suppose que l'on veuille créer des popup à partir de KML/GPX) :

Surcharger le callback onFeatureInsert pour qu'il n'utilise pas Geoportal.Popup.Anchored - le mieux est de tester les différents type de popup d'OpenLayers : OpenLayers.Popup.Anchored, OpenLayers.Popup.AnchoredBubble, OpenLayers.Popup.Framed et OpenLayers.Popup.FramedCloud - la page suivante donne l'apercu des possibles;
Si nécessaire, jouer avec le code de la classe choisie pour avoir le comportement souhaité ...

L'exemple WFS de l'API montre comment faire en mimiquant les popups Géoportail (déplacement au centre de l'image) avec des popup à la Google!

Globalement, il va aussi falloir que regarder comment faciliter cela depuis l'API (par exemple en passant une propriété poup donnant la classe à utiliser à l'instar de la propriété format !-)

**dgrichard** · 19/05/2009, 23h02

Voilà un exemple pris dans nos tests de développement qui utilise exclusivement OpenLayers :

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
   //variable globale:
    var selectedFeature;

   //fonction de création de popup:
    function createPopup(feature) {
        feature.createPopup= function() {
            var popupContent= 'contenu';
            var popup= new OpenLayers.Popup.Anchored("chicken",
                                this.geometry.getBounds().getCenterLonLat(),
                                new OpenLayers.Size(250,150),
                                popupContent, null, true, onPopupClose);
            this.popup= popup;
        }.bind(feature);
    }

    //fonction de fermeture de popup:
    //stop propagation de l'évènement
    //cache la popup
    //redessine l'objet
    //nettoyage
    //émission évènement desélection
    function onPopupClose(evt) {
        OpenLayers.Event.stop(evt);
        this.hide();
        selectedFeature.layer.drawFeature(selectedFeature, "default");
        OpenLayers.Util.removeItem(selectedFeature.layer.selectedFeatures, selectedFeature);
        selectedFeature.layer.events.triggerEvent("featureunselected", {feature: selectedFeature});
        onFeatureUnselect(selectedFeature);
    }// onPopupClose

    //callback de l'évènement "featureselected" :
    function onFeatureSelect(feature) {
        selectedFeature= feature;
        if (!selectedFeature.popup) {
            selectedFeature.createPopup();
        }
        viewer.getMap().addPopup(selectedFeature.popup);
    }// onFeatureSelect

    //callback de l'évènement "featureunselected" :
    function onFeatureUnselect(feature) {
        viewer.getMap().removePopup(feature.popup);
        feature.popup.destroy();
        feature.popup= null;
    }// onFeatureUnselect

    //création de la couche KML/GPX :
    var l= MAP.getMap().addLayer(
        new OpenLayers.Layer.Vector(
            "nom de la couche",
            {
                projection: MAP.getMap().getProjection(),
                onFeatureInsert: createPopup,
                format: OpenLayers.Format.KML,
                formatOptions:{
                    internalProjection: MAP.getMap().getProjection()
                }
            }
        )
    );

Voilà, globalement l'API fait tout celà et même plus ...

J'ai modifié le code de l'API (en développement) pour permettre au développeur de passer une option qui existe dans OpenLayers.Popup : panMapIfOutOfView.

Aujourd'hui, l'API ne considère pas cette option. Son comportement est de toujours re-centrer la popup (comme si panMapIfOutOfView était toujours à true).
Après la prochaine mise-à-jour, rien ne changera en apparance ... sauf si le développeur passe panMapIfOutOfView:false à la création de la couche!

**cmail** · 20/05/2009, 08h19

La prochaine mise à jour est prévue pour quand?

**Unusual** · 20/05/2009, 10h11

En fait, c'est ce que je fais déjà avec :

OpenLayers.Popup.FramedCloud

mais cela "m'oblige" à utiliser l'API étendue juste à cause de cette fonctionnalité...c'est dommage, non

**dgrichard** · 20/05/2009, 13h41

Envoyé par cmail

La prochaine mise à jour est prévue pour quand?

Quand j'aurai suffisamment de correctifs. Pour l'instant, je n'ai que :

- changement du curseur au dessus des pictos (KML/PGX);
- intégration d'OpenLayers.Format.KML 2.8 dans l'API (ExtendedData);
- possibilité de changer le comportement par défaut des popups.

Et à moins d'un boggue bloquant (comme celui des changements d'affichage en coordonnées cartésiennes), je préfère accumuler les patches que de pousser en production tous les jours ...

Au mieux, je ferai une mise à jour avant le 15 juin, au pire à la fin juin.

**dgrichard** · 20/05/2009, 13h42

Envoyé par Unusual

En fait, c'est ce que je fais déjà avec :

OpenLayers.Popup.FramedCloud

mais cela "m'oblige" à utiliser l'API étendue juste à cause de cette fonctionnalité...c'est dommage, non

Si je comprends bien : "API standard doit intégrer tous les types de Popup Openlayers ?"

Bon, pourquoi pô !

Une précision: l'API standard embarque les OpenLayers.Popup.Anchored*,elle embarquera donc toutes les popups au prochain correctif.

**cmail** · 20/05/2009, 19h45

C'est aussi une question qui me préoccupe énormément. En effet, le déplacement de la carte à l'affichage d'un popup n'est vraiment pas idéal pour une consultation rapide. Dans ce domaine, mon idéal serait:
1/ La carte ne bouge pas.
2/ Le popup s'affiche centré sur la zone carto du géoportail. Eventuellement, avoir la possibilité de l'ancrer à des coordonnées fixes du géoportail (par exemple le coin haut gauche du popup à une abscisse de 50 px et une ordonnée de 70 px par rapport au coin haut gauche du géoportail.

**dgrichard** · 20/05/2009, 22h48

Dans ce cas, l'exemple WFS donne toutes les informations nécessaires.

En le modifiant légèrement, les popups s'ouvrent systèmatiquement au centre de 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
function overRiver(feature) {
    if (feature) {
        if (!feature.popup) {
            var me= viewer.getMap().getExtent();
            var ll= me.getCenterLonLat();
            feature.popup= new OpenLayers.Popup.FramedCloud(
                "chicken",
                ll,
                null,
                "contenu",
                null,
                false);
        }
        if (feature.popup) {
            viewer.getMap().addPopup(feature.popup,true);
        }
    }
}

Toutes les variations sont ensuites possibles ...

**Zébulon-21** · 14/06/2010, 11h43

Envoyé par dgrichard

Si je comprends bien : "API standard doit intégrer tous les types de Popup Openlayers ?"
Bon, pourquoi pô !
Une précision: l'API standard embarque les OpenLayers.Popup.Anchored*,elle embarquera donc toutes les popups au prochain correctif.

J'ai l'impression que OpenLayers.Popup.AnchoredBubble ne fonctionne qu'avec API étendu (version 1.0).

Me trompe-je ?