Tengo una página web con un mapa de Mapbox incrustado (el mapa de Mapbox se ha integrado con D3.js para algunas funciones de filtrado que no son el tema de este hilo).

Cada marcador tiene información JSON (geojson) relacionada (año, ciudad, etc.) y quiero que esta información se muestre dentro de cada vez que el usuario pase el cursor sobre un marcador. En este caso concreto sería genial gestionar la asignación de un evento jQuery (mouseenter, mouseleave) a los marcadores para poder mostrar el contenido relacionado con el marcador.

Por alguna razón, no puedo manejar marcadores ya que no están en el marcado y es por eso que no puedo asignarles eventos jQuery. Tal vez esto tenga que ver con cómo se incrustó el mapa de Mapbox en la página.

Este es el JS Fiddle con el mapa.

Este es el 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); }); });

¿Alguien sabe cómo manejar los marcadores de Mapbox?