Aller au contenu

Personnaliser les icônes et controles d'OpenLayers#

📆 Date de publication initiale : 22 décembre 2008

Introduction#

Logo OpenLayers

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 :

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/customisation/glossy_blue.htm" height="400px" width="100%"></iframe>

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/customisation/glossy_red_square.htm" height="400px" width="100%"></iframe>

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/customisation/white_circle.htm" height="400px" width="100%"></iframe>

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/customisation/glossy_green.htm" height="400px" width="100%"></iframe>

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/customisation/glossy_green_square.htm" height="400px" width="100%"></iframe>

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