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

 

  1. #1
    Membre régulier
    Profil pro
    Inscrit en
    décembre 2007
    Messages
    301
    Détails du profil
    Informations personnelles :
    Âge : 38
    Localisation : France

    Informations forums :
    Inscription : décembre 2007
    Messages : 301
    Points : 117
    Points
    117

    Par défaut [Leaflet] Interaction entre boutons et Geojson Features

    Bonjour à tous,

    Je poursuis mon chemin d'apprentissage Leaflet, et je souhaiterais aujourd'hui créer du lien entre des boutons et des objets d'un GeoJson chargé dans une carte Leaflet.
    Voici un contexte de travail :
    http://jsfiddle.net/1gu6oc4f/

    Le lien entre le bouton et l'objet GeoJson se fera via la propriété insee :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    var communes = [{"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[[[[-0.450728,48.512817],[-0.44972,48.518924],[-0.456568,48.521445],[-0.456144,48.524879],[-0.443101,48.527724],[-0.443724,48.520908],[-0.418635,48.517788],[-0.417407,48.51143],[-0.424473,48.508192],[-0.433796,48.513776],[-0.438554,48.51172],[-0.447223,48.515377],[-0.450728,48.512817]]]]},"properties":{"insee":61200}} ...
    Mes boutons sont actuellement comme cela :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <button type="button" class="btn btn-default btn-xs">Nom commune</button>
    Mais je vais y ajouter la référence à la propriété insee, comme cela par exemple :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <button id="61200" type="button" class="btn btn-default btn-xs">Haleine</button>
    Il faut donc que j'ajoute une fonction ZoomToCom() à mes boutons (<button onclick="ZoomToCom()">).

    Pourriez-vous m'aider à écrire cette fonction ?

    Merci à vous !

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    12 831
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 12 831
    Points : 30 411
    Points
    30 411

    Par défaut

    Bonjour,
    tu devrais regarder l'exemple que j'avais fourni dans cette discussion : https://www.developpez.net/forums/d1...t/#post9260781, une partie peut t’intéresser.

  3. #3
    Membre régulier
    Profil pro
    Inscrit en
    décembre 2007
    Messages
    301
    Détails du profil
    Informations personnelles :
    Âge : 38
    Localisation : France

    Informations forums :
    Inscription : décembre 2007
    Messages : 301
    Points : 117
    Points
    117

    Par défaut

    Merci NoSmoking ,

    Ton exemple est très sympa : je l'ai fait tourner en local, et ça fonctionne parfaitement !

    En l'adaptant, je pourrais effectivement ajouter des zooms vers des coordonnées que je définirais manuellement.
    Mais ce que je souhaiterais, c'est récupérer les coordonnées d'une entité du GeoJson, depuis le bouton et via son Id, puis faire un map.fitBounds(monentite.getBounds());Mais je ne sais pas comment, depuis un bouton, identifier une entité du GeoJson.

    Il faudrait au final que j'ai une fonction de ce type :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    function zoomToMonEntite {
        map.fitBounds(MonEntite.getBounds());
    };
    (je crois que c'est tout bête, mais il me manque les fondamentaux de JS ! )

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    12 831
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 12 831
    Points : 30 411
    Points
    30 411

    Par défaut

    Je n'ai visiblement pas bien compris ton besoin de départ

    Effectivement tu peux lier chaque « layer » à un bouton en te servant, par exemple, du numéro insee qui pourrait être mis dans un attribut data-insee, exemple
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <button data-insee="61200">Haleine</button>

    Au chargement de ta page il te suffit d'initialiser les éléments possédant un attribut data-insee
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    /**
     * Affectation fonction sur clic des éléments ayant un attribut data-insee
     */
    function initBoutonInsee() {
      var oElems = document.querySelectorAll("[data-insee]");
      for (var i = 0; i < oElems.length; i += 1) {
        oElems[i].onclick = showLayer;
      }
    }
    Dans la fonction showLayer il te faut récupérer le numéro insee, parcourir les layers présents et appliquer le fitBound avec celui correspondant ce qui pourrait donner
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    /**
     * Affiche et centre la carte sur le layer correspondant à la data-insee de l'élément
     * @param {object}  obj - élément cliqué ou event suivant type d'appel
     */
    function showLayer(obj) {
      var elem = obj.target || obj;
      // récup. valeur recherchée
      var prop = elem.dataset.insee;
      // parcours des layers
      communesLayer.eachLayer(function (layer) {
        // init de la recherche
        var search = layer.feature.properties.insee;
        // reset le style en cours
        communesLayer.resetStyle(layer);
        // test sur la propriété
        if (prop == search) {             // pas de === ici
          // mise au premier plan
          layer.bringToFront();
          // change le style
          layer.setStyle({
            weight: 3,
            color: "#F00",
            fillOpacity: 0.1
          });
          // ajuste à la carte
          map.fitBounds(layer.getBounds());
        }
      });
    }

  5. #5
    Membre régulier
    Profil pro
    Inscrit en
    décembre 2007
    Messages
    301
    Détails du profil
    Informations personnelles :
    Âge : 38
    Localisation : France

    Informations forums :
    Inscription : décembre 2007
    Messages : 301
    Points : 117
    Points
    117

    Par défaut

    Super NoSmoking !

    Citation Envoyé par NoSmoking
    Je n'ai visiblement pas bien compris ton besoin de départ
    Pas de souci : c'est certainement moi qui l'ai mal exprimé !
    Citation Envoyé par NoSmoking
    Effectivement tu peux lier chaque « layer » à un bouton
    Aïe, je crois que je n'ai toujours pas été assez clair : dans mon cas, je ne souhaite pas lier un bouton à un layer, mais à une entité (feature) de ce layer, via ses feature.properties.

    Peut-être vais-je réussir à adapter à ce contexte ta proposition, mais avant de m'y lancer, je préférais éclaircir mon besoin

    Merci à toi, dans tous les cas !

    A+

  6. #6
    Membre régulier
    Profil pro
    Inscrit en
    décembre 2007
    Messages
    301
    Détails du profil
    Informations personnelles :
    Âge : 38
    Localisation : France

    Informations forums :
    Inscription : décembre 2007
    Messages : 301
    Points : 117
    Points
    117

    Par défaut

    Voici donc ce que ça donne dans le JSFiddle :
    http://jsfiddle.net/mg7ztL9c/
    Mais pour l'instant, ça ne fonctionne pas...

  7. #7
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    12 831
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 12 831
    Points : 30 411
    Points
    30 411

    Par défaut

    Il te faut appeler la fonction d'initialisation initBoutonInsee(), dans ton script.

  8. #8
    Membre régulier
    Profil pro
    Inscrit en
    décembre 2007
    Messages
    301
    Détails du profil
    Informations personnelles :
    Âge : 38
    Localisation : France

    Informations forums :
    Inscription : décembre 2007
    Messages : 301
    Points : 117
    Points
    117

    Par défaut

    Je ne suis pas sûr de bien comprendre comment appeler la fonction dans mon script (désolé, je pars de très loin en programmation !).

    Je viens d'ajouter button onclick="initBoutonInsee()" sur mes boutons, mais ça ne fonctionne toujours pas...
    Pourtant, la fonction initBoutonInsee est bien dans le script... ?

    Tu peux regarder sur cette page de test ce qui cloche ?

    Merci !!

  9. #9
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    12 831
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 12 831
    Points : 30 411
    Points
    30 411

    Par défaut

    Pourtant, la fonction initBoutonInsee est bien dans le script... ?
    oui mais ce n'est que la déclaration de la fonction, ce qu'elle fera quand elle sera appelée.

    Ajoute simplement initBoutonInsee() à la fin de la partie javascript, cela appellera ta fonction et elle sera exécutée.

  10. #10
    Membre régulier
    Profil pro
    Inscrit en
    décembre 2007
    Messages
    301
    Détails du profil
    Informations personnelles :
    Âge : 38
    Localisation : France

    Informations forums :
    Inscription : décembre 2007
    Messages : 301
    Points : 117
    Points
    117

    Par défaut

    Super !!!!
    Ça marche impec !!! Pour preuve : http://jsfiddle.net/mg7ztL9c/27/
    Merci à toi !!!

  11. #11
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    12 831
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 12 831
    Points : 30 411
    Points
    30 411

    Par défaut

    Dans ton code final pense à supprimer le onclick des <button>.
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <button type="button" class="btn btn-default btn-xs" data-insee="61155">
    à la place de
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <button onclick="initBoutonInsee()" type="button" class="btn btn-default btn-xs" data-insee="61155">

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 6
    Dernier message: 14/12/2006, 11h36
  2. [Language]Interaction entre class
    Par LordBob dans le forum Langage
    Réponses: 10
    Dernier message: 14/12/2005, 10h14
  3. interaction entre mon programme & openOffice
    Par artatum dans le forum C
    Réponses: 4
    Dernier message: 10/10/2005, 22h28
  4. [VB .Net][Forms] Interaction entre deux forms
    Par plasticgoat dans le forum Windows Forms
    Réponses: 7
    Dernier message: 24/08/2005, 13h14
  5. [Collaboration/Interaction] Peut-on schématiser une interaction entre un bouton de commande et un autre objet ?
    Par manel007 dans le forum Autres Diagrammes
    Réponses: 5
    Dernier message: 21/09/2004, 01h01

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