I have a webpage with a Mapbox map embedded in it (the Mapbox map has been integrated with D3.js for some filtering fuctions which are not the topic of this thread).

Each marker has some related JSON (geojson) information (year, city etc.) and I want to make this information displayed inside a whenever the user hovers a marker. In this specific case it would be great to manage assigning a jQuery event (mouseenter, mouseleave) to the markers in order to display the content related to the marker.

For some reason I cannot handle markers as they are not in the markup and this is why I cannot assign jQuery events to them. Maybe this has to do with how the Mapbox map has been embedded on the page.

This is the JS Fiddle with the map.

This is the JS:

mapboxgl.accessToken = 'pk.eyJ1IjoicnNjaG1pZHQiLCJhIjoiY2ttZHozaXBlMWo3czJ2cWxlazBmYm9wbSJ9.VWwsnFgo2QdFd55Lm6wkVw';
var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/rschmidt/ckn9czr4o34g417o2v1h9yh2x',
  center: [8.2, 46.9],
  zoom: 7.2
});

map.on('load', function () {
  d3.json(
      'https://fernsehfolklore.ch/wp-content/themes/soundfolklore/assets/build/json/features.geojson', 
      function (err, data) {
          if (err) throw err;

          data.features = data.features.map(function (d) {
              return d;
          });

          map.addSource('places', {
            type: 'geojson',
            data: locations, 
            generateId: true 
          });

      }
  );
});

locations.features.forEach(function(marker, i) {
  var el = document.createElement('div');
  el.id = "marker-" + i;
  el.setAttribute('data-index', i + 1);
  el.className = 'marker';
  new mapboxgl.Marker(el, {
        offset: [-36 / 2, -36] // NOTE: 36 equals .marker size
    })
    .setLngLat(marker.geometry.coordinates)
    .addTo(map);

  el.addEventListener('click', function(e){
    flyToLocation(marker);
    updateList(marker);
  });
});

Anyone how knows how to handle Mapbox markers?