Discussion :

[SylvainM]

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 !

[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.

[SylvainM]

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

[NoSmoking]

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

[SylvainM]

Super 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é !

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+

[SylvainM]

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

[NoSmoking]

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

[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 !!

[NoSmoking]

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.

[SylvainM]

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

[NoSmoking]

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