Aller au contenu

OpenLayers, pouvoir réaliser un "padding" dans une infobulle#

📆 Date de publication initiale : 14 janvier 2009

Introduction#

logo OpenLayers

Par défaut OpenLayers permet de créer des infobulles ne pouvant afficher qu'une seule et unique zone de texte (Popup). La nouvelle classe présentée ci-dessous étant OpenLayers.Popup.FramedCloud afin de proposer des infobulles similaires à celle du site EveryBlock.

Intégration de la nouvelle classe#

Pour intégrer le script proposé, cela n'est pas très compliqué. Il suffit simplement de définir un lien vers la classe OpenLayers.Popup.FramedCloudPagging. Enregistrez par exemple le fichier dans OpenLayers/lib/OpenLayers/Popup. Les deux flèches utilisées comme image sont téléchargeables ici : flèche de gauche et flèche de droite. Elles doivent être placées dans le répertoire img d'OpenLayers (OpenLayers/img).

Ensuite, vous n'avez plus qu'a appeler cette nouvelle classe de la manière suivante :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
var jsonContent = [{  
    newContent{  
    title : "title" ,  
    content : "content"  
  }  
}]  

popup = new OpenLayers.Popup.FramedCloudPagging(  
  "paggingPopup",  
  ll,  
  null,  
  jsonContent,  
  null, null, null  
);  

map.addPopup(popup);

Ce qu'il est possible de remarquer immédiatement c'est que par rapport a une utilisation habituelle la propriété contentHTML qui est de type string a été remplacée par un array. Ensuite l'essentielle des modifications sont directement des méthodes "privées" (autant que peut le faire du JS) que vous n'aurez pas besoin d'utiliser.

Exemple d'utilisation#

Info

Le serveur hébergeant la démonstration n'étant plus disponible depuis de nombreuses années, la démonstration, autre fois intégrée en iFrame est désactivée.
<iframe src="http://ks356007.kimsufi.com/arno/geotribu/applications/tutoriaux/openlayers/popup_pagging/popupPagging.html" height="500px" width="500px"></iframe>


Auteur#

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 !


Dernière mise à jour: 15 juin 2022
Créé: 10 juin 2022

Contributions à cette page : Julien Moura (50.82%), Florian Boret (49.18%)

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


Commentaires

Une version minimale de la syntaxe markdown est acceptée pour la mise en forme des commentaires.
Propulsé par Isso.