Bonjour, bonjour,
dans le cartouche de droite, il y a un bouton Zoom +, mais pas de bouton Zoom -.
Est-ce qu'il y a un moyen d'en ajouter un ?
Merci d'avance.
Bonjour, bonjour,
dans le cartouche de droite, il y a un bouton Zoom +, mais pas de bouton Zoom -.
Est-ce qu'il y a un moyen d'en ajouter un ?
Merci d'avance.
Bonjour,
il y a moyen :
il existe par exemple le controle OpenLayers.Control.ZoomOut (cf. http://dev.openlayers.org/releases/O...oomOut-js.html) que l'on doit pouvoir rajouter au cartouche (cf. http://api.ign.fr/documentation/87/l...-ses-controles pour la façon de faire)
Dans :
http://api.ign.fr/documentation/87/l...-ses-controles
regardez la partie (en bas) :
"Création d'un nouveau contrôle:"
qui montre comment rajouter un bouton (OpenLayers.Control.Button) dans le cartouche.
Et au lieu de rajouter le bouton, rajoutez le contrôle OpenLayers.Control.ZoomOut.
Super, merci beaucoup.
Autre question, est-ce qu'il est possible d'insérer le nouveau bouton entre les 2 autres ou est-ce qu'on ne peut que l'ajouter et est-ce qu'il est possible d'ajouter une bulle d'aide ?
Et j'ajouterai, est-ce qu'il est aussi possible de modifier le fonctionnement du ZoonIN pour qu'il fonctionne comme le ZoomOut, c'est à dire sans qu'on ait à sélectionner une zone ?
Les classes CSS utilisées par défaut pour représenter ce contrôle sont les suivantes (extrait de geoportal.css) :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12 .olControlZoomOutItemActive { background-image:url("img/picto_zoomOut.png"); background-repeat:no-repeat; background-position: -23px, 0px; cursor:pointer; } .olControlZoomOutItemInactive { background-image:url("img/picto_zoomOut.png"); background-repeat:no-repeat; cursor:pointer; }
Il vous faut donc "écraser" ses définitions dans votre page HTML en redéfinissant ces classes dans une balise <style> avec la propriété background-image:url pointant vers l'image de votre choix.
Ok, merci, pour la modification de l'image, mais pour le reste des questions (désolé, j'avais éditer mon précédent message) ?
Ha bah mince, je ne m'en étais pas rendu compte. Merci.
Est-ce que quelqu'un peut me dire s'il est facilement possible d'inverser le ZoomIn et le ZoomOut dans le cartouche ?
Inverser, c'est-à-dire échanger la position des deux pictos ?
Pour la méthode générale, je renvoie vers les explications de Christian sur le sujet http://www.developpez.net/forums/d14...touche-outils/
Mais visiblement la démarche était déjà bien comprise.
Je ne pensais pas que c'était la même chose, mais quoiqu'il en soit, je n'y arrive pas.
C'est bien la même chose, puisqu'il s'agit de modifier dans les styles CSS la position des deux div qui contiennent les boutons.
En gros, décaler le div de ZoomIn vers la droite via des propriétés CSS position:relative; et left:23px; et décaler le div de ZoomOut vers la gauche via des propriétés CSS position:relative; et left: -23px;
Je vais regarder de plus près pour essayer de fournir un bout de code clef en main.
Ce serait super, car je débute et galère
J'ajoute une petite question : lorsqu'on ajoute un bouton, il y a une image par défaut, comment faire pour la modifier et est-ce qu'il existe une liste d'images utilisables ?
Une constante à modifier comme par exemple olControlZoomOut ?
Pour modifier l'apparence du bouton de zoom, je renvoie vers le message de Gilles un peu plus haut dans ce sujet, le 11 avril à 10h59.
La méthode y décrit comment est affectée l'image au bouton, suivant son état actif ou inactif :
Il suffit de surcharger la propriété CSS background-image pour lui attribuer l'url vers l'image que l'on souhaite voir affichée.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10 .olControlZoomOutItemActive { background-image:url("img/picto_zoomOut_on.gif"); background-repeat:no-repeat; cursor:pointer; } .olControlZoomOutItemInactive { background-image:url("img/picto_zoomOut_off.gif"); background-repeat:no-repeat; }
De façon basique, il existe un picto Géoportail dédié, visible aux adresse suivantes
http://api.ign.fr/geoportail/api/js/...zoomOut_on.gif (état actif)
http://api.ign.fr/geoportail/api/js/...oomOut_off.gif (état inactif)
Pour ce qui est d'utiliser une autre image, libre cours vous est donné, soit de faire vos propres pictos, soit de pointer sur un picto déjà existant sur le Web. Attention, la dimension de base du picto est un carré de 23px de coté.
Sur cette question, un exemple de code qui dans un exemple basique permet d'inverser les outils de déplacement (la petite main) et de ZoomIn:
L'idée est de pointer les deux div correspondant aux outils en question (via une inspection par Firebug comme expliqué par Christian dans le sujet sur le cartouche d'outils), de leur attribuer une position relative pour les bouger, et de faire le décalage horizontal qui va bien par rapport à leur position actuelle. La valeur de 23px est choisie car c'est la taille des pictos, une valeur positive de 23px va décaler le premier picto vers la droite, une valeur négative va décaler le deuxième picto vers la gauche, et hop le tour est joué, nos deux pictos ont été intervertis.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7 var picto1 = document.getElementById("OpenLayers.Control.Navigation_31"); picto1.style.position = "relative"; picto1.style.left = "23px"; var picto2 = document.getElementById("OpenLayers.Control.ZoomBox_32"); picto2.style.position = "relative"; picto2.style.left = "-23px";
Le fonctionnement sera exactement le même pour inverser les outils de ZoomIn et de ZoomOut, il faut juste bien pointer sur les id de div qui correspondent à ces deux outils.
et bien déterminé, car suivant vos insertions d'outils (ou control), les "indices" (en rouge) des id (OpenLayers.Control.Navigation_31 et OpenLayers.Control.ZoomBox_32) peuvent varier. Sauf erreur de ma part....un exemple de code qui dans un exemple basique...
Bon, ben pas glop : ça ne fonctionne pas ou alors, je dois mal faire quelque chose.
Oups, j'ai parlé trop vite, j'avais mal placé le code.
C'est impeccable.
Merci encore.
En ce qui concerne les icônes, vous parlez de celles-ci :
http://api.ign.fr/geoportail/api/js/...zoomOut_on.gif (état actif)
http://api.ign.fr/geoportail/api/js/...oomOut_off.gif (état inactif)
mais est-ce qu'il en existe d'autres déjà prêtes, faites par l'IGN, donc à aller chercher au même endroit ?
Vous avez un bloqueur de publicités installé.
Le Club Developpez.com n'affiche que des publicités IT, discrètes et non intrusives.
Afin que nous puissions continuer à vous fournir gratuitement du contenu de qualité, merci de nous soutenir en désactivant votre bloqueur de publicités sur Developpez.com.
Partager