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

Bibliothèques & Frameworks Discussion :

Interaction entre boutons et GeoJson Features [LeafLet]


Sujet :

Bibliothèques & Frameworks

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé
    Profil pro
    Inscrit en
    Décembre 2007
    Messages
    366
    Détails du profil
    Informations personnelles :
    Âge : 45
    Localisation : France

    Informations forums :
    Inscription : Décembre 2007
    Messages : 366
    Par défaut 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
    17 213
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 213
    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 éclairé
    Profil pro
    Inscrit en
    Décembre 2007
    Messages
    366
    Détails du profil
    Informations personnelles :
    Âge : 45
    Localisation : France

    Informations forums :
    Inscription : Décembre 2007
    Messages : 366
    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
    17 213
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 213
    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 éclairé
    Profil pro
    Inscrit en
    Décembre 2007
    Messages
    366
    Détails du profil
    Informations personnelles :
    Âge : 45
    Localisation : France

    Informations forums :
    Inscription : Décembre 2007
    Messages : 366
    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 éclairé
    Profil pro
    Inscrit en
    Décembre 2007
    Messages
    366
    Détails du profil
    Informations personnelles :
    Âge : 45
    Localisation : France

    Informations forums :
    Inscription : Décembre 2007
    Messages : 366
    Par défaut
    Voici donc ce que ça donne dans le JSFiddle :
    http://jsfiddle.net/mg7ztL9c/
    Mais pour l'instant, ça ne fonctionne pas...

+ 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