IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

IGN API Géoportail Discussion :

Une nouvelle popup pour les nuls


Sujet :

IGN API Géoportail

  1. #1
    Membre averti Avatar de Zébulon-21
    Profil pro
    Inscrit en
    Mai 2009
    Messages
    392
    Détails du profil
    Informations personnelles :
    Localisation : France, Côte d'Or (Bourgogne)

    Informations forums :
    Inscription : Mai 2009
    Messages : 392
    Points : 315
    Points
    315
    Par défaut Une nouvelle popup pour les nuls
    Voici une nouvelle variante de page consacrée à info-bulle "Framedcloud", en complément à ma collection de modèles "pour les nuls"

    Est-il possible de retroucher le look de la bulle en ajoutant une couleur de fond par exemple ?

  2. #2
    Membre chevronné
    Profil pro
    Inscrit en
    Mai 2009
    Messages
    2 115
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2009
    Messages : 2 115
    Points : 1 763
    Points
    1 763
    Par défaut Couleur de fond
    As-tu essayé quelque chose comme:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    feature.popup.backgroundColor = "#CC99CC";

  3. #3
    Membre averti Avatar de Zébulon-21
    Profil pro
    Inscrit en
    Mai 2009
    Messages
    392
    Détails du profil
    Informations personnelles :
    Localisation : France, Côte d'Or (Bourgogne)

    Informations forums :
    Inscription : Mai 2009
    Messages : 392
    Points : 315
    Points
    315
    Par défaut
    Testé ICI : Toujours pareil

  4. #4
    Membre averti Avatar de Zébulon-21
    Profil pro
    Inscrit en
    Mai 2009
    Messages
    392
    Détails du profil
    Informations personnelles :
    Localisation : France, Côte d'Or (Bourgogne)

    Informations forums :
    Inscription : Mai 2009
    Messages : 392
    Points : 315
    Points
    315
    Par défaut
    Au fait, la forme particulière de la bulle "Framedcloud" ne proviendrait-elle pas d'une image et n'est-il pas nécessaire d'agir sur l'image elle-même pour modifier son aspect ?

    Le cas échéant, il resterait à trouver cette image avec ses styles CSS pour une gestion "locale", mais c'est peut-être très compliqué à faire ?

  5. #5
    Membre chevronné
    Profil pro
    Inscrit en
    Mai 2009
    Messages
    2 115
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2009
    Messages : 2 115
    Points : 1 763
    Points
    1 763
    Par défaut
    Il y a une page de tests des popups OpenLayers
    http://openlayers.org/dev/examples/popupMatrix.html

  6. #6
    Expert confirmé
    Homme Profil pro
    Ingénieur cartographe
    Inscrit en
    Avril 2009
    Messages
    3 173
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Ingénieur cartographe
    Secteur : Service public

    Informations forums :
    Inscription : Avril 2009
    Messages : 3 173
    Points : 4 224
    Points
    4 224
    Par défaut
    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)...

  7. #7
    Membre averti Avatar de Zébulon-21
    Profil pro
    Inscrit en
    Mai 2009
    Messages
    392
    Détails du profil
    Informations personnelles :
    Localisation : France, Côte d'Or (Bourgogne)

    Informations forums :
    Inscription : Mai 2009
    Messages : 392
    Points : 315
    Points
    315
    Par défaut
    Cette info du site Openlayers donne la piste pour écraser l'image d'origine FramedCloud.

    Par contre mon code n'est sans doute pas au point car la nouvelle image de popup ne s'affiche qu'au 2e clic.

    Page d'essai (modif à la ligne 87).

    Une idée d'où vient le problème ?

  8. #8
    Membre averti Avatar de Zébulon-21
    Profil pro
    Inscrit en
    Mai 2009
    Messages
    392
    Détails du profil
    Informations personnelles :
    Localisation : France, Côte d'Or (Bourgogne)

    Informations forums :
    Inscription : Mai 2009
    Messages : 392
    Points : 315
    Points
    315
    Par défaut Solution trouvée !
    En définitive, la solution était très simple.

    Il suffit de placer le code juste après la fonction de chargement de l'API (ligne 101 dans l'exemple).
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    OpenLayers.ImgPath = "images/mon-répertoire/";
    Par contre il est inutile de surcharger le CSS OpenLayers.

    Ensuite, on peut faire varier le style framedcloud à l'infini en modifiant simplement l'image "cloud-popup-relative.png" que l'on place dans le répertoire indiqué.

    - Variante 2

    - Variante 3

  9. #9
    Membre averti Avatar de Zébulon-21
    Profil pro
    Inscrit en
    Mai 2009
    Messages
    392
    Détails du profil
    Informations personnelles :
    Localisation : France, Côte d'Or (Bourgogne)

    Informations forums :
    Inscription : Mai 2009
    Messages : 392
    Points : 315
    Points
    315
    Par défaut
    Si cela peut être utile, voici quelques variantes du popup Framedcloud

    - Framedcloud "black"
    - Framedcloud "bubble"
    - Framedcloud "classic"
    - Framedcloud "shadow"
    - Framedcloud "think"
    - Framedcloud "tip"

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Google Apps : une nouvelle catégorie pour les applications éducatives
    Par Gordon Fowler dans le forum Cloud Computing
    Réponses: 0
    Dernier message: 26/01/2011, 17h23
  2. Réponses: 2
    Dernier message: 03/11/2010, 01h38
  3. Réponses: 8
    Dernier message: 11/07/2010, 03h03
  4. Réponses: 0
    Dernier message: 20/04/2010, 12h53
  5. Réponses: 0
    Dernier message: 13/04/2010, 13h26

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo