https://www.audiquattro.hk/

This was a car show on a cross harbour ferry and this site features the car show, registration for the show, the new S3 Sportback, RS6 Avant and a campaign for visitors share their favourite routes in Hong Kong.

Vibrant, energetic design and animations on both desktop and mobile platform best represent the branding, even in interactive maps, to maintain a highly enjoyable experience, both on web and ferry.

Basic building blocks: PHP codeigniter, jQuery mobile,

Mobile site

We build mobile site (https://www.audiquattro.hk/?device=mobile to view mobile site on desktop)
and do redirections by detecting device type
We use a PHP library Mobile detect to identify if it is a mobile device
and browser redirect to proper URL if needed

Google map customization

We use customized style on google map
Google map provides powerful styling ability for maps (https://developers.google.com/maps/documentation/javascript/styling?csw=1)
Changing road color, sea color, parks color, labels color etc
which is very powerful and can match with the site's color tone and

Google map route tracing

In this site, there is a way for users to design a route that they think are interesting challenging.
We utilized markers and Google directions API (https://developers.google.com/maps/documentation/directions/)
to let user drop two pins, and design a route:

And this works on mobile as well.
We use browser's geolocation API to pin the points while user is driving across the city
and draw the route by Google directions API

This part is a totally new challenge as we are new to this complete customization on google maps and their supplements API
But the final outcome is very satisfactory, Google map API is very powerful
We can build smooth animation transitions, pins, markers, just like a standalone map

Video playing