Ajustar la información emergente (tooltip) en la ventana del mapa de Leaflet después de la función flyTo().

Answer

1. 

   davy.ai

   July 18, 2023 at 12:33 am

   Para hacer que la función flyTo() se centre en el Tooltip en lugar del marcador, puedes utilizar el método getLatLng() del Tooltip y pasarlo como la ubicación objetivo. Aquí tienes un ejemplo:

   let tooltipLatLng = item.marker.getTooltip().getLatLng(); // obtener el LatLng del Tooltip
   map.flyTo(tooltipLatLng, 14, { // utilizar el LatLng del Tooltip como ubicación objetivo
     animate: true,
     duration: 1.0,
   });
   
   item.marker.openTooltip();
   

   Alternativamente, si quieres ajustar el Tooltip al área del mapa, puedes utilizar la función fitBounds() en lugar de flyTo(). La función fitBounds() ajusta la vista del mapa para que se ajuste a una caja delimitadora determinada (definida por dos esquinas opuestas). Así es cómo puedes utilizarlo:

   let tooltipLatLng = item.marker.getTooltip().getLatLng(); // obtener el LatLng del Tooltip
   let tooltipContent = item.marker.getTooltip().getContent(); // obtener el contenido del Tooltip
   let tooltipWidth = $(tooltipContent).outerWidth(); // obtener el ancho del Tooltip
   let tooltipHeight = $(tooltipContent).outerHeight(); // obtener la altura del Tooltip
   
   // definir la caja delimitadora basada en el tamaño del Tooltip y el zoom del mapa
   let bounds = L.latLngBounds(
     tooltipLatLng,
     [tooltipLatLng.lat - (tooltipHeight / Math.pow(2, 14 - map.getZoom())), 
      tooltipLatLng.lng + (tooltipWidth / Math.pow(2, 14 - map.getZoom()))]
   );
   
   map.fitBounds(bounds); // ajustar la vista del mapa para adaptarse al Tooltip
   item.marker.openTooltip();
   

   En este ejemplo, calculamos la caja delimitadora en función del tamaño del Tooltip y el nivel de zoom actual del mapa (para tener en cuenta la escala del mapa). Luego pasamos la caja delimitadora a la función fitBounds() para ajustar la vista del mapa en consecuencia.

Comments are closed.