7
14 Jan 2009

Introduction


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 :


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