Part of the Blippar Group

Blog: css

HTML Week – Interactive Map

Chris Cameron March 13, 2013

Catch up with HTML Week!

Welcome to HTML Week here on the Layar blog where we’ll be taking a look at some of the great ways you can bring print alive with HTML widgets in the Layar Creator. We’ll provide a closer look at how each example was built, and provide you with some resources to add similar techniques to your own projects. Each example we feature can be found in the completely refreshed and updated LAYARED Magazine! Get yours today and see how interactive print is creating more engaging reader experiences!

Next up for HTML Week we share a really great way to get readers interacting with your print products: maps! Whether you’re providing travel information about far off locales or just trying to help people find your local business, a map does the trick best, and a little interactivity can go a long way!

The interactive map that we added to the “Lonely Planet’s Travel Guides Just Got Better” article on page 12 of LAYARED Magazine is a perfect example of using interactive print to provide extra detailed information to readers.

Just scan the page and up pops a map with different locations throughout the world highlighted. The cities are from Lonely Planet’s annual list of top destinations. Tap one of the icons and photos and links for more information slide out of the bottom of the map. Each city features a YouTube video, links to airline and hotel services, additional country information and a link to download the Lonely Planet app.

Like the Superhero Puzzle from yesterday’s post, this example uses jQuery to produce the animation, namely the “.animate” function. Here’s how we did it.

The points on the map were placed “by hand” with CSS on their corresponding positions on the map. It’s a little time consuming to get right, but easy in the end. The smooth drop effect for the info pane was made using only simple jQuery code. After the map fades in, the info pane fades in behind it, remaining out of view.

When a user taps on one of the map points, three things happen. First the map point becomes white, which is accomplished simply by switching the image with an alternate white version. Second, the pane is dropped by using the jQuery “.animate” code function to increase the top margin. And lastly, all of the elements in the info pane, corresponding to the country map point that was clicked on, are loaded into the pane. When a user taps “View More,” the preliminary content fades out and the new slideshow content fades in.

The slideshow is also very easy to build using a trick with the “overflow:hidden” option for HTML “<div>” tags. Essentially, we created a smaller window ”<div>” through which a larger ”<div>” with the content passes through. That’s just how we did it, but there are lots of ways to create slideshows with basic HTML. Check out this resource for tips.

And that’s it for this example! Just a basic knowledge of HTML and CSS is all you need to make some really elegant dynamic widgets for your interactive print projects.

Stay tuned here on the Layar blog throughout HTML Week for more great examples!


Email this article
We request not to sign up and further make payments for Layar services. Please proceed to use Blippbuilder to create AR experiences.
We use cookies to improve our services. Don’t worry, they don’t store personal or sensitive information and you can disable them at any time in your browser settings.