Navigating to Angular component from Mapbox popup

Question

Navigating to Angular component from Mapbox popup

I'm currently working on a mobile app with Ionic and Angular. The app features various Mapbox markers that open custom popups when clicked, each displaying unique content. I want the button within the popup to redirect users to a page with more information about that specific location. Here is a snippet of my code:

ionViewWillEnter(){
    this.businessService
    .getBusinessCoords()
    .subscribe(data=>{
      for(const key in data){
        let popup = new mapboxgl.Popup({
          className:'popup-class'
        }).setHTML(
            `<div>
            <img src= ${data[key].profile_picture} width="150">
            <b style="text-align: center;"> ${data[key].name}</b><br>
            <i>${data[key].location.address}</i><br>
            <a id="${key}">Tap to see available offers!</a>
            </div>
            `
          )
        new mapboxgl.Marker({
          color:"#cc0000",
          draggable: false
        }).setLngLat([data[key].location.coord.lng, data[key].location.coord.lat])
          .setPopup(popup)
          .addTo(this.map);
      }
    })//end subscribe
  }

An ideal solution would involve using the href attribute within the <a> tag, but I prefer an Angular-specific routing method to direct users to individual business pages based on the ${key} value. I've experimented with different approaches like

document.getElementByClassName("some-test-class")[0].addEventListener('click',()=>{console.log("hello!"});

, following discussions on Stack Overflow, but encountered errors such as "Cannot read property 'addEventListener' of undefined." Other solutions involving ComponentFactoryResolver seem overly complex for this task. Any suggestions for a simpler, more direct approach or insights on why previous attempts failed would be greatly appreciated.

https://i.sstatic.net/0neW8.png

angular typescript ionic-framework mapbox-gl-js ionic5

Answer 1

Answer №1

If you're working with mapboxgl.Source and mapboxgl.Layer for your data, there's another approach you can take.

Convert your data into GeoJson format where the dynamic popup content is stored in the features' properties.
Set up a mapboxgl.Source with type: "geojson" using your transformed GeoJson data.
Create a mapboxgl.Layer with the created source and apply your preferred styling.
Include a popup container in your component template that will be referenced in the setDOMContent method. Check out the example below for guidance.

This integration allows for seamless interaction between the Popup and Angular framework (beyond just routing).

<!-- component.html -->
<div #popupContainer class="popup-container">
  <div *ngIf="popup">
    <img [src]="popup.profile_picture" width="150">
    <b style="text-align: center;">{{ popup.name }}</b><br>
    <i>{{ popup.location.address }}</i><br>
    <a routerLink="/foodrevolution/profile">Tap to see available offers!</a>
  </div>
</div>

// component.ts
@ViewChild("popupContainer") popupContainer: any;
popup: any;

ionViewDidEnter() {
  this.businessService
    .getBusinessCoords()
    .subscribe((data) => {
      const geoJson = toGeoJson(data);
      this.map.getSource("source-id").setData(geoJson);
    });
  this.map.on("click", "points-layer", (e) => {
    const coordinates = e.features[0].geometry.coordinates.slice();
    this.popup = e.features[0].properties;
    new mapboxgl.Popup()
      .setLngLat(coordinates)
      .setDOMContent(this.popupContainer.nativeElement)
      .addTo(this.map);
  });
}

An individual Feature within the GeoJson FeatureCollection should resemble something like this:

{
  type: "Feature",
  geometry: {
    type: "Point",
    coordinates: [
      data[key].location.coord.lng,
      data[key].location.coord.lat
    ]
  },
  properties: {
    key: key,
    name: data[key].name
    // ...
  }
}

Answer 2

If you're working with mapboxgl.Source and mapboxgl.Layer for your data, there's another approach you can take.

Convert your data into GeoJson format where the dynamic popup content is stored in the features' properties.
Set up a mapboxgl.Source with type: "geojson" using your transformed GeoJson data.
Create a mapboxgl.Layer with the created source and apply your preferred styling.
Include a popup container in your component template that will be referenced in the setDOMContent method. Check out the example below for guidance.

This integration allows for seamless interaction between the Popup and Angular framework (beyond just routing).

<!-- component.html -->
<div #popupContainer class="popup-container">
  <div *ngIf="popup">
    <img [src]="popup.profile_picture" width="150">
    <b style="text-align: center;">{{ popup.name }}</b><br>
    <i>{{ popup.location.address }}</i><br>
    <a routerLink="/foodrevolution/profile">Tap to see available offers!</a>
  </div>
</div>

// component.ts
@ViewChild("popupContainer") popupContainer: any;
popup: any;

ionViewDidEnter() {
  this.businessService
    .getBusinessCoords()
    .subscribe((data) => {
      const geoJson = toGeoJson(data);
      this.map.getSource("source-id").setData(geoJson);
    });
  this.map.on("click", "points-layer", (e) => {
    const coordinates = e.features[0].geometry.coordinates.slice();
    this.popup = e.features[0].properties;
    new mapboxgl.Popup()
      .setLngLat(coordinates)
      .setDOMContent(this.popupContainer.nativeElement)
      .addTo(this.map);
  });
}

An individual Feature within the GeoJson FeatureCollection should resemble something like this:

{
  type: "Feature",
  geometry: {
    type: "Point",
    coordinates: [
      data[key].location.coord.lng,
      data[key].location.coord.lat
    ]
  },
  properties: {
    key: key,
    name: data[key].name
    // ...
  }
}

Answer 3

Answer №2

After some trial and error, I managed to resolve the issue by implementing the solution provided in the initial response on this thread. Here is my updated code snippet:

ionViewDidEnter(){
    this.businessService
    .getBusinessCoords()
    .subscribe(data=>{
      for(const key in data){
        const popupContent = document.createElement('div');
        popupContent.innerHTML = `<img src= ${data[key].profile_picture} width="150">
                                  <b style="text-align: center;"> ${data[key].name}</b><br>
                                  <i>${data[key].location.address}</i><br>`;
        const atag = document.createElement('div');
        atag.innerHTML = `<a id="${key}">Tap to see available offers!</a>`
        popupContent.appendChild(atag); 
        atag.addEventListener('click', (e)=>{
          console.log('Button was clicked' + key);
          this.router.navigateByUrl('/foodrevolution/profile')
        })
        let popup = new mapboxgl.Popup({
        }).setDOMContent(popupContent); 
          
        new mapboxgl.Marker({
          color:"#cc0000",
          draggable: false
       }).setLngLat([data[key].location.coord.lng, data[key].location.coord.lat])
         .setPopup(popup)
         .addTo(this.map);
      }
    })//end subscribe
  }

In this revised version, note that the router variable is declared as type Router from the @angular/router package. Interestingly, the functionality remains consistent even when using ionViewWillEnter, suggesting that the choice of a lifecycle hook may not be critical in this scenario.

Answer 4

After some trial and error, I managed to resolve the issue by implementing the solution provided in the initial response on this thread. Here is my updated code snippet:

ionViewDidEnter(){
    this.businessService
    .getBusinessCoords()
    .subscribe(data=>{
      for(const key in data){
        const popupContent = document.createElement('div');
        popupContent.innerHTML = `<img src= ${data[key].profile_picture} width="150">
                                  <b style="text-align: center;"> ${data[key].name}</b><br>
                                  <i>${data[key].location.address}</i><br>`;
        const atag = document.createElement('div');
        atag.innerHTML = `<a id="${key}">Tap to see available offers!</a>`
        popupContent.appendChild(atag); 
        atag.addEventListener('click', (e)=>{
          console.log('Button was clicked' + key);
          this.router.navigateByUrl('/foodrevolution/profile')
        })
        let popup = new mapboxgl.Popup({
        }).setDOMContent(popupContent); 
          
        new mapboxgl.Marker({
          color:"#cc0000",
          draggable: false
       }).setLngLat([data[key].location.coord.lng, data[key].location.coord.lat])
         .setPopup(popup)
         .addTo(this.map);
      }
    })//end subscribe
  }

In this revised version, note that the router variable is declared as type Router from the @angular/router package. Interestingly, the functionality remains consistent even when using ionViewWillEnter, suggesting that the choice of a lifecycle hook may not be critical in this scenario.

Answer 5

Answer №3

It is not possible to access any htmlElement in ionViewWillEnter since the view has not been created yet. Consider moving this code to ionViewDidEnter for proper execution.

Answer 6

It is not possible to access any htmlElement in ionViewWillEnter since the view has not been created yet. Consider moving this code to ionViewDidEnter for proper execution.

Navigating to Angular component from Mapbox popup

Answer №1

Answer №2

Answer №3

Similar questions

How to remove the border of the MUI Select Component in React JS after it has been clicked on

Obtaining the display name and phone numbers of a contact

"Encountering issues with NPM run build not working during Docker build process

What are some effective techniques for handling asynchronous operations while utilizing [displayWith] in an autocomplete

How to attach input to function invocation in Angular 2

TypeError thrown by Basic TypeScript Class

Issue with Discord.js (14.1) - Message Handling Unresponsive

In what scenarios would it be more advantageous to utilize ngStyle over creating a custom directive?

Guide to releasing a NestJs library on npm using the nrwl/nx framework

Storing JSON data in LocalStorage or within the App on Ionic 2

Create a nested array of subcategories within an array object

The attribute 'sandwiches' cannot be found within the data type 'string'

Separating Angular code into distinct components

Creating personalized properties for a Leaflet marker using Typescript

How to fix the error: ui-switch is not a recognized element in Angular 5?

Altering a public variable of a component from a sibling component

Is the return type of 'void' being overlooked in TypeScript - a solution to avoid unresolved promises?

Encountering a Difficulty while attempting to Distinguish in Angular

The installation of npm failed with the error message "Error! Code ENO

Creating Angular unit test modules