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

To display custom markers ([code example here](https://www.mapbox.com/mapbox-gl-js/example/custom-marker-icons/)) 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?