Corrección de la rueda de desplazamiento de mapas

Esta publicación de blog de Steve Fenton apareció en mis feeds el otro día. Nunca antes había oído hablar de los mapas de HERE , pero aparentemente se pueden integrar de alguna manera, como Google Maps. El problema es que haces zoom y alejas los mapas AQUÍ con la rueda de desplazamiento. Así que imagina que estás desplazándote hacia abajo en una página, tu cursor (o dedo) termina en el mapa AQUÍ y ahora no puedes continuar desplazándote hacia abajo en la página porque ese evento de desplazamiento es capturado por el mapa y se convierte en un zoom del mapa.

La solución de Steve: coloque una “cobertura” divsobre el mapa cuando comience un evento de desplazamiento en el windowy elimínela después de un breve retraso (cuando el desplazamiento “se detenga”). Esa solución resuena conmigo, ya que no solo he codificado soluciones como esa en el pasado para mapas integrados, sino que hoy tenemos una solución como esa en CodePen. En CodePen, puede cambiar el tamaño de la ventana de “vista previa”, que es una ventana iframedel código que escribe. Si arrastra demasiado rápido, el cursor del mouse (o evento táctil) podría desencadenar un movimiento fuera del elemento arrastrable, posiblemente hacia sí iframemismo. Si eso sucede, iframese tragará el evento y el cambio de tamaño que está intentando realizar dejará de funcionar correctamente. Para evitar esto, colocamos un “cubierto” divencima iframemientras arrastras y lo retiramos cuando dejas de arrastrar.

Sin embargo, al pensar en mapas, me recuerda la idea de Mapas Adaptativos de Brad Frost documentada en 2012. La idea es que incorporar un mapa en un dispositivo móvil de pantalla pequeña simplemente no es una buena idea. El espacio es reducido, pueden ralentizar la carga de la página y, como experimentó Steve casi una década después, pueden molestar a los usuarios que se desplazan por la página. La solución de Brad es ofrecer una imagen de un mapa (que aún puede estar basada en API) de forma condicional para pantallas pequeñas con un enlace “Ver mapa” que los lleva a una experiencia de mapa en pantalla completa, probablemente dentro de la propia aplicación nativa del mapa. Las pantallas grandes aún pueden tener el mapa interactivo, aunque podría argumentar que tener el servicio de imágenes que vinculan al mapa podría ser un patrón inteligente para cualquier navegador con menos deuda técnica.