Global Map Footer

Resolution Media

In order to visually demonstrate Resolution Media’s global presence to the user we created a global footer map, visible on all pages in the site.

The global footer map is interactive, like Google Maps, with zoom and pan capability. Each dot on the map represents an office of the global company.


When a dot on the map is clicked, the information box overlaid on the map gets populated with that office’s contact information, as well as a button to open a contact form that will get sent to the admins of that particular office. As an alternative view to the map, there is also a toggle on the map info box to display the global offices in an alphabetical list.

This enhanced functionality makes it possible for a potential client to reach out to any office within the global company with potential new work, making it a great lead generation tool as well as a handy visual aid.

To accomplish this design feature, we needed a way to:

  1. display the office data in an interactive map
  2. store the data for each office shown on the map

 

Displaying the Office Map

I looked into using the Google Maps API, but found it to be cost-prohibitive for such a large site that would be making API calls with every page load on the site (since this is a global footer element). I also found that Google Maps did not allow for us to use the custom artwork we wanted to generate the maps tiles, and having the map be “branded” was a priority for this design module.

I ended up using a small javascript library called jVecor Map which allowed us to generate the map tiles using custom vector files.

Storing the Office Data

jVector Map utilizes JSON data to display map markers, so I decided just to store the data for the Resolution Media offices in a flat JSON file in the theme directory. In each node of the JSON file, there are the following data points:

  • “Display” – the name that should be used for display purposes on the office list and hover state on the map dots.
  • “Name” – the short office name, used for reference in the javascript functions.
  • “Url” – the Slug of the office, also used for reference in the javascript functions.
  • “Latitude/Longitude” – the actual global coordinates of the office, used by jVector Map to plot each office dot/pin on the interactive map.
  • “Region” – used as a taxonomy to group global offices together by their location.
  • “Address” – the physical address of the office, shown in the contact info box on the map.
  • “Person” – the name of the employee that is listed as the Contact person in the info box on the map.
  • “Email” – the email(s) of the employee(s) that is listed as the Contact person in the info box on the map. This email(s) is also used as the “recipient” of the contact form when it is used.
  • “Press” – the name, title and contact information of the press contact associated with each office.

Using some custom javascript, the values listed above get swapped in/out once a dot or office name on the map is clicked.