title: Curious about why the map.on(); is not working
body: <p>I have a backend with GET method and MySQL database and in my HTML file on my client-side, I write  to generate the map and add a few markers and lines on the map. Initially, I have the following code to start my map and markers:</p>
  <pre><code>    var map = new mapboxgl.Map({
          container: 'map',
          style: 'mapbox://styles/mapbox/streets-v11',
          center: [12.550343, 55.665957],
          zoom: 2
      });
  
  </code></pre>
  <pre><code>    async function getapi(url){
          const response = await fetch(url);
          var data = await response.json();
          return data;
      }
      getapi(api_url).then(data =&gt; {show(data);});
      function show(data){
          /*
          * This is the only function to manipulate with all airlines
          */
          for (r in data){
              dep_lat.push(data[r]['DepLat']);
              arr_lat.push(data[r]['ArrLat']);
              dep_lng.push(data[r]['DepLng']);
              arr_lng.push(data[r]['ArrLng']);
          }
  
          /*
          * Load all airlines on the map initially, without the point marker
          */
          map.on('load', function () {
              for (var i = 0; i &lt; dep_lat.length; i++){
                  //console.log(&quot;init map test&quot;);
                  map.addSource('route'+String(i),{
                      'type': 'geojson',
                      'data': {
                          'type': 'Feature',
                          'properties': {},
                          'geometry': {
                              'type': 'LineString',
                              'coordinates': [
                                  [dep_lng[i],dep_lat[i]],
                                  [arr_lng[i],arr_lat[i]]
                              ]
                          }
                      }
                  });
                  map.addLayer({
                      'id': 'route'+String(i),
                      'type': 'line',
                      'source': 'route'+String(i),
                      'layout': {
                          'line-join': 'round',
                          'line-cap': 'round'
                      },
                      'paint': {
                          'line-color': '#C0C',
                          'line-width': 3
                      }
                  });
              }
          });
  
  
          for (var i = 0; i &lt; dep_lat.length; i++){
              let deplng = dep_lng[i];
              let deplat = dep_lat[i];
              let arrlng = arr_lng[i];
              let arrlat = arr_lat[i];
              new ClickableMarker({color: 'red'})
                  .setLngLat([deplng,deplat])
                  .onClick(() =&gt; {
                      alert(show_route(deplng, deplat));
                  })
                  .addTo(map);
              new ClickableMarker({color: 'red'})
                  .setLngLat([arrlng,arrlat])
                  .onClick(() =&gt; {
                      alert(show_route(arrlng, arrlat));
                  })
                  .addTo(map);
          }
      }
  </code></pre>
  <p>And I have already written an extension for mapboxgl.Marker to deal with click event and it works fine, (attached extended class):</p>
  <pre><code>    class ClickableMarker extends mapboxgl.Marker{
          onClick(handleClick){
              this._handleClick = handleClick;
              return this;
          }
          _onMapClick(e){
              const targetElement = e.originalEvent.target;
              const element = this._element;
              if (this._handleClick &amp;&amp; (targetElement===element || element.contains((targetElement)))){
                  this._handleClick();
              }
          }
      };
  </code></pre>
  <p>However, in the show_route() function, which is called in onClick(), I have the following code and I only get the second console log, the &quot;Testing&quot; inside map.on() is not showing up. May I ask the reason and how I could fix it so that the console.log(&quot;Testing&quot;) will run. Thank you.</p>