Mettre à jour un contrôle (L.Control.Search)

**SylvainM** · 27/09/2018, 13h21

Bonjour à tous,

Dans le cadre d'un développement Leaflet, j'intègre un moteur de recherche sur une carte en utilisant le plugin "Leaflet.Control.Search" (http://labs.easyblog.it/maps/leaflet-search/).
Celui-ci me permet de zoomer sur les entités d'un GeoJson chargé sur la carte, d'après leur propriétés.

Cependant, mon GeoJson peut être rechargé par l'utilisateur, pour utiliser d'autres sources de données.

Pour cela, j'ai une fonction qui permet de recharger le GeoJson (c'est un GeoJson de "mailles") :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
// fonction du bouton du contrôle de type de maille
$(function(){
 
  $(".dropdown-menu li a").click(function(){
    if (currentMaillesTyp == $(this).attr("class")) {} else {
    layersControl.removeLayer(mailleslayer);
    map.removeLayer(mailleslayer);
    currentMaillesTyp = $(this).attr("class");
    $.getJSON(getMaillesPhP(currentMaillesTyp), function(mailles) { addmaillesToMap(mailles, map); });
    $(".dropdown-toggle .listname").text($(this).text());
    info.update();
  } 
  });

Sachant que le bouton de recherche L.Control.Search() est ajouté en même temps que le addmaillesToMap() avec un map.addControl( searchControl );.

Mon problème : à chaque rechargement du GeoJson, un nouveau contrôle apparait.

Je cherche donc à retirer ce contrôle, s'il existe, au moment de l'ajout du GeoJson (addmaillesToMap()), avant de le rajouter à nouveau.

J'ai essayé avec :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

map.removeControl(searchControl);

Mais le contrôle n'est pas retiré...

Avec

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

searchControl.removeFrom(map);

Et j'ai l'erreur :

TypeError: searchControl.removeFrom is not a function

.

C'est certainement évident pour un connaisseur Javascript (que je ne suis pas

)

Merci pour votre aide !

**NoSmoking** · 27/09/2018, 19h19

Bonjour,
tu dois avoir des erreurs dans ton code car la méthode removeControl marche très bien.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
var oSearch = new L.Control.Search({
  // ... les options ...
});
oMap.addControl( oSearch);
oMap.removeControl(oSearch);

Ne pourrais tu pas changer simplement les options ?

**SylvainM** · 28/09/2018, 09h56

la méthode removeControl marche très bien.

Ben oui, je viens de voir que je l'avais même déjà utilisé pour d'autres contrôles !

(une légende en l’occurrence, que je mets à jour)

Je me demande, si cela ne vient pas du fait que j'ai mis la création du contrôle L.Control.Search() dans ma fonction addmaillesToMap(), et que je lance mon map.removeControl(searchControl); dans une autre fonction...

Au cas où, je transmets temporairement l'URL (je devrais l'effacer ensuite car l'interface n'est pas encore validée par mes élus !), si jamais tu vois ce qui bloque ?
C'est pas du tout finalisé : j'ai encore plein de fonctionnalités à améliorer / ajouter !

[Modération] Suppression du lien obsolète.

**NoSmoking** · 29/09/2018, 11h42

Le moins que l'on puisse dire est que tu manque de rigueur, variables non déclarée (avec var ou autre) comme par exemple IGNAPIKEY, style_mailles, masklayer et bien d'autres.

Ton code est mal indenté ce qui rend difficile la recherche rapide des blocs.

Ceci étant ton soucis vient d'une double déclaration (avec mot clé var) d'une variable searchControl qui pour le coup te fait dupliquer le contrôle

Ligne 373 : var searchControl = new L.Control.Search(); , variable globale
et
Ligne 718 : var searchControl = new L.Control.Search({ , variable de la fonction addmaillesToMap, supprime le var pour utiliser toujours la même référence globale.

D'une manière générale, apporte un peu plus de soin à l'écriture de ton code.

**SylvainM** · 01/10/2018, 17h13

Merci NoSmoking

Envoyé par NoSmoking

Le moins que l'on puisse dire est que tu manque de rigueur [...]
D'une manière générale, apporte un peu plus de soin à l'écriture de ton code.

Je suis malheureusement bien conscient de ce problème de rigueur !
Je suis parti de zéro en "développement" javascript, et en développement tout court d'ailleurs, et il me manque donc énormément de fondamentaux !

Mais je t'assure que, petit à petit, je progresse : c'est très lent, mais cette page qui "fonctionne" presque est un miracle à mes yeux !

Je crois que je vais tenter de me pencher sur la notion même de variable, pour être bien clair là dessus

En tout cas, ton conseil m'a permis de résoudre le problème ! COOL !!!

Un grand merci (comme toujours !)

Sylvain M.

**SylvainM** · 01/10/2018, 17h18

Avant de clore ce thread, je me permets une petite question "bonus".

J'aurais bien aimé que ce contrôle de recherche soit situé à l'intérieur du panneau "infozoom" qui est défini comme ceci :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var infozoom = L.control.custom({
    position: 'topright',
    content : '<div class="info">' +
              '<h4><span class="glyphicon glyphicon-zoom-in"></span> Le Bocage<br>sur ma commune ?</h4>' +
              '<br>Survollez les communes / mailles<br>avec la souris pour consulter<br>les statistiques locales<br>' +
              '</div>',
 
    classes : 'btn-group dropup',
    style   :
    {
        margin: '10px',
        padding: '0px 0 0 0',
        cursor: 'pointer',
    }
}).addTo(map);

Penses-tu que ce soit possible "simplement" ?

(et d'ici là, promis, je vais essayer d'améliorer l'indentation de mon code source !

)

**NoSmoking** · 02/10/2018, 13h51

Il existe l' option

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

container: '',	//container id to insert Search Control

qui permet d'insérer l'élément où tu le souhaites.

Pour ce faire il te faut modifier le code HTML de ton élément infoZoom en y ajoutant un élément possédant une ID pour pouvoir être référencé.

Code modifié avec ajout de <div id="div-search" style="min-height:3em"></div> :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
var infozoom = L.control.custom({
    position: 'topright',
    content : '<div class="info">' +
              '<h4><span class="glyphicon glyphicon-zoom-in"></span> Le Bocage<br>sur ma commune ?</h4>' +
              '<br>Survollez les communes / mailles<br>avec la souris pour consulter<br>les statistiques locales<br>' +
              '<div id="div-search" style="min-height:3em"></div></div>',

Une hauteur est déclarée car les éléments constituant le contrôle de recherche sont en float:left, donc ne contribuent pas au dimensionnement du parent.

Il te faut également modifier les options de ton L.Control.Search comme suit

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
searchControl = new L.Control.Search({
    layer: mailleslayer,
    //position: 'topright',
    container: "div-search",   // id élément destination
    // la suite du code

**SylvainM** · 02/10/2018, 14h12

Envoyé par NoSmoking

Il existe l'option container

SUPER !!!
Testé et approuvé !!!!

Je ne résiste pas à te poser une ultime (promis !!!!) question sur ce fil...

Dans l'idéal, j'aimerais bien que cette DIV "infozoom" soit réductible... (qu'un petit et discret "-" permette de la masquer pour ne pas occulter la carte en dessous).
N'hésite pas à me dire que j'exagère, mais si jamais tu es en mesure de me conseiller un bout de code qui le permette, je te serais infiniement reconnaissant (je le suis déjà en fait, et comme infini + infini = infini, ça ne change pas grand chose, j'en conviens...).

Merci encore !!

Sylvain M.

**SylvainM** · 02/10/2018, 14h20

Bon, j'ai cherché quand même tout seul, et je pense m'en sortir avec les "collapse" de bootstrap ! (https://getbootstrap.com/docs/4.0/components/collapse/)

**NoSmoking** · 02/10/2018, 15h15

Bon, j'ai cherché quand même tout seul, et je pense m'en sortir avec les "collapse"

Dans ce cas pense à mettre cette discussion en résolue.

**SylvainM** · 02/10/2018, 15h26

Yes !
Merci

J'ai voulu éditer le message en question, pour retirer cette URL non encore officielle, mais bizarrement, ce message n'est pas modifiable, contrairement aux autres ???
Une idée du pourquoi ?

Si un admin peut retirer l'URL pour moi, ce serait sympa !

**NoSmoking** · 02/10/2018, 18h21

J'ai voulu éditer le message en question, pour retirer cette URL non encore officielle, mais bizarrement, ce message n'est pas modifiable, contrairement aux autres ???
Une idée du pourquoi ?

Les messages ne sont éditables que 72 heures, dépassé ce délai il faut faire la demande auprès d'un modérateur.

Si un admin peut retirer l'URL pour moi, ce serait sympa !

C'est fait, bonne continuation.