Interaction entre boutons et GeoJson Features

Version imprimable

05/07/2018, 12h07
SylvainM

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:

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:

<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:

<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 !
06/07/2018, 14h49
NoSmoking

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.
06/07/2018, 17h10
SylvainM
Merci NoSmoking :D,

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:

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 ! :aie: )

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

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:

<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:

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:

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());
    }
  });
}

10/07/2018, 15h00
SylvainM

Super NoSmoking ! 8-)

Citation:

Envoyé par NoSmoking

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

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 :D

Merci à toi, dans tous les cas !

A+
10/07/2018, 15h12
SylvainM

Voici donc ce que ça donne dans le JSFiddle :
http://jsfiddle.net/mg7ztL9c/
Mais pour l'instant, ça ne fonctionne pas... :oops:
11/07/2018, 14h03
NoSmoking

Il te faut appeler la fonction d'initialisation initBoutonInsee(), dans ton script.
12/07/2018, 14h35
SylvainM

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 !!
12/07/2018, 15h53
NoSmoking

Citation:

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.
12/07/2018, 17h30
SylvainM

Super !!!! 8-)
Ça marche impec !!! Pour preuve : http://jsfiddle.net/mg7ztL9c/27/
Merci à toi !!! :D
12/07/2018, 17h42
NoSmoking

Dans ton code final pense à supprimer le onclick des <button>.

Code:

<button type="button" class="btn btn-default btn-xs" data-insee="61155">

à la place de

Code:

<button onclick="initBoutonInsee()" type="button" class="btn btn-default btn-xs" data-insee="61155">