1

I'm dealing with a problem I've been stuck on for a few days. I'm currently wanting my markers to navigate to another page when clicked on the Leaflet Map. So my understanding (correct me if I'm wrong) of the marker.on('click', someFunction) leaflet method is that it is performed within the class of the marker even if the function is present in a page.ts file.

I would like some help on calling my router in my page.ts file to navigateByURL to another page when the marker is clicked.

The error I currently get is router Undefined and sometimes navigateByURL undefined.

What I currently have is...

displayMarkerLocations(){
  this.places.forEach(place => {
    var marker = L.marker([place.location.Y, place.location.X]);
    marker.on('click', this.OnClick);
    marker.bindPopup(place.address);
    marker.noMoveStart = true;
    marker.addTo(this.markerLayer);
  });
}

onClick(e){
  this.router.navigateByUrl('tabs/tab3');
}
Arun Kamalanathan
  • 8,107
  • 4
  • 23
  • 39
themoose
  • 149
  • 1
  • 11
  • https://stackoverflow.com/questions/16927793/marker-in-leaflet-click-event check this out – Mohan Gopi Dec 11 '19 at 03:49
  • 1
    is it a typo? you have OnClick and onClick? – Sergey Rudenko Dec 11 '19 at 07:33
  • 1
    Sergey Rudekno, sorry that was a typo when I entered the question, they're both onClick. – themoose Dec 11 '19 at 21:40
  • 1
    `onClick(e) { console.log(this); var content = e.target.getPopup().getContent(); console.log(content); this.navCtrlData.navigate('/tabs/tab3', {content: content}); }` works with ` marker.on('click', this.onClick, this); ` using this dependency `import { NgxNavigationWithDataComponent } from 'ngx-navigation-with-data';` . On arrival to new page I get data that was passed using `ionViewDidEnter() { console.log(this.navCtrl.get('content')); this.parseOutageDetails(this.navCtrl.get('content')); }` – themoose Jan 10 '20 at 03:36

0 Answers0