Discussion :

[trukker]

En regardant l'exemple du site ign : geoportalalert avec firebug, j'ai vu que la feuille de style framedcloud.css ne se charge pas et dans le code source, version 1.1, téléchargé hier, le fichier est vide 0 ko !

[m_robert]

La feuille de style framedcloud.css fait partie du code source Openlayers. Depuis la version 2.8, le fichier a été vidé mais est conservé...

Pas d'impact donc du côté API Géoportail hormis le chargement d'un fichier de 0Ko

[trukker]

Merci pour la réponse.

[Zébulon-21]

Pour modifier l'aspect des popups FramedCloud, je suppose qu'il faut :

1) Modifier l'image cloud-popup-relative.png

2) Surcharger le style FramedCloud.css

Mais sur ce dernier point, j'essaye de récupérer ce fameux fichier FramedCloud.css sur le site de l'API en me basant sur les URL données ICI, mais sans succès.

Ce fichier CSS est-il encore disponible à l'API et, le cas échéant, serait-il possible d'indiquer son URL ?

[dgrichard]

Ce fichier CSS est-il encore disponible à l'API et, le cas échéant, serait-il possible d'indiquer son URL ?

Oui

Sur dépot

En production

[Zébulon-21]

Merci Didier mais comme indiqué précédemment par Trukker ces fichiers sont vides.

Ils existaient, semble-t-il, jusqu'à la v.1.1 chez l'API mais où

[dgrichard]

Merci Didier mais comme indiqué précédemment par Trukker ces fichiers sont vides.

Eh oui, OpenLayers les a vidé car ils ne servent plus ...

Ils existaient, semble-t-il, jusqu'à la v.1.1 chez l'API mais où

Ils existent toujours vides. On a retiré les archives ... Pour les avoir, il suffit d'aller sur OpenLayers (vide depuis OpenLayers 2.8)

[Zébulon-21]

Bigre, me v'la bien avancé

Le lien OpenLayers ne contient que ça :

Code :

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

1
2
3
4
.olFramedCloudPopupContent {
    padding: 5px;
    overflow: auto;
}

Faut-il donc aller à la pêche avec Firebug (vu mon aisance, il y en a pour la journée).

Je lance donc un appel à la communauté, dès fois que...

[dgrichard]

As-tu jeté un oeil à celui-là ?

[Zébulon-21]

Ce n'est pas vraiment à la portée du 1er venu de dépatouiller ce qui concerne la popup "framedcloud" parmi ce code "multi-popups".

Le fichier CSS ne semble pas spécifique à la FramedCloud non plus ?

Ceci dit, j'ignore s'il est vraiment possible d'afficher une FramedCloud customisée (couleurs différentes) et ceci grâce à une simple surcharge CSS.

Reste à tester la chose en récupérant le code source CSS OpenLayers à partir d'un exemple simple, mais c'est pas gagné.

[Zébulon-21]

j'ai un peu avancé sur cette page de tests.

En définitive, le popup FramedCloud est construit avec 5 images que je surcharge en CSS avec ce code :

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
#chicken_FrameDecorationImg_0 {
	background-image: url(../archives/images/cloud-popup-relative.png) !important;
}
#chicken_FrameDecorationImg_1 {
	background-image: url(../archives/images/cloud-popup-relative.png) !important;
}
#chicken_FrameDecorationImg_2 {
	background-image: url(../archives/images/cloud-popup-relative.png) !important;
}
#chicken_FrameDecorationImg_3 {
	background-image: url(../archives/images/cloud-popup-relative.png) !important;
}
#chicken_FrameDecorationImg_4 {
	background-image: url(../archives/images/cloud-popup-relative.png) !important;
}

Pour faciliter les tests, l'image d'origine est transformée en un rectangle rouge de 1276 x 736px.

La couleur rouge apparait bien mais seulement au second plan du popup, et le z-index est sans effet (sauf pour masquer le contenu).

Il ne manque plus qu'une astuce pour faire passer au second plan les images OpenLayers, et tu as même ébauché une soluce sur une ancienne discussion.

Tu peux jouer avec le style .olFramedCloudPopupContent pour la couleur de fond par exemple, mais la bulle restera blanche

Mais aussi sur la propriété imageSrc à écraser à la main après la création de l'objet OpenLayers.Control.FramedCloud. Cette propriété utilise l'image suivante (issue d'OpenLayers)...

La démo manque évidemment à l'amateur lambda

[Zébulon-21]

Voir une ébauche de solution sur cette discussion.