Obtengo todos los datos después de realizar una llamada a la API en función de los límites visibles del mapa. Los datos tienen coordenadas en él. Al pasar el cursor sobre las superposiciones/marcadores, se muestran las coordenadas que se están recibiendo (como se muestra en la imagen). Pigeon-maps se utiliza para este proyecto.

Ejemplo de respuesta de api-> placeNames = [{..}, {..}, {ubicación_id: '271918', nombre: 'The Burren', latitud: '53.04881', longitud: '-9.139942', num_reviews: '713' , …}]

 <Map provider={maptilerProvider} height={'85vh'} center={coordinates} zoom={zoom} onBoundsChanged={({ center, zoom, bounds }) => { setCoordinates(center) setZoom(zoom) setBounds(bounds) }} > {isLoading ? <div>Loading</div> : placeNames?.map((pla, i) => <div key={i}> <Overlay anchor={[pla.latitude, pla.longitude]} > <div key={i} onClick={() => setIconClicked(i)} onMouseOver={() => setVisible(i)} onMouseLeave={() => setVisible(100)} > <MdLocalHotel /> {visible === i && <div className='bg-yellow-100 rounded-lg p-1 font-bold px-1 text-xs'>{pla.name} <div className='text-gray-700 text-right font-medium pt-0.5'>Latitude: {pla.latitude} Longitude: {pla.longitude} </div> </div>} </div> </Overlay> </div> )} </Map >