10
22 déc 2008

Introduction


Même si la librairie OpenLayers se veut la plus souple et la plus ouverte possible, certaines parties sont encore codées en dures. C'est le cas notamment pour tout ce qui traite de la customisation.

La nouvelle classe proposée dans ce tutoriel, qui hérite de PanZoom, vous permettra de personnaliser facilement vos controls.

Personnaliser la classe PanZoom


La première étape consiste à télécharger le fichier "PanZoomCustom" ainsi qu'un pack contenant de nouvelles icônes. Ce pack doit être placé dans le répertoire img d'OpenLayers, le fichier JavaScript doit lui être copier dans le répertoire OpenLayers/Controls.

Exemple d'utilisation


Vous devez ensuite appeler cette nouvelle classe dans votre page qui affichera votre carte. Cela se passe de la manière suivante :


custom = new OpenLayers.Control.PanZoomCustom({
imgPanup : "north_blue_square_glossy.png",
imgPanleft : "west_blue_square_glossy.png",
imgPanright : "east_blue_square_glossy.png",
imgPandown : "south_blue_square_glossy.png",
imgZoomin : "z_plus_blue_square_glossy.png",
imgZoomworld : "z_world.png",
imgZoomout : "z_moins_blue_square_glossy.png",
});
map.addControl(custom);

Par rapport au code d'origine, outre le fait de pouvoir disposer de nouvelles icônes, cette classe apporte une nouvelle action qui permet au survol de la souris de faire un rollover donnant ainsi l'illusion que le bouton est enfoncé.

Ci-dessous voici quelques exemples présentant cette nouvelle classe ainsi que les icônes :