IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

IGN API Géoportail Discussion :

Bouton Zoom - ?


Sujet :

IGN API Géoportail

  1. #1
    Membre actif Avatar de Zebulon777
    Homme Profil pro
    Informaticien
    Inscrit en
    Février 2005
    Messages
    1 319
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 57
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Informaticien

    Informations forums :
    Inscription : Février 2005
    Messages : 1 319
    Points : 286
    Points
    286
    Par défaut Bouton Zoom - ?
    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.
    Zeb'...

  2. #2
    Membre chevronné Avatar de gcebelieu
    Homme Profil pro
    Ingénieur Géographe et Cartographe
    Inscrit en
    Novembre 2010
    Messages
    1 106
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Ingénieur Géographe et Cartographe
    Secteur : Service public

    Informations forums :
    Inscription : Novembre 2010
    Messages : 1 106
    Points : 1 843
    Points
    1 843
    Par défaut
    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)

  3. #3
    Membre actif Avatar de Zebulon777
    Homme Profil pro
    Informaticien
    Inscrit en
    Février 2005
    Messages
    1 319
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 57
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Informaticien

    Informations forums :
    Inscription : Février 2005
    Messages : 1 319
    Points : 286
    Points
    286
    Par défaut
    Oula, je suis perdu...
    Zeb'...

  4. #4
    Membre chevronné Avatar de gcebelieu
    Homme Profil pro
    Ingénieur Géographe et Cartographe
    Inscrit en
    Novembre 2010
    Messages
    1 106
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Ingénieur Géographe et Cartographe
    Secteur : Service public

    Informations forums :
    Inscription : Novembre 2010
    Messages : 1 106
    Points : 1 843
    Points
    1 843
    Par défaut
    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.

  5. #5
    Membre actif Avatar de Zebulon777
    Homme Profil pro
    Informaticien
    Inscrit en
    Février 2005
    Messages
    1 319
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 57
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Informaticien

    Informations forums :
    Inscription : Février 2005
    Messages : 1 319
    Points : 286
    Points
    286
    Par défaut
    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 ?
    Zeb'...

  6. #6
    Membre chevronné Avatar de gcebelieu
    Homme Profil pro
    Ingénieur Géographe et Cartographe
    Inscrit en
    Novembre 2010
    Messages
    1 106
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Ingénieur Géographe et Cartographe
    Secteur : Service public

    Informations forums :
    Inscription : Novembre 2010
    Messages : 1 106
    Points : 1 843
    Points
    1 843
    Par défaut
    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.

  7. #7
    Membre actif Avatar de Zebulon777
    Homme Profil pro
    Informaticien
    Inscrit en
    Février 2005
    Messages
    1 319
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 57
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Informaticien

    Informations forums :
    Inscription : Février 2005
    Messages : 1 319
    Points : 286
    Points
    286
    Par défaut
    Ok, merci, pour la modification de l'image, mais pour le reste des questions (désolé, j'avais éditer mon précédent message) ?
    Zeb'...

  8. #8
    Membre éclairé Avatar de jrenard
    Homme Profil pro
    Webdesigner / développeur front-end
    Inscrit en
    Septembre 2013
    Messages
    456
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Charente Maritime (Poitou Charente)

    Informations professionnelles :
    Activité : Webdesigner / développeur front-end
    Secteur : Service public

    Informations forums :
    Inscription : Septembre 2013
    Messages : 456
    Points : 894
    Points
    894
    Par défaut
    Citation Envoyé par Zebulon777 Voir le message
    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 ?
    Bonjour,

    Sur ce point, même si le comportement du ZoomIn consiste à zoomer sur une zone définie par un clic maintenu, le zoom avant fonctionne également par un simple clic sur la carte sans avoir à définir une zone, à la manière du ZoomOut
    Développeur Web - Agglo La Rochelle
    Anciennement pôle technique Géoportail - IGN
    Twitter : @dje_renard

  9. #9
    Membre actif Avatar de Zebulon777
    Homme Profil pro
    Informaticien
    Inscrit en
    Février 2005
    Messages
    1 319
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 57
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Informaticien

    Informations forums :
    Inscription : Février 2005
    Messages : 1 319
    Points : 286
    Points
    286
    Par défaut
    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 ?
    Zeb'...

  10. #10
    Membre éclairé Avatar de jrenard
    Homme Profil pro
    Webdesigner / développeur front-end
    Inscrit en
    Septembre 2013
    Messages
    456
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Charente Maritime (Poitou Charente)

    Informations professionnelles :
    Activité : Webdesigner / développeur front-end
    Secteur : Service public

    Informations forums :
    Inscription : Septembre 2013
    Messages : 456
    Points : 894
    Points
    894
    Par défaut
    Inverser, c'est-à-dire échanger la position des deux pictos ?
    Développeur Web - Agglo La Rochelle
    Anciennement pôle technique Géoportail - IGN
    Twitter : @dje_renard

  11. #11
    Membre actif Avatar de Zebulon777
    Homme Profil pro
    Informaticien
    Inscrit en
    Février 2005
    Messages
    1 319
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 57
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Informaticien

    Informations forums :
    Inscription : Février 2005
    Messages : 1 319
    Points : 286
    Points
    286
    Par défaut
    Oui, oui, tout à fait.
    Zeb'...

  12. #12
    Membre éclairé Avatar de jrenard
    Homme Profil pro
    Webdesigner / développeur front-end
    Inscrit en
    Septembre 2013
    Messages
    456
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Charente Maritime (Poitou Charente)

    Informations professionnelles :
    Activité : Webdesigner / développeur front-end
    Secteur : Service public

    Informations forums :
    Inscription : Septembre 2013
    Messages : 456
    Points : 894
    Points
    894
    Par défaut
    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.
    Développeur Web - Agglo La Rochelle
    Anciennement pôle technique Géoportail - IGN
    Twitter : @dje_renard

  13. #13
    Membre actif Avatar de Zebulon777
    Homme Profil pro
    Informaticien
    Inscrit en
    Février 2005
    Messages
    1 319
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 57
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Informaticien

    Informations forums :
    Inscription : Février 2005
    Messages : 1 319
    Points : 286
    Points
    286
    Par défaut
    Je ne pensais pas que c'était la même chose, mais quoiqu'il en soit, je n'y arrive pas.
    Zeb'...

  14. #14
    Membre éclairé Avatar de jrenard
    Homme Profil pro
    Webdesigner / développeur front-end
    Inscrit en
    Septembre 2013
    Messages
    456
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Charente Maritime (Poitou Charente)

    Informations professionnelles :
    Activité : Webdesigner / développeur front-end
    Secteur : Service public

    Informations forums :
    Inscription : Septembre 2013
    Messages : 456
    Points : 894
    Points
    894
    Par défaut
    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.
    Développeur Web - Agglo La Rochelle
    Anciennement pôle technique Géoportail - IGN
    Twitter : @dje_renard

  15. #15
    Membre actif Avatar de Zebulon777
    Homme Profil pro
    Informaticien
    Inscrit en
    Février 2005
    Messages
    1 319
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 57
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Informaticien

    Informations forums :
    Inscription : Février 2005
    Messages : 1 319
    Points : 286
    Points
    286
    Par défaut
    Ce serait super, car je débute et galère
    Zeb'...

  16. #16
    Membre actif Avatar de Zebulon777
    Homme Profil pro
    Informaticien
    Inscrit en
    Février 2005
    Messages
    1 319
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 57
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Informaticien

    Informations forums :
    Inscription : Février 2005
    Messages : 1 319
    Points : 286
    Points
    286
    Par défaut
    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 ?
    Zeb'...

  17. #17
    Membre éclairé Avatar de jrenard
    Homme Profil pro
    Webdesigner / développeur front-end
    Inscrit en
    Septembre 2013
    Messages
    456
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Charente Maritime (Poitou Charente)

    Informations professionnelles :
    Activité : Webdesigner / développeur front-end
    Secteur : Service public

    Informations forums :
    Inscription : Septembre 2013
    Messages : 456
    Points : 894
    Points
    894
    Par défaut
    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 :

    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;
    }
    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.

    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é.
    Développeur Web - Agglo La Rochelle
    Anciennement pôle technique Géoportail - IGN
    Twitter : @dje_renard

  18. #18
    Membre éclairé Avatar de jrenard
    Homme Profil pro
    Webdesigner / développeur front-end
    Inscrit en
    Septembre 2013
    Messages
    456
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Charente Maritime (Poitou Charente)

    Informations professionnelles :
    Activité : Webdesigner / développeur front-end
    Secteur : Service public

    Informations forums :
    Inscription : Septembre 2013
    Messages : 456
    Points : 894
    Points
    894
    Par défaut
    Citation Envoyé par Zebulon777 Voir le message
    Est-ce que quelqu'un peut me dire s'il est facilement possible d'inverser le ZoomIn et le ZoomOut dans le cartouche ?
    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:

    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";
    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.

    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.
    Développeur Web - Agglo La Rochelle
    Anciennement pôle technique Géoportail - IGN
    Twitter : @dje_renard

  19. #19
    Membre éprouvé Avatar de cmail
    Homme Profil pro
    Inscrit en
    Mai 2009
    Messages
    1 730
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Loire (Auvergne)

    Informations forums :
    Inscription : Mai 2009
    Messages : 1 730
    Points : 966
    Points
    966
    Par défaut
    ...un exemple de code qui dans un exemple basique...
    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.
    Merci.

    _____________
    - Le site de l'Observatoire de Haute-Loire (obs43.fr)
    - Voir une vidéo de présentation (2 min.) de l'Observatoire de Haute-Loire

  20. #20
    Membre actif Avatar de Zebulon777
    Homme Profil pro
    Informaticien
    Inscrit en
    Février 2005
    Messages
    1 319
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 57
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Informaticien

    Informations forums :
    Inscription : Février 2005
    Messages : 1 319
    Points : 286
    Points
    286
    Par défaut
    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 ?
    Zeb'...

+ Répondre à la discussion
Cette discussion est résolue.
Page 1 sur 2 12 DernièreDernière

Discussions similaires

  1. [Débutant] Gérer mon bouton zoom
    Par navas dans le forum C#
    Réponses: 7
    Dernier message: 15/05/2015, 16h15
  2. Ajouter un bouton "zoom"
    Par wyzer dans le forum Jasper
    Réponses: 2
    Dernier message: 25/01/2013, 15h29
  3. Action associée au bouton zoom ?
    Par soeursourire dans le forum Interfaces Graphiques
    Réponses: 4
    Dernier message: 09/01/2013, 16h42
  4. Interface et bouton zoom
    Par soeursourire dans le forum Interfaces Graphiques
    Réponses: 2
    Dernier message: 10/11/2010, 13h52
  5. [JFreeChart] Bouton Zoom
    Par MasterChief78 dans le forum 2D
    Réponses: 1
    Dernier message: 14/05/2008, 19h05

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo