Back to works

Touristic attractions’ maps in Yucatán

Once more, working on interactive maps

Web
Go to the website

Description

The Verás Editorial, based in Cancún, publishes small books with information and maps about the attractions in the Yucatán peninsula: natural destinations, archaeological sites and touristic cities.  With the increase of different nationalities tourists, they needed to offer more value to their products in order to approach other language speakers. That task was entitled to us, who though about a mobile app first, and finally opted for a completely responsive multilingual website.

This website is accessed via a QR code in the printed product, and the user can access to an explorable map of the Yucatan Peninsula. Either from a mobile, tablet or desktop, the user can explore the map and select the attractions they want to know better. Some maps a password protected.

Technical Analysis

This work required a deep analysis on how to implement the different requirements: several maps with multiple hotspots, multilingual, responsive, password protection of some maps, commenting on maps and son on. All the content had to be customizable from a control panel: the maps, the hotspots and their position, their pictures and texts, passwords, sponsor informations…

We opted once again for WordPress 4 as our favourite platform for this kind of projects. We have worked lately with Polylang as the multilingual plugin and it works ok, it’s more simple and efficient than qTranslate, and faster to implement than WPML. As usual, the Advanced Custom Fields plugin helped to customize every new custom post type.

On the front-end side, we opted for Bootstrap 3 framework to build the responsive layout (working over Sass preprocessor language).

We needed an efficient and responsive map solution, which allow to point to selectable hotspots: we found the right one in the Mapplic jQuery plugin, inserted by us into the WordPress structure. This plugin works over json files, which are created by the system every time a new map is saved. Obviously we still had to tweak this plugin to adapt to every demanded request.

The result: a perfect responsive framework which can be easily customized, and from the user point of view, a great map navigation experience with useful information. As a next step, if this is approved, we will use html-manifest to cache a simplified version of a map in the mobile, so the user can visit it easily when offline.