Discussion :

[jac83]

Bonjour,
j'utilise Leaflet pour afficher les parcours des membres de mon site dédié au vtt. Sur la carte apparaissent donc les tracés des membres (format gpx) ainsi qu'une icône au point de départ. Si on clique sur les tracés, une popup s'ouvre avec des infos sur le tracé et un lien vers la description du parcours. Jusque là tout va bien. J'aimerai maintenant qu'au survol de la trace par la souris (mouseover) la trace change de couleur et d'épaisseur pour bien la visualiser (sinon pour des traces proches tout se mélange). dans mon code, les gpx ont pour nom gpxblue, gpxred et gpxblack en fonction de la difficulté du parcours. J'ai essayé

Code :

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

1
2
3
4
5
6
7
gpxred.on('mouseover', function (e) {
    new L.GPX(trace, {async: true, polyline_options: {
          color: 'black',
                weight: 8,
                opacity: 1
      }}).addTo(map);
});

à la suite de l'affichage de gpxred ... le parcours augmente bien d'épaisseur et change bien de couleur ... mais plus de popup et lorsque la souris ne survole plus le tracé il ne revient pas à la couleur d'origine (j'ai essayé de rajouter un gpxred.on('mouseout' ... rien y fait .
Ca fait un moment que je me prends la tête un poil d'aide me fera du bien

>>>voir le fichier de test ... avec une 20aine de tracé

cordialement

[NoSmoking]

Bonjour,
j'ai un peu de mal à comprendre ce que tu essaies de faire, créer un nouveau Layer au mouseover ou changer le style de celui survolé ?

J'aurais plutôt vu la 2^éme solution en chainant les événements

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
gpxred.on('mouseover', function (e) {
  this.setStyle({
    color: 'black',
    weight: 8,
    opacity: 1
  })
}).on('mouseout', function () {
  this.setStyle({
    color: 'red',
    weight: 8,
    opacity: 0.7
  });
});

[jac83]

Bonjour NoSmoking,
effectivement à la vue du code que j'ai inscrit on pouvait penser que je voulais créer un autre layer. Mais tu as bien vu ce que je voulais c'était bien la 2ème solution . Je viens de mettre en place la solution proposée ... qui marche à merveille, merci.
>>la preuve en image
... Il ne me reste plus qu'à trouver le moyen de faire un zoom sur une zone délimitée avec la souris pour agrandir un "lieu" où il y a des traces .
je mets donc la dicussion en résolu.

[NoSmoking]

Il ne me reste plus qu'à trouver le moyen de faire un zoom sur une zone délimitée avec la souris...

Grand veinard cela existe dans leaflet, il te suffit de rajouter dans les options de ta carte boxZoom: true, et d'enfoncer la touche SHIFT en cliquant sur la carte pour qu'une zone de zoom apparaisse.

[jac83]

Bonjour NoSmoking,

j'ai pourtant lu la documentation ... pas suffisamment apparemment .( J'avais regardé dans la doc sur le zoom et pasdans les options carte ... où c'est bien inscrit avec la manière de s'en servir)
encore une fois merci, ça fonctionne
cordialement