Accueil

Personnaliser les icônes et controles d'OpenLayers

Ecrit par Arnaud le 22/12/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 :

Retour en haut

Est-il possible de changer la

Par Chris (non vérifié), le mer, 23/06/2010 - 12:01pm.

Est-il possible de changer la position (et le gabarit) de les icônes avec votre nouvelle classe? Et qu'en est-il la zoombar?
Excusez-moi pour mon français horrible, Réponse de l'anglais est appréciée ...

Hi Chris, I'm glad to see

Par Arnaud, le jeu, 24/06/2010 - 9:05am.

Hi Chris,

I'm glad to see some English people in my website.
I will try to do my best to speak in English ;)

So, it's not possible for the moment to change the position of the icon. You can do it but you have to change it manually in the JS file class.
I haven't do the same work for the zoombar. But it shouldn't be to difficult.
I think with the new version of OpenLayers we can change the properties of the controls directly by CSS.
But I'm not quite sure. You should ask on the mailing list.

Regards

Arnaud

Bonjour, j'essaye de tester

Par Salim (non vérifié), le mar, 15/06/2010 - 1:17pm.

Bonjour,
j'essaye de tester la personnalisation des icônes car ceci me suscite.
Même si je fais référence "PanZoomCustom.js" au fichier; Mais en Firefox et internet explorer je vois plus les icônes de zoom par contre en Google Chrome je les voit mais sans icones (même si je ajoute le chemin complet des icônes).

Voyez-vous ou est ce que je peux détecter l'erreur? Est ce n'est pas le fichier PanZoomCustom.js
Merci d'avance de votre aide,

Bien Cordialement,
Salim,

Bonjour FireBug affiche-t-il

Par Arnaud, le jeu, 17/06/2010 - 9:29pm.

Bonjour

FireBug affiche-t-il un message particulier ?

Bonjour, Je souhaite essayer

Par Anonymous (non vérifié), le lun, 18/05/2009 - 3:11pm.

Bonjour,

Je souhaite essayer votre personnalisation de boutons mais des problème se posent.
J'ajoute une ligne avec le chemin de mon script(

)
ensuite j'apelle comme vous me decriver vos boutons mais firebug me met ses erreurs là:

OpenLayers is not defined
[Break on this error] OpenLayers.Control.PanZoomCustom = OpenLayers.Class(OpenLayers.Control, {

Components is not defined
[Break on this error] imgZoomout : "z_moins_blue_square_glossy.png",
essaipopup.html (ligne 52)

OpenLayers.Control.PanZoomCustom is not a constructor
[Break on this error] imgZoomout : "z_moins_blue_square_glossy.png",

a quoi cela peut etre du?
merci

Bonjour, Êtes-vous sûr que

Par Arnaud, le lun, 18/05/2009 - 6:45pm.

Bonjour,

Êtes-vous sûr que OpenLayers est bien chargé ?

Oui car si j'enlève les

Par Anonymous (non vérifié), le mar, 26/05/2009 - 9:54am.

Oui car si j'enlève les lignes que j'ai rajouté ma carte apparait bien avec les contrôles d'origines.

Bonjour, Comment afficher le

Par Anonymous (non vérifié), le mer, 25/03/2009 - 12:55pm.

Bonjour,

Comment afficher le slider avec les différents niveaux de zoom sur cette version?

Merci

Bonjour, Je n'ai pas encore

Par Arnaud, le jeu, 26/03/2009 - 8:42am.

Bonjour,

Je n'ai pas encore mise en ligne la classe permettant une personnalisation du Control PanZoomBar. Il me manque quelques corrections à réaliser.

Arnaud

Bonjour, J'aimerais savoir

Par Anonymous (non vérifié), le lun, 30/05/2011 - 4:50pm.

Bonjour,

J'aimerais savoir comment je pourrais personnaliser de A à Z mes popups !Je veux enlever les bordures blanches qu'il ya par défaut ...Pouvoir totalement gérer la manière dont mes informations vont s'afficher.

Merci