Discussion :

[eMxPi]

Bonjour,

nous avons mis en place l'api geoportail sur notre site grand publique et nous rencontrons un souci quand nous basculons sur mobile. En effet, nous avons conservé le viewer par défaut et il n'est plus possible de cliquer sur les cases à cocher pour activer une couche, ou de masquer/Afficher le gestionnaire de couches. les clics sont directement interprété par la map.

Comment retrouver le comportement correct ?

[jrenard]

Bonjour,

C'est effectivement un comportement connu et très gênant. Pour expliquer de façon triviale, les évènements tactiles de touchstart et touchend "traversent" les contrôles pour aller agir sur la carte qui se trouve derrière.

Pour éviter ce comportement, il va falloir redéfinir le comportement associé à ces évènements sur chacun des contrôles, de manière à :
- supprimer leur comportement par défaut
- arrêter la propagation de l'élément au travers du contrôle
- et dans le cas du touchstart affecter le comportement attendu en appelant le comportement qui se déclenche par défaut en monde non tactile (à ne pas dupliquer dans le touchend sinon l'action sera lancée deux fois).

En pratique, imaginons que vous ayez créé un bouton permettant de faire un zoom avant sur votre carte, de nom de contrôle "ZoomOn" et géré par un élément HTML de classe "boutonZoomOnItemInactive", la gestion des comportements tactiles se ferait de la façon suivante :

Code :

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

1
2
3
4
5
6
7
8
9
10
$('.boutonZoomOnItemInactive').on('touchstart', function(e) {
	e.preventDefault(); // Annulation du comportement par défaut
	e.stopPropagation(); // Arrêt de la propagation
	boutonZoomOn.trigger(); // lancement de l'action souhaitée
});
$('.boutonZoomOnItemInactive').on('touchend', function(e) {
	e.preventDefault(); // Annulation du comportement par défaut
	e.stopPropagation(); // Arrêt de la propagation
});

Ce bout de code en JQuery est à adapter en Javascript pur si on utilise pas JQuery, et à appliquer sur tous les contrôles de la carte, le plus délicat étant de bien redéfinir l'action souhaitée.

[eMxPi]

Bonjour,

C'est effectivement un comportement connu et très gênant. Pour expliquer de façon triviale, les évènements tactiles de touchstart et touchend "traversent" les contrôles pour aller agir sur la carte qui se trouve derrière.

Pour éviter ce comportement, il va falloir redéfinir le comportement associé à ces évènements sur chacun des contrôles, de manière à :
- supprimer leur comportement par défaut
- arrêter la propagation de l'élément au travers du contrôle
- et dans le cas du touchstart affecter le comportement attendu en appelant le comportement qui se déclenche par défaut en monde non tactile (à ne pas dupliquer dans le touchend sinon l'action sera lancée deux fois).

En pratique, imaginons que vous ayez créé un bouton permettant de faire un zoom avant sur votre carte, de nom de contrôle "ZoomOn" et géré par un élément HTML de classe "boutonZoomOnItemInactive", la gestion des comportements tactiles se ferait de la façon suivante :

Code :

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

1
2
3
4
5
6
7
8
9
10
$('.boutonZoomOnItemInactive').on('touchstart', function(e) {
	e.preventDefault(); // Annulation du comportement par défaut
	e.stopPropagation(); // Arrêt de la propagation
	boutonZoomOn.trigger(); // lancement de l'action souhaitée
});
$('.boutonZoomOnItemInactive').on('touchend', function(e) {
	e.preventDefault(); // Annulation du comportement par défaut
	e.stopPropagation(); // Arrêt de la propagation
});

Ce bout de code en JQuery est à adapter en Javascript pur si on utilise pas JQuery, et à appliquer sur tous les contrôles de la carte, le plus délicat étant de bien redéfinir l'action souhaitée.

Bonjour,

merci pour cette réponse, n'existe-t-il pas un moyen plus rapide de redéfinir le comportement pour les contrôles natifs (arbre des couches, fenêtre de controle ?) comme dans la PJ ?

[jrenard]

Malheureusement non.

SI je prends par exemple l'ouverture du gestionnaire de couches qui intervient normalement au clic sur son titre, voilà comment il faut redéfinir les choses :

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
 
var lsTitle = document.getElementsByClassName('gpControlLabelClass')[0];
  lsTitle.addEventListener('touchstart',function(e) {
    e.preventDefault();
    e.stopPropagation();
    lsTitle.click();
  });
  lsTitle.addEventListener('touchend',function(e) {
    e.preventDefault();
    e.stopPropagation();
  });

Et alors vous retrouvez en comportement tactile le comportement constaté normalement au clic.

Il vous faut donc pointer tous les éléments qui rencontrent le problème, et à partir de leur nom de classe redéfinir l'appel au clic lors d'un évènement tactile, exactement de la même manière. En collant ce morceau de code sur tous les contrôles posant problème, vous devriez vous en sortir.

[eMxPi]

Malheureusement non.

SI je prends par exemple l'ouverture du gestionnaire de couches qui intervient normalement au clic sur son titre, voilà comment il faut redéfinir les choses :

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
 
var lsTitle = document.getElementsByClassName('gpControlLabelClass')[0];
  lsTitle.addEventListener('touchstart',function(e) {
    e.preventDefault();
    e.stopPropagation();
    lsTitle.click();
  });
  lsTitle.addEventListener('touchend',function(e) {
    e.preventDefault();
    e.stopPropagation();
  });

Et alors vous retrouvez en comportement tactile le comportement constaté normalement au clic.

Il vous faut donc pointer tous les éléments qui rencontrent le problème, et à partir de leur nom de classe redéfinir l'appel au clic lors d'un évènement tactile, exactement de la même manière. En collant ce morceau de code sur tous les contrôles posant problème, vous devriez vous en sortir.

Bonjour merci pour ce complément et la confirmation qu'il n'y avait pas de moyen plus rapide

[iBarker]

Bonjour,

Je rencontre actuellement le même problème. J'ai pu résoudre une partie de ce problème grâce à la solution de jrenard.
Cependant je n'arrive pas à faire en sorte que le "slider" permettant de gérer le niveau de zoom soit utilisable sur mobile.
Si l'un d'entre vous a une solution, je suis preneur !

Merci et bonne fin d'année à tous

[jrenard]

Bonjour,

Retrouver le comportement intégral du slider sur mobile va être compliqué car sa structure et sa gestion évènementielle sont assez complexes. En particulier, permettre le cliquer-glisser sera probablement très complexe à mettre en oeuvre en mode tactile.

On peut en revanche à peu de frais rendre le slider fonctionnel dans sa capacité à changer le niveau de zoom lorsque l'on fait un clic simple dessus. Il suffit pour cela de stopper la propagation des évènement tactiles sur la barre de zoom :

Code javascript :

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

1
2
3
4
5
6
7
var lsZoomBar = document.getElementsByClassName('gpZoomBarClass')[0];
lsZoomBar.addEventListener('touchstart',function(e) {
    e.stopPropagation();
});
lsZoomBar.addEventListener('touchend',function(e) {
    e.stopPropagation();
});

[iBarker]

Je me doutais en effet que reproduire ce comportement pouvait être complexe. Dans tous les cas merci beaucoup, cette solution me convient très bien !

Bonne journée