A new project that I worked on is live! Ka’ana Belize, a hotel in Belize, wanted to create an interactive map that displayed travel times, local attractions, and amenities for their guests.

The site is a single-page with three different maps; World, Region, and Resort. In the World section, flight paths and times are displayed based on which city the user clicks. I’m particularly stoked on the flight path animations in this section! The Region and Resort sections both allow the user to check out different places by clicking points on the map that pop up sliding image galleries.

Art-directed by the incredibly talented Amy Weibel and originally developed by PixelCrayons, the project fell in my lap when Amy brought me in to do QA. After I compiled a bug list, I was asked to fix all the bugs I caught by the client and make some creative tweaks. Additionally, I polished the art assets and added an extra layer of parallax scrolling; the water, map sections and individual land masses move at slightly different speeds, which adds dimension and movement to the map. I also had to make this site cross-browser compatible, and responsive for the iPad.


In a boutique site of this nature, typography is everything. When I inherited the site, the kerning was not yet complete; as you can see in the example above, the spacing between the letters was very uneven. Kerning.js to the rescue! Joshua Gross’ awesome open-source library allowed me to adjust the kerning down to the letter.


Special thanks to Jared who helped me with some JS woes & thanks again to Amy for bringing me in on the project!

About Star St.Germain

I am a tornado disguised as a girl.

Leave a Reply

New Project: Ka’ana Belize Interactive Map

Posted on

May 7th, 2013