Translating Machform-powered interactive map via a WordPress multilingual graphical user interface
by Filip Hnízdo, December 22, 2015
In 2016 Octophin Digital built an interactive map for the Angel Shark Project via the Zoological Society of London (ZSL), allowing divers to record sightings of the critically endangered species and pass them on to conservationists working internationally to save the species.
The sightings form and data for the interactive map were powered by MachForm (a PHP form system already in use at ZSL with a friendly interface for creating forms and exporting results) while the map itself was a MapBox / Leaflet web application.
The translations challenge
We were tasked with adding Spanish and Welsh translations to the map and sightings form, with possibly more languages to follow.
Instead of our first approach of using a CSV file with line by line translations we realised that an interface to translate the static content, the reporting interface and the form into different languages and change the text was the best approach as it gave ZSL power to update the content themselves.
Our approach
The Angel Shark Network has an existing WordPress website so managing the content through this meant we wouldn’t have to build a database for the multilingual content, or a user login system and much of the interface would be helped by existing WordPress functionality.
We used the Advanced Custom Fields plugin to create a settings page which allowed administrators to add some original text (or a template placeholder) and multiple languages for it to be translated into.
We then created a JSON feed of this content as a WordPress plugin for the map to read.
For the static content and the map interface we created template keywords such as ABOUT and HOME which would be filed with the relevant content for the selected language.
When it came to the MachForm this was a bigger challenge. We had very limited control over how the form was rendered so used DOM traversal (via the useful FindAndReplaceDOMText library) to replace translated text on every element of the page (including drop down items, checkbox labels and tables as it’s a complex multi-part form with logic), while keeping the functionality and layout the same.
Caching for performance
Reading from the WordPress database added some unwanted loading time to the map so we cached a local copy of the translations with the map application and provided a simple URL that could be run to update it when the translations changed or new languages were added. This also separated the map from the WordPress system so it wasn’t dependent on it in case of downtime or changes to the WordPress site.
Additional translation features
Apart from automatically creating links to any languages the map and form have been translated into, the header of the site was changed for each translation to indicate the language to the browser.
<HTML lang="es">
This had the fun side effect of translating the Twitter share button into Spanish automatically when Spanish was selected.
We also provided alternate hreflang language links in case the browser or search engine were able to read them to know that translations were available.
<link rel="alternate" hreflang="en" href="/?language=en" />
<link rel="alternate" hreflang="es" href="/?language=es" />
<link rel="alternate" hreflang="cy" href="/?language=cy">
