Discussion :

[cmail]

Page d'essai: http://43.lignon.free.fr/cadastre/indexEyeFish0.html

Problème: Comment attribuer aux différentes images (représentant des boutons) de ma barre d'outils style iFishEye, les propriétés et actions des boutons initiaux (Déplacement, zoom, calcul distance et surface, etc.) du géoportail?

Coté iFishEye, je dois introduire dans le lien <a> une fonction à l'évènement onclick... Mais j'ai quelques soucis (vu mes compétences JS) pour déterminer cette fonction...

Un petit exemple de codage serait apprécié...
Merci à tous

[mga_geo]

J'ai l'impression qu'OpenLayers veut maitriser les icônes via son "displayClass" cf

new OpenLayers.Control.Button({
title: "Sauvegarde",
trigger: function (layer) {
oJSON.saveFeatures(layer)
},
displayClass: "olControlSaveFeatures"
}),

Il va donc falloir trouver les fonctions internes d'OL et non plus les fonctions "publiques".

Sur mon XP/FF3.6.8, l'affichage de la partie droite est absent ainsi que le bas de la carte.

Sinon, c'est sympa comme vue, pas pour les mamy ?

[cmail]

J'ai l'impression qu'OpenLayers veut maitriser les icônes via son "displayClass" cf

Il va donc falloir trouver les fonctions internes d'OL et non plus les fonctions "publiques".

Aye, Aye, Aye...

Sur mon XP/FF3.6.8, l'affichage de la partie droite est absent ainsi que le bas de la carte.

Ok, mais c'est une page d'essai fait à la va vite, de bric et de broc, pour initier le débat sur le point central de la discussion : iFishEye.

Sinon, c'est sympa comme vue, pas pour les mamy ?

Cela ne complique pas beaucoup (pour les mamys) et c'est dans l'air du temps. Et puis c'est assez adapté à la presbytie de nos ainés...
Reste à rendre cela opérationnel. Et là, je suis dans la semoule depuis quelques temps...

[dgrichard]

Ok, mais c'est une page d'essai fait à la va vite, de bric et de broc, pour initier le débat sur le point central de la discussion : iFishEye.

C'est un bon sujet pour les développeurs en tout cas

Globalement, les contrôles sont pilotés par deux concepts pour le rendu et une pilée de méthodes pour les évènements...
Pour le rendu, mga_geo a raison le premier levier, c'est displayClass (options à la création). Deux méthodes :
* le surcharger ;
* ré-écrire le contrôleur avec le nouveau displayClass :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
iFishEyesControl= new OpenLayers.Class(OpenLayers.Control.XXX,{displayClass:"ifisheyesXXX"});
...
var btn= new iFishEyesControl();

cà, c'est fastoche ...
Le côté rigolo, c'est que pour s'afficher les contrôles, il faut passer par la méthode draw() publique ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
draw(px) {
....
return this.div;
}

* px est la position (en pixel relative au conteneur parent si j'ai bonne mémoire, paramètre optionel).
* this.div est la div (si elle n'est pas créée à l'initialisation).

Une piste pourrait être :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
iFishEyesControl= new OpenLayers.Class(OpenLayers.Control.XXX,{displayClass:"ifisheyesXXX"});
...
var btn= new iFishEyesControl({div:contenerifisheye});

Mais, j'ai pas regardé iFishEyes/MooTools dans les yeux pour savoir si ce raisonnement est valable avec ces bibliothèques. Pour rappel, GeoExt vise aussi à cela.

[cmail]

Merci à vous, les amis, de prendre en considération mes questions...
Il va falloir un peu de temps pour digérer vos infos... S'il y a d'autres conseils préliminaires, n'hésitez pas!
Et comme le dit DgRichard

cà, c'est fastoche ...

... Pour qui?

[dgrichard]

En utilisant l'huile de coude et OpenLayers/API uniquement, on peut faire quelque chose comme cela :

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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
    function omo(evt) {
        if (!evt || !evt.element) { return; }
        if (this.enhanced===true) { return; }
        var div= evt.element;
        this.enhanced= true;
        var bgi= OpenLayers.Element.getStyle(div, 'background-image');
        div.style.backgroundImage= 'none';
        var img= div.ownerDocument.createElement('img');
        img.src= bgi.replace(/^\s*url\("?/,'').replace(/"?\)\s*$/,'');
        img.width= 2*this.w;
        img.height= 2*this.h;
        img.style.top= (-this.w/2)+"px";
        img.style.left= (-this.h/2)+"px";
        img.style.position= "relative";
        this.mouseEvents.un({
            'mouseover': omo
        });
        div.appendChild(img);
        OpenLayers.Event.stop(evt);
    }

    function omucl(obj, div) {
        div.style.backgroundImage= "";
        if (div.childNodes.length>0) {
            div.removeChild(div.childNodes[0]);
        }
        obj.enhanced= false;
    }

    function omu(evt) {
        if (!evt || !evt.element) { return; }
        var div= evt.element;
        if (this.enhanced!==true) { return; }
        if (!((this.x<=evt.clientX && evt.clientX<this.x+this.w) &&
              (this.y<=evt.clientY && evt.clientY<this.y+this.h))) {
            omucl(this, div);
            this.mouseEvents.on({
                'mouseover': omo
            });
        }
        OpenLayers.Event.stop(evt);
    }

    function _addEnhanceEffectOnControl(control) {
        var pfDestroy= control.destroy;
        control.destroy= function() {
            if (this.enhance) {
                if (this.enhance.mouseEvents) {
                    this.enhance.mouseEvents.destroy();
                    this.enhance.mouseEvents= null;
                }
            }
            pfDestroy.apply(this,arguments);
        };
        var p= OpenLayers.Util.pagePosition(control.panel_div);
        control.enhance= {};
        control.enhance.mouseEvents= new OpenLayers.Events(control.enhance, control.panel_div, null, true);
        control.enhance.w= parseInt(OpenLayers.Element.getStyle(control.panel_div, 'width'));
        control.enhance.h= parseInt(OpenLayers.Element.getStyle(control.panel_div, 'height'));
        control.enhance.x= p[0];
        control.enhance.y= p[1];
        control.enhance.mouseEvents.on({
            'mouseover': omo,
            'mouseout' : omu
        });
    }

    function _addEnhanceEffect(panel) {
        var pfOnClick= panel.onClick;
        panel.onClick= function(ctrl, evt) {
            if (ctrl.enhance) {
                omucl(ctrl.enhance, ctrl.panel_div);
            }
            pfOnClick.apply(panel,arguments);
            if (ctrl.enhance) {
                ctrl.enhance.mouseEvents.on({
                    'mouseover': omo
                });
            }
        };
        for (var i= 0, l= panel.controls.length; i<l; i++) {
            var cntrl= panel.controls[i];
            OpenLayers.Event.stopObserving(
                cntrl.panel_div,
                "click",
                OpenLayers.Function.bind(pfOnClick, panel, cntrl)
            );
            _addEnhanceEffectOnControl(cntrl);
            OpenLayers.Event.observe(
                cntrl.panel_div,
                "click",
                OpenLayers.Function.bind(panel.onClick, panel, cntrl)
            );
        }
    }

    function initGeoportalMap() {
        if (__Geoportal$timer) {
            window.clearTimeout(__Geoportal$timer);
            __Geoportal$timer= null;
        }
        if (typeof(OpenLayers)=='undefined'       ||
            typeof(Geoportal)=='undefined'        ||
            typeof(Geoportal.Viewer)=='undefined') {
            __Geoportal$timer= window.setTimeout("initGeoportalMap();", 100);
            return;
        }
        if (!viewer) {
            OpenLayers.Lang.setCode('fr');
            geoportalLoadviewer("GeoportalMapDiv", "normal", "FXX");
            if (viewer) {
                viewer.addGeoportalLayers(
                    ['ORTHOIMAGERY.ORTHOPHOTOS:WMSC', 'GEOGRAPHICALGRIDSYSTEMS.MAPS:WMSC'],
                    {
                        'GEOGRAPHICALGRIDSYSTEMS.MAPS:WMSC': {visibility:false},
                        global:{
                            visibility:true
                        }
                    });
                viewer.getMap().setCenter(viewer.viewerOptions.defaultCenter,viewer.viewerOptions.defaultZoom);
            }
        }
        if (viewer) {
            if (!viewer.isMapReady()) {
                __Geoportal$timer= window.setTimeout("initGeoportalMap();", 100);
                return;
            }
            var nv= viewer.getMap().getControlsByClass('Geoportal.Control.NavToolbar')[0];
            _addEnhanceEffect(nv);
        }
    }

Maintenant, en baladant la souris sur les icônes du menu de navigation, elle sont affichées en double taille tout en continuant à réagir au clic.
Cette preuve de concept peut bien sûr être améliorée

(testé sous FF seulement)

[cmail]

Merci DGRichard...
Aujourd'hui, j'ai étudié GeoExt (extension de Ext-JS) qui me semblait assez prometteur surtout du fait que ce projet tourne directement sur la mise en page de OpenLayer (donc probablement assez facile à adapter à Géoportail)...
Avant de bidouiller pour rendre opérationnel iFishEye, il vaut mieux voir ce qui est connexe et évaluer la pertinence (et surtout une certaine appropriation par Mézigue) des solutions possibles...

Et puis voilà ta proposition qui me recentre... Très heureux.
Je testerai donc cela les jours qui viennent, en laissant Ext-JS de coté (momentanément)