Annonce
L'appel à participation est ouvert jusqu'au 19 janvier 2025!
Pages: 1
- Sujet précédent - Leaflet - bootstrapSwitch boutons on/off - Action sur layers - Sujet suivant
#1 Fri 20 May 2016 08:42
- B.Arnaud
- Participant occasionnel
- Date d'inscription: 13 Jan 2011
- Messages: 19
Leaflet - bootstrapSwitch boutons on/off - Action sur layers
Bonjour,
Je suis confronté à un problème et incapable de trouver une solution uniquement par moi même...
Contexte :
J'ai créé une webmap avec différents layers et la possibilité de choisir / changer de layer par l'utilisation d'un bouton.
Lors du chargement la page se met en place avec une fond OSM, par la suite, après action des boutons, l'utilisateur peut choisir un autre fond de carte que celui par défaut. (bouton on/off avec Bootstrap Switch http://www.bootstrap-switch.org/)
Dans les faits :
Lorsque l'on clic sur un bouton, il passe en on et affiche la carte choisie. Jusque là, tout va presque bien.
En effet, la nouvelle carte se superpose au fond OSM (il y a donc 2 cartes chargées et n'est visible que celle du dessus. Cependant, le fond OSM reste présent, et donc, la légende aussi ... (Ca me fait un truc du genre : Leaflet | © OpenStreetMap contributors, légende de ma carte affichée). Et ainsi de suite plus je sélectionne de carte à afficher, plus elles se superposent...
La question :
Savez-vous comment je peux faire dire à mes boutons que si un bouton est activé, alors tous les autres se désactivent automatiquement (cf. le comportement des boutons présents ici sur la 2ème ligne http://jsfiddle.net/sumw4/13/) tout en conservant l'interaction avec l'affichage de layer.
Le résumé :
Comment utiliser bootstrap-switch (radio all off) pour appeler uniquement une carte à la fois en supprimant automatiquement le fond de base et en le remettant si le bouton repasse en off.
En espérant avoir été assez clair ...
Une visualisation, avec le code, pour être plus parlant (j'ai adapté mon code originel, il reste peut-être quelques coquilles qui ne servent pas ici mais pour d'autre fonctions du site que je met en place):
https://jsfiddle.net/arzlo/rafgnb8s/2/
Hors ligne
#2 Fri 20 May 2016 10:45
- demo972
- Participant occasionnel
- Date d'inscription: 1 Mar 2012
- Messages: 18
Re: Leaflet - bootstrapSwitch boutons on/off - Action sur layers
Salut à toi !
Alors je ne sais pas si c'est une bonne réponse, mais au vue de ton code il te faudra déjà quatre contrôleur pour les couches. Vue que tu as celle de osm par défaut, rajoute un bouton qui est de base activé à true et qui concerne la couche osm. Comme ça dès qu'il active une autre il vire la couche osm de base.
Ensuite j'ai modifier ton jsfidl pour que ça fonctionne. Il faut utiliser le type='radio' et le name="GroupedSwitch" pour que ça fonctionne.
https://jsfiddle.net/luda973/rafgnb8s/5/
Après il y a encore quelque petit soucis dans le code. L'exemple ne fonctionne qu'une fois 
. J'espère que cela te mettra au moins sur la piste.
A bientôt
Dernière modification par demo972 (Fri 20 May 2016 10:48)
Hors ligne
#3 Fri 20 May 2016 12:20
- B.Arnaud
- Participant occasionnel
- Date d'inscription: 13 Jan 2011
- Messages: 19
Re: Leaflet - bootstrapSwitch boutons on/off - Action sur layers
Bonjour,
il te faudra déjà quatre contrôleur pour les couches
Oui effectivement, c'est tout bête je n'y avais pas pensé...
Il faut utiliser le type='radio' et le name="GroupedSwitch" pour que ça fonctionne
Bravo ! Effectivement, le comportement des boutons est celui que je cherche à approcher.
Bémol pour le fait que ça ne fonctionne qu'une seule fois... Mais je suppose que c'est un truc tout simple à ajouter (à creuser)
Par contre les layers ne sont pas supprimés, ils passent en-dessous du nouveau layer (on peut le voir en déplaçant la map où au niveau de la légende).
Le problème : lorsque le bouton passe sur off l'action ne s'effectue que sur le bouton et non sur la couche.
En tout cas, merci pour ton aide !!
Je creuse dans cette direction en prenant en compte tes infos et les nouvelles fonctions. Et en essayant de trouver une solution pour que les couches se désactivent réellement (et accessoirement se réactricent à la demande)
A ce stade il s'agit de conserver le comportement des boutons que tu m'as indiqué et de faire suivre le javascript pour que les couches s'activent/se désactivent lorsque l'on clic dessus.
-- La prise en compte de tes infos dans une nouvelles version de jsfiddle https://jsfiddle.net/arzlo/aemvtufj/3/ --
Dernière modification par B.Arnaud (Fri 20 May 2016 14:43)
Hors ligne
#4 Fri 20 May 2016 15:52
- demo972
- Participant occasionnel
- Date d'inscription: 1 Mar 2012
- Messages: 18
Re: Leaflet - bootstrapSwitch boutons on/off - Action sur layers
Salut, bon c'est pas la meilleur des méthodes mais au moins ça pourra te dépanner le temps que tu trouves une meilleure solution.
Le seul problème sera que plus il y aura de couche, plus tu auras de map1.remov.
L'une des solutions serrais de faire une fonction qui recupère dans un array le dernier ID actif (id ou tu mettras id=OSM) et tu passe ceci a ton removeL.
Après je ne sais pas si cela fonctionnera, mais c'est de la bricole pour arriver à tes fins! (Car il y a toujours une meilleure solution. Si j'ai le temps je reviendrais dessus)
https://jsfiddle.net/luda973/rafgnb8s/20/
ps : Si tu fais attention, tu remarqueras qu'il ne passe jamais dans ta condition else (met un simple console.log("yo") et tu verras).
Hors ligne
#5 Fri 20 May 2016 16:24
- B.Arnaud
- Participant occasionnel
- Date d'inscription: 13 Jan 2011
- Messages: 19
Re: Leaflet - bootstrapSwitch boutons on/off - Action sur layers
Ok là c'est super !
Effectivement, plus il y aura de couches, plus il y aura de .remov. Pour le moment j'ai 2 fois une quinzaine de couches. Pour le coup effectivement le code ne sera pas des plus optimisé, mais aura le mérite de fonctionner grace à toi.
Je vais partir sur cette base et continuer à chercher une méthode moins bricole pour arriver à ce résultat.
Je m'y repenche ce We, et reste dans le coin si jamais d'autres idées arrivent.
Merci de ton aide demo972
Hors ligne
#6 Wed 08 June 2016 15:36
- B.Arnaud
- Participant occasionnel
- Date d'inscription: 13 Jan 2011
- Messages: 19
Re: Leaflet - bootstrapSwitch boutons on/off - Action sur layers
Bonjour,
Petit retour.
Pour le moment je n'ai pas trouvé de méthode qui fonctionne et simplifie le code.
Pour le coup, je vais rester avec cette solution.
L'avantage : Ce n'est pas trop compliqué à comprendre et mettre en forme
L'inconvénient : Plus il y a de layers ... plus il y a de lignes ... il ne faut pas en oublier !
Hors ligne
Pages: 1
- Sujet précédent - Leaflet - bootstrapSwitch boutons on/off - Action sur layers - Sujet suivant
