> import { Component, OnInit } from '@angular/core';
import * as mapboxgl from 'mapbox-gl';
import * as turf from 'turf';
// import * as bearing from 'turf-bearing';
import { MapService } from '../map.service';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.sass']
})
export class MapComponent implements OnInit {


  constructor(private servimapa: MapService) { }

  ngOnInit() {
    this.buildMap();
  }

  private buildMap() {

    mapboxgl.accessToken = 'pk.eyJ1IjoibWFyNTgiLCJhIjoiY2ptNjQyN3ZjMHRydTN2cG9ybW9uMGVzOSJ9.LnduR5yIGHqGHGOEN7TlYw';
    const map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mar58/cjmhifftebj1m2rmql0kntkgb',
      center: [3.189744, 35.839860],
      zoom: 3.4,
      maxZoom: 5,
      minZomm: 2

    });

    map.addControl(new mapboxgl.NavigationControl());

    const destinos =  {
      type: 'FeatureCollection',
      features: [
        {
          type: 'Feature',
          geometry: {
            type: 'Point',
            coordinates: [-1.8585905869460078, 38.95939622270333]
          },
          properties: {
            title: 'Albacete',
            price: '600$',
            image: 'https://farm9.staticflickr.com/8604/15769066303_3e4dcce464_n.jpg',
            'marker-color': '#6495ED',
            'marker-size': 'large',
            'marker-symbol': 'rocket-15'
          }
        },
        {
          type: 'Feature',
          geometry: {
            type: 'Point',
            coordinates: [-3.785098671342695, 40.350739864455846]
          },
          properties: {
            title: 'Madrid',
            price: '600$',
            image: 'https://farm9.staticflickr.com/8604/15769066303_3e4dcce464_n.jpg',
            'marker-color': '#3bb2d0',
            'marker-size': 'large',
            'marker-symbol': 'rocket-15'
          }
        },
        {
          type: 'Feature',
          geometry: {
            type: 'Point',
            coordinates: [-4.108992254186973, 38.69287335431213]
          },
          properties: {
            title: 'Puertollano',
            price: '10$',
            image: 'https://farm9.staticflickr.com/8604/15769066303_3e4dcce464_n.jpg',
            'marker-color': '#3bb2d0',
            'marker-size': 'large',
            'marker-symbol': 'rocket-15'
          }
        },
        {
          type: 'Feature',
          geometry: {
            type: 'Point',
            coordinates: [12.52267330310275, 41.887991570175956]
          },
          properties: {
            title: 'Italia',
            price: '600$',
            image: 'https://farm9.staticflickr.com/8604/15769066303_3e4dcce464_n.jpg',
            'marker-color': '#3bb2d0',
            'marker-size': 'large',
            'marker-symbol': 'rocket-15'
          }
        },
        {
          type: 'Feature',
          geometry: {
            type: 'Point',
            coordinates: [139.78208123295104, 35.750342198794684]
          },
          properties: {
            title: 'Tokyo',
            price: '2600$',
            image: 'https://farm9.staticflickr.com/8604/15769066303_3e4dcce464_n.jpg',
            'marker-color': '#3bb2d0',
            'marker-size': 'large',
            'marker-symbol': 'rocket-15'
          }
        },
        {
          type: 'Feature',
          geometry: {
            type: 'Point',
            coordinates: [79.04970049922537, 21.16986187785818]
          },
          properties: {
            title: 'Indonesia',
            price: '1600$',
            image: 'https://farm9.staticflickr.com/8604/15769066303_3e4dcce464_n.jpg',
            'marker-color': '#3bb2d0',
            'marker-size': 'large',
            'marker-symbol': 'rocket-15'
          }
        },
      ]
    };



    map.on('load', function () {

      map.addSource('destinos', {
        type: 'geojson',
        data: destinos
      });

      map.addLayer({
        id: 'destinos',
        source: 'destinos',
        interactive: true,
        type: 'symbol',
        // layout: {
        //   'icon-image':  'marker-15',
        //   'icon-size': 1

        // },

      });



      destinos.features.forEach(function(marker) {

        let popup = new mapboxgl.Popup({ closeButton: false, offset: [0, -15]})
        .setLngLat(marker.geometry.coordinates)
        .setHTML('<h3>' + marker.properties.title + '<h3> <p> <strong>' + marker.properties.price + '</strong></p><img src="'
        + marker.properties.image + '" class="img-responsive" alt="">')
        .setLngLat(marker.geometry.coordinates);

        // create a DOM element for the marker
        // add marker to map

        let marca =new mapboxgl.Marker()
            .setLngLat(marker.geometry.coordinates)
            .setPopup(popup)
            .addTo(map);

       marca.on('click', function(){console.log('hola')});

      );

      map.on('mouseenter', 'destinos', function () {
        map.getCanvas().style.cursor = 'pointer';
      });

      map.on('mouseleave', 'destinos', function () {
        map.getCanvas().style.cursor = '';
      });

    });


    });



  }

}


[![][1]][1]
Hola buenas. Estoy intentando añadir una serie de marcadores en mapBox -gl. Dispongo de un geoJSON de nombre destinos el cual recorro y añado los Makers, también les inserto popup. Hasta ahí todo correcto. Mi problema esque no consigo añadir el evento onclick al marcador. Estoy en Angular6. He visto que mapBox Leaflet si hace el evento pero no me gustaría usarlo hasta ultimo recurso



  [1]: https://i.stack.imgur.com/HUYq4.png