Aller au contenu

Une infobulle à la GoogleMaps avec GeoExt#

📆 Date de publication initiale : 16 août 2009

Introduction#

Une des fonctionnalités qui me semble intéressante dans la librairie GoogleMaps et que je n'ai encore trouvé nulle part ailleurs est la possibilité d'afficher des infobulles avec des onglets. Mais avec l'arrivée de GeoExt et de sa classe Popup hautement personnalisable cela est dorénavant faisable. Regardons comment y arriver.

Création du popup#

L'objet Popup de GeoExt hérite de la classe Windows d'EXT. Dans celle-ci il est possible d'ajouter des éléments supplémentaires via la propriété items, dans notre cas nous y ajouterons un objet tabPanel.

Regardons en détail comment cela se passe :

var tab = new Ext.TabPanel({
    activeTab : 0
    ,border:false
    ,items: [{
        title: 'Texte',
        html : "Lorem ipsum dolor sit ame ... id est laborum"
    },{
        title: 'Image',
        html: 'another content'
    }]
});

popup = new GeoExt.Popup({
    feature    : e.feature
    ,closable   : false
    ,unpinnable : false
    ,collapse   : false
    ,collapsible: false
    ,resizable : false
    ,width      : 250
    ,height     : 250
    ,anchored   : true  
    ,layout : 'fit'
    ,items: [ tab ]
});

Comme vous pouvez le constater cela n'a rien de compliqué, juste une simple utilisation des composants de base d'Ext et de GeoExt.

Exemple#

Exemple de popup


Auteur·ice#

Arnaud Vandecasteele#

portrait

Bien qu'issu à l'origine d'un parcours universitaire (doctorat et post-doc), j'ai finalement tenté l'aventure entrepreunariale au travers de Geolab.
Mes principaux centres d'intêrets dans le domaine de la géomatique portent sur les logiciels Open Source et plus particulièrement QGIS.
J'aime également le développement informatique avec une forte préférence à tout ce qui se passe côté serveur (base de données, traitements, etc.). Côté techno, mes choix se portent habituellement sur du (Geo)Django et PostgreSQL/PostGIS.

Pendant mon temps libre, vous me trouverez un GPS à la main afin de contribuer à OpenStreetMap ou sur un tatami en train de pratiquer le Jiu-Jitsu Brésilien.

Si vous êtes intéressé par l'un ou tous ces sujets, n'hésitez pas à me contacter !

Commentaires

Afin de favoriser les échanges constructifs, merci de préférer le pseudonymat à l'anonymat. Pour rappel, l'adresse mail n'est pas exposée publiquement et sert principalement aux notifications de réponse. Les commentaires sont automatiquement republiés sur nos réseaux sociaux pour favoriser la discussion. Consulter la page sur la confidentialité et les données personnelles.
Une version minimale de la syntaxe markdown est acceptée pour la mise en forme des commentaires.
Propulsé par Isso.

Ce contenu est sous licence Creative Commons BY-NC-SA 4.0 International Pictogramme Creative Commons Pictogramme Creative Commons BY Pictogramme Creative Commons NC Pictogramme Creative Commons SA