Gabriel Rodríguez

Mapa interactivo turístico BCN és molt més | Diputació de Barcelona

Fecha
Septiembre 2017 (1 mes)
Material gráfico
Ver capturas
Tecnologías
JavaScript
Google Maps API
HTML
CSS
Mercurial

La dirección de turismo de la Diputación de Barcelona nos encargó el desarrollo de un mapa interactivo de tops turísticos de la provincia, para su web Barcelona és molt més. El mapa se encontraba en la home de dicha web, en la sección Cerca de Barcelona, ¡No te lo puedes perder!

El requisito básico es que fuera una solución 100% client-side (ya que no tendríamos acceso directo a sus servidores), que el mapa se pudiese incrustar en cualquier parte de la web de forma sencilla, y con el menor número de dependencias posible.

El resultado es un único script que, una vez invocado en la página donde se quiere incrustar el mapa, se encarga de cargar el resto de ficheros necesarios (ficheros de traducciones, imágenes, etc.) de forma dinámica, y construye el mapa interactivo, utilizando la API de Google Maps, insertándolo en el contenedor que se desee (a través de un selector CSS configurable en el propio script).

Mi trabajo en el proyecto:

  • Análisis funcional y desarrollo completo de la solución.
  • Comunicación directa con el cliente para integrar su feedback en el proceso de desarrollo.
  • Formación al personal técnico de la Diputación sobre cómo configurar e integrar el mapa.

Características destacables de la solución:

  • Tarjetas informativas de los puntos turísticos del mapa.
  • Diseño 100% responsive, con comportamiento específico touch-enabled en móviles.
  • Gestión eficiente multiidioma a través del idioma de la página servida (atributo "lang" del documento).
  • Sistema de gestión de dependencias dinámico (el script principal se encarga de cargar todos los demás ficheros en tiempo de ejecución: hojas de estilos, fichero de traducciones, imágenes, etc.).

Nota: tras la última actualización de la web Barcelona és molt més, el mapa ya no está disponible online. Puedes echar un vistazo a cómo funcionaba justo a continuación.

Se puede acceder a una versión parcialmente funcional desde la Wayback Machine del Internet Archive. Puedes encontrar el enlace en la tarjeta de datos del proyecto.