Mapbox marker click event in Ionic 2 / Angular 2

Question

I'm getting started with Ionic 2 / Angular 2 and trying to implement Mapbox into my app.

To display custom markers (code example here) Mapbox expects a DOM element, which, as far as I understand it, is not really the Angular way. I want to add a click event on the marker but because Mapbox uses elements, I'm not entirely sure how to approach this cleanly "the Angular way".

Basically, this is the latest version (showing the map and the marker works, but predictably when I click the marker the event listener can't find this.onMarkerClicked):

export class HomePage {
  //(...)

  refreshMapPosition() {
    /*Initializing Map*/
    mapboxgl.accessToken = this.config.mapbox_public_token;
    this.map = new mapboxgl.Map({ /*https://www.mapbox.com/mapbox-gl-js/api/#map*/
      style: 'mapbox://styles/mapbox/light-v9',
      center: [this.Coordinates.longitude, this.Coordinates.latitude],
      zoom: 16,
      pitch: 80,
      minZoom: 7.5,
      maxZoom: 17,
      container: 'map',
      interactive: false,
    });

    var elCreature = document.createElement('div');
    elCreature.className = 'icon-creature alpaca';
    elCreature.addEventListener('click', function() {
      this.onMarkerClicked();
    });

    var markerCreature = new mapboxgl.Marker(elCreature, {offset: [-20, -20]})
      .setLngLat([this.Coordinates.longitude, this.Coordinates.latitude])
      .addTo(this.map);
  }

  onMarkerClicked() {
    console.log("click");
  }
}

I'd be much happier if it was possible to have elCreature coming from a component, where I could use <div class="icon-creature alpaca" (click)="onMarkerClicked"></div>. What's the best approach there?

Answer 1

// on your marker HTML
var _self = this;
var _data = this.value;
el.addEventListener('click', function() {
   self.markerClicked(_data);
});

// angular method
markerClicked(value){
  console.log(value);
}

Answer 2

So I found something that maybe could help you, I created a marker as the documentation mentioned and then I got the element of that market with the getElement() function, after that I added the event to the marker, I do not know if it works with various markers but you can try.

var marker = new mapboxgl.Marker()
.setLngLat([lng, lat])
.addTo(this.map);

marker.getElement().addEventListener("click", function(){
  console.log("function");
});

After sleep a while I found that there another thing that you can use, so you can create a Popup first and then add that Popou to a Marker object with the setPopup() method and actually it like an onClick event, because, when you click the Marker the Popup appears. Here is an example.

var popup = new mapboxgl.Popup()
.setLngLat(coordinates)
.setHTML("<h1>Hello</h1>");

var marker = new mapboxgl.Marker()
.setLngLat(coordinates)
.setPopup(popup)
.addTo(this.map);

The variable "coordinates" is an array, such that coordinates = [lng,lat], and this.map is just a variable under my Angular class that call to the mapboxgl.Map object.

You have to know that I am using Ionic 4 in this case. If you need more information please tell me.

Regards.