Estoy usando Leaflet para crear un proyecto que mostraría ciertos puntos de interés en el mapa, según la información del país especificada por el usuario. Tengo problemas para mostrar el icono y el atributo de título de estos marcadores en determinadas circunstancias.

Cuando uso este código, todo funciona exactamente como se esperaba. El ícono personalizado se muestra correctamente en el marcador y cuando paso el mouse sobre el marcador puedo ver el texto 'aeropuerto':

 let airports = L.markerClusterGroup({ showCoverageOnHover: false, }); const airportMarker = L.icon({ iconUrl: "media/plane-line.png", iconSize: [24, 24] }) airports.addLayer(L.marker([52.5, -0.09], { icon: airportMarker, title: "airport" }) map.addLayer(airports)

Sin embargo, estoy usando la API de tomtom para obtener las coordenadas y los nombres de los aeropuertos y luego completar los marcadores en el mapa. Para esto, estoy usando un bucle for y aquí es donde ocurre el problema. Este código genera las coordenadas correctas para cada aeropuerto, pero usa el ícono de marcador de folleto predeterminado y no muestra el atributo de título al pasar el mouse:

 // the data object is passed after successful ajax call let airports = L.markerClusterGroup({ showCoverageOnHover: false, }); const airportMarker = L.icon({ iconUrl: "media/plane-line.png", iconSize: [24, 24] }) for(let i = 0; i < Object.keys(data).length; i++) { const name = Object.keys(data)[i] const coordinates = Object.values(data)[i] airports.addLayer(L.marker(coordinates), { icon: airportMarker, title: name }) } map.addLayer(airports)

¡Cualquier ayuda o consejo sería apreciado!