Discussion :

[AlexandreJcpn]

Bonjour à tous,

Je suis actuellement entrain réaliser un exercice et je suis bloqué, pourriez vous m'aiguiller s'il vous plait ?

Le problème : Quand je clique sur mon marqueur, ma popup s'ouvre correctement avec les données que je souhaite, jusque la pas de problème. Mais ensuite je voudrais que mon bouton me renvoi vers mon formulaire sur une autre page et la je ne comprend ça ne fonctionne pas. Après avoir cherché de mon côté je viens vers vous pour m'aider a me débloquer.
Je vous met une capture de mon code.



En esperant qu'une personne pourra m'aider.

Cordialement,
Alexandre

[krakatoa]

le marker fait partie de google maps
le code html que tu y met fait partie de google maps et non d'angular

donc le routerlink ne fonctionnera pas

faut plutot utiliser du html classique avec un href

[AlexandreJcpn]

Merci pour l'information Krakatoa mais comment dois je m'y prendre ?
Dois-je mettre le popup dans le fichier html aussi ou je peux laisser le popup dans le fichier ts et ajouter la partie intérieur du popup dans le fichier html ?
Je comprend pas trop la manière dont il faut s'y prendre.
En espérant que vous pourriez m'éclairer un peu plus sur le sujet.

Cordialement,
Alexandre

[dukoid]

tu peux mettre le code avec la balise #

tu peux essayer ce code :

(1)

Code :

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

1
2
3
4
 
.on('click', () => {
  console.log('click !!!!!!!!')
});

à quel moment click !!! s'affiche dans la console ?
clic sur le bouton ou sur le marqueur ou les 2 ?


(2)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
 
.bindPopur('
 
  <button (click)="clickMark()">......</button>
')
.on('click', () => {
  console.log('click !!!!!!!!')
});
 
 
clickMark() {
  console.log('clickMark !!!')
}

clickMark !!! s'affiche dans la console ?

[AlexandreJcpn]

Pour le (1), le click s'affiche dans la console quand je clique sur le marqueur.
Pour le (2), ça ne fonctionne pas.

Mais je ne vois pas la ou vous voulez en venir ?

Mon but étant de faire fonctionner mon bouton "Réserver un vélo" et me rediriger vers une autre page.

Bien cordialement,
Alexandre

[dukoid]

(1) et pas sur le bouton ?


(3)

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
.bindPopur('
 
  <button id="toto">......</button>
')
.on('click', () => {
 
});
...
...
document.getElementById ("toto") .addEventListener('click',function ()
{
    console.log("test3");
 
    this.router.navigate(['/ma-page', { id: heroId }]);  // exemple avec paramètre
});

[AlexandreJcpn]

Non pas sur le bouton. Ça m'embête car c'est un service et je n'ai donc pas de fichier html qui correspond au service. Enfin je suis un peu perdu la. C'est dommage parce qu'il me reste plus qu'a trouver cette solution pour terminer mon exercice.

Je vais essayer ce que vous venez de m'envoyer, merci encore

[dukoid]

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
 
.bindPopur('
 
<button id="toto">......</button>
')
.on('click', () => {
 
});
...
...
document.getElementById ("toto") .addEventListener('click',function ()
{
console.log("test3");
 
this.router.navigate(['/ma-page', { id: heroId }]); // exemple avec paramètre
});

faudra nommer dynamiquement les id des markeurs car ils ne peuvent pas s'appeller tous "toto"

[AlexandreJcpn]

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
 
public makeStationMarkers(map: L.Map): void {
    fetch('https://api.jcdecaux.com/vls/v1/stations?contract=cergy-pontoise&apiKey=c90a137bb16a557c0dc0362a3606b71ce06515fe')
    .then((resp) => resp.json())
    .then(function(data) {
      for(let coords of data){
        L.marker([coords.position.lat, coords.position.lng])
        .bindPopup(`
          <h3>${coords.name}</h3>
          <p>${coords.address}</p>
          <p>${coords.available_bikes}</p>
          <button id="toto" routerLink="/app-form" class="btn">Réserver un vélo</button>
        `)
        .on('click',()=>{
          console.log('click!!!!')
          map.flyTo([coords.position.lat,coords.position.lng]);
        }).addTo(map);
      }
    });
    document.getElementById("toto")?.click();
  }
}

Ça ne fonctionne toujours pas au click sur le boutton

[AlexandreJcpn]

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
 
public makeStationMarkers(map: L.Map): void {
    fetch('https://api.jcdecaux.com/vls/v1/stations?contract=cergy-pontoise&apiKey=c90a137bb16a557c0dc0362a3606b71ce06515fe')
    .then((resp) => resp.json())
    .then(function(data) {
      for(let coords of data){
        L.marker([coords.position.lat, coords.position.lng])
        .bindPopup(`
          <h3>${coords.name}</h3>
          <p>${coords.address}</p>
          <p>${coords.available_bikes}</p>
          <button id="toto">Réserver un vélo</button>
        `)
        .on('click',()=>{
          console.log('click!!!!')
          map.flyTo([coords.position.lat,coords.position.lng]);
        }).addTo(map);
      }
    });
    document.getElementById("toto") ?.addEventListener('click', function(){
      console.log("test3");
      this.router.navigate(['/app-form', {id: this.id}]);
    });
  }
}

Il ne reconnait "router"

Je me demande si je vais réussir à le résoudre ce problème.
En tout cas je vous en remercie beaucoup malgré qu'on est pas trouvé la solution pour le moment

[krakatoa]

tu as bien mis :

Code :

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

1
2
 
  constructor(private router: Router) { }

et essaye ça :

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
public makeStationMarkers(map: L.Map): void {
    const that = this;

    fetch('https://api.jcdecaux.com/vls/v1/stations?contract=cergy-pontoise&apiKey=c90a137bb16a557c0dc0362a3606b71ce06515fe')
    .then((resp) => resp.json())
    .then(function(data) {
      for(let coords of data){
        L.marker([coords.position.lat, coords.position.lng])
        .bindPopup(`
          <h3>${coords.name}</h3>
          <p>${coords.address}</p>
          <p>${coords.available_bikes}</p>
          <button id="toto">Réserver un vélo</button>
        `)
        .on('click',()=>{
          console.log('click!!!!')
          map.flyTo([coords.position.lat,coords.position.lng]);
        }).addTo(map);
      }
    });
    document.getElementById("toto") ?.addEventListener('click', function(){
      console.log("test3");
      that.router.navigate(['/app-form', {id: this.id}]);
    });
  }
}

[AlexandreJcpn]

Cette fois ci plus d'erreur dans le code, merci pour le router je l'avais oublié.. mais quand je clique sur 'réserver un vélo' ça ne réagit toujours pas dans l'inspecteur

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
30
 
export class MarkerService {
  constructor(private http: HttpClient, private router:Router) { }
 
  public makeStationMarkers(map: L.Map): void {
    const that = this;
 
    fetch('https://api.jcdecaux.com/vls/v1/stations?contract=cergy-pontoise&apiKey=c90a137bb16a557c0dc0362a3606b71ce06515fe')
    .then((resp) => resp.json())
    .then(function(data) {
      for(let coords of data){
        L.marker([coords.position.lat, coords.position.lng])
        .bindPopup(`
          <h3>${coords.name}</h3>
          <p>${coords.address}</p>
          <p>${coords.available_bikes}</p>
          <button id="toto">Réserver un vélo</button>
        `)
        .on('click',()=>{
          console.log('click!!!!')
          map.flyTo([coords.position.lat,coords.position.lng]);
        }).addTo(map);
      }
    });
    document.getElementById("toto") ?.addEventListener('click', function(){
      console.log("test3");
      that.router.navigate(['app-bookink', {id: this.id}]);
    });
  }
}

[krakatoa]

"test3' s'affiche ou pas ?

[AlexandreJcpn]

Merci pour votre réactivité.

Non, il ne s'affiche pas.

[krakatoa]

peut etre comme ça :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
        .on('click',()=>{
          console.log('click!!!!')
          map.flyTo([coords.position.lat,coords.position.lng]);
 
          document.getElementById("toto") ?.addEventListener('click', function(){
            console.log("test3");
            that.router.navigate(['app-bookink', {id: this.id}]);
          });
        }).addTo(map);
      }
    });
 
  }

sinon met ton probleme sur stackoverflow
traduit avec un traducteur anglais si tu n'es pas doué in english

il y a aussi la chaine angular sur discord

[AlexandreJcpn]

Génial !!!!
Merci beaucoup, j'arrive enfin sur la page de mon formulaire

[NoSmoking]

Bonjour,
au moment où le script exécute cette ligne :

Code :

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

document.getElementById("toto") ?.addEventListener('click', function(){

ton élément bouton n'existe pas encore, l'utilisation du chaînage optionnel ?. évite les erreurs mais n'aide pas forcément à avoir une vision correcte de ce qui se passe !

La méthode qui est proposée est un pis-aller car à chaque fois que l'on va cliquer sur la popup il va se rajouter un événement sur le bouton.

Une méthode plus simple serait d'utiliser le paramètre event passer à le fonction lors du click, quelque chose comme :

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
for (let coords of data) {
  const marker = L.marker([coords.position.lat, coords.position.lng])
    .bindPopup(`
      <h3>${coords.name}</h3>
      <p>${coords.address}</p>
      <p>${coords.available_bikes}</p>
      <button id="toto">Réserver un vélo</button>
    `)
    .on('click', () => {
      map.flyTo([coords.position.lat, coords.position.lng]);
    })
    .addTo(map);
 
  // une façon de gérer la popup
  // ouvre la popup pour que le DOM la construise et la récupère
  const popup = marker.openPopup().getPopup();
  // on la referme
  marker.closePopup();
  // affectation de l'événement sur le HTMLElement
  L.DomEvent.on(popup.getElement(), "click", (event) => {
    if ("BUTTON" == event.target.tagName) {
      that.router.navigate(['app-bookink', {
        id: this.id    // Attention à la valeur de l'ID avec this
      }]);
    }
  });
}

... accessoirement cela évite les ID dupliquées !

Une autre bonne solution serait de créer un composant popup, cela doit même déjà exister en Angular.

[Edit] correction du code pour qu'il soit fonctionnel dans le contexte décrit

[NoSmoking]

j'ai corrigé le code pour qu'il soit fonctionnel, normalement, dans le contexte décrit, j'avais fait un peu trop de raccourci !

[krakatoa]

merci, ça peut etre utile !

[AlexandreJcpn]

Merci beaucoup pour cette solution