One of our longtime customers, the South Carolina Baptist Convention, recently won an award for their interactive map showing the facilities and activities at Camp McCall. The map displays a slide show of the many buildings and outdoor locations at the camp including the dining hall, chapel, cabins, the lake, and activities such as the ropes course and climbing wall. The map makes clever use of MapsAlive shape markers to highlight the buildings and locations as you move your mouse around the map. What a nice way to show off the camp and see what they have to offer!

The award was presented by the Baptist Communicators Association, a national organization of Baptist communicators in the fields of journalism, electronic media, audio, video, photography, Web sites, and other forms of communications.

The map, created with MapsAlive, won 1^st place in the Web Application Category of the Interactive Media Division of the BCA Wilmer C. Fields Awards Competition. The competition is designed to encourage professional excellence among association members and to recognize those members who have done exemplary work.

Congratulations to Judy Ramsey, Randy Vincent, South Carolina Baptist Convention Communications & Mission Development Team!

MapsAlive has a new feature that makes the import mechanism even more powerful. When importing from Excel (or CSV or XML) you can now specify a MarkerStyle column to change the appearance of bound markers. Before this feature was added you had to manually edit the marker styles on the Edit Marker screen in the Tour Builder by selecting a new choice from the Marker Style dropdown. This will be a big time saver for people who have maps that depend on marker styles to visually indicate the status of a hotspot. For example, a map of houses for sale might show available properties in one color and sold homes in another.

Note that I said that this feature works with bound markers. A bound marker is what you get when you import marker shapes such as when using a Ready Map. It's bound in the sense that it can only be associated with one hotspot. For example, on a USA map, the marker for Vermont is bound to the Vermont hotspot and cannot be used with any other hotspot. An example of a marker that is not bound is an arrow or a circle. An unbound marker can be used with any number of hotspots.

The reason that you can only import the marker style for a bound marker is because of the very nature of import. Each row in the import spreadsheet applies to a specific hotspot. If MapsAlive allowed you to change the marker style for an unbound marker, then the import for one row could have a side effect on many other hotspots in the tours in your account.

To use the new feature, add a MarkerStyle column to your import spreadsheet and enter marker style names in the cells. Note that the names you type are not case-sensitive, but punctuation must be exactly as it appears in the Tour Builder. An extra space, for example, will prevent MapsAlive from matching a name in the spreadsheet with a marker style name in your account. So just be careful, or copy-paste the names, and you won't have any problems.

To learn about the import feature in general, see the MapsAlive User Guide for Content Management.

Last Friday we received one of the first new 3rd generation iPads and put it through it's paces. Sweet! Not only does it have cool new features and the awesome Retina display, it's much faster with interactive maps created using MapsAlive. Specifically, panning and zooming maps that have MapZoom turned on is now as quick and responsive as when using a native iOS app. On the older iPads, especially before iOS 5, panning and zooming was sometimes slow and choppy on larger maps. If you were previously using the MapsAlive option to disable smooth panning, you might want to try turning it off and see how your map behaves with iOS 5 (to turn it off, go to the Tour Manager page and in the Mobile Internet Options section, uncheck the Disable Smooth Panning box).

We were hoping to also see a significant improvement in performance for maps that use shape markers with marker styles that use the blend effect. It's a little faster now, but on large maps that have a lot of large shapes (think USA or world) it's still slow. To be fair to Apple, blending is a very compute-intensive operation that involves analysis and modification of every single pixel within a shape. The larger the shape, the more pixels. Perhaps the next OS will show an improvement, perhaps by tapping into the graphics processing hardware.

Back on the bright side, we made a major discovery for people who have the original iPad or iPad 2. If you are still running iOS 4, you definitely want to upgrade to iOS 5 because Apple made the Safari browser much faster. That improvement breathes new life into these older models and makes panning and zooming much nicer. This performance improvement is also evident on iPhone, even my old 3GS. As an aside, Safari on iOS 5 has tabs so that you can easily switch back and forth between different web sites, so that's another bonus.

Here at MapsAlive we are now considering what enhancements we might make to better take advantage of the new iPad. If you have suggestions, we would love to hear them!

Not all mobile browsers are created equally. On some Android browsers the MapsAlive directory does not scroll which means the entries toward the end of a long directory are not visible because you can't scroll them into view. You can get around this by making the entire directory visible so that no scrolling is needed. You do this with a little bit of JavaScript code that we provide here.

If you have a Pro Plan you can add the code to the JavaScript section on the Tour > Custom HTML screen. If you have a Personal or Plus Plan you can use the same code, but you will have to include it in the web page that contains your interactive map.

First, you need to detect whether your interactive map is running on an Android browser. Then you can change the behavior of the directory so that all of the entries are visible.

Here is the code:

function maOnMapLoaded()
{
   if (maUaIs("android") || maUaIs("skyfire"))
   {
      var dir = document.getElementById("maDirContent");
      dir.style.maxHeight = "none";
   }
}

The maOnMapLoaded() function is automatically called when your map is loaded in the browser and is ready to communicate with. The maUaIs() function lets you check for a specific browser by examining the user agent string. A user agent string identifies the browser name, version number, and other system details. So, in this case it checks to see if the user agent is "android" or "skyfire". (Skyfire is an Android browser, but for some reason does not identify itself as an Android browser so we check for it separately).

If the map is running on an Android browser, the code overrides the maximum height of the directory so it can fully expand and display all of its entries.

IMPORTANT: If your tour is directly embedded in a web page and you are using Custom HTML to add the code, be sure that your embed code includes custom.js. You can get the <script> tag to include it from the Code Snippets section on the Tour Preview page. If you don't include custom.js, your custom HTML won't be part of your tour and this solution won't work.

To learn more about the maOnMapLoaded() function or other MapsAlive JavaScript functions see the user guide for the JavaScript API.

Here's a tip for Pro Plan users on how to change the appearance of hyperlinks in hotspot content.

You can change the look of each link individually by editing its HTML on the Edit Hotspot Content page, but if you want them all to look the same without editing each one, do this. Choose Tour > Custom HTML from the Tour Builder menu, and then copy/paste the CSS shown below into the CSS section.

#maTextArea a {
   font-family:Verdana, Arial, Helvetica, Sans-Serif;
   font-size:18px;
   font-weight:bold;
}

#maTextArea a:link {
   color:pink;
   text-decoration:none;
}

#maTextArea a:visited {
   color:yellow;
   text-decoration:none;
}

#maTextArea a:hover {
    color:green;
   text-decoration:underline;
}

You'll probably want to edit my CSS to suit your taste. I chose options that make it easy to see what's going on. Hyperlinks appear in pink if they have never been visited and yellow if they have been. They appear in green when you move the mouse over them. They are normally not underlined except when you mouse over them (that's what the text-decoration attribute controls). Note that I also made the font large (24px) and bold.

IMPORTANT: If your tour is directly embedded in a web page and you are using Custom HTML to add the code, be sure that your embed code includes custom.js. You can get the <script> tag to include it from the Code Snippets section on the Tour Preview page. If you don't include custom.js, your custom HTML won't be part of your tour and this tip won't work.

To learn about the #maTextArea class and other ways to use CSS in your tours, see section 6.4 of the MapsAlive user guide for the JavaScript API.

The MapsAlive gallery feature is a great way to display still photographs, but did you know that you can also use it for video and other multimedia? On my own personal photography site, I use a gallery to display 360° panoramic images (see screenshot below). When you click on a thumbnail in the gallery, its panorama displays so that you can pan and zoom it. You can see how it works here.

Show a Panorama When a Marker is Clicked

When you use still photos in a gallery, the photo changes as soon as you mouse over its marker. That will happen with the panoramas too, but it's probably not the behavior you want since they can take a few seconds to load. So we changed the markers to show their content (the panorama) when clicked instead of when moused over. You do that by going to the Hotspot Actions screen and choosing the Marker is clicked radio button for the Show this hotspot's content when option.

Unfortunately, that causes a small problem. Even though the content does not change when you mouse over a marker, the marker under the mouse appears as selected (in the example above the selected marker has a red border). That means that the panorama being displayed can get out of sync with the marker that is showing as selected. We can fix that with a few lines of JavaScript and by changing the markers to be static.

Static Markers

A static marker does not change its appearance when you move your mouse over it. It does, however, still show its tooltip and it still performs its mouse actions, in this case, the click action. You make a marker static when you want more control over when its appearance changes. For this gallery, we only want a marker to appear as selected after it has been clicked. To make a marker static, just check the Is Static box on the Advanced Hotspot Options screen.

A Little Bit of JavaScript

After we made all the markers static, we went to the Custom HTML screen and typed the function shown below into the JavaScript text box. You can read about the maOnHotspotChanged function in the user guide for the JavaScript API, but briefly, it gets called whenever a new hotspot is selected. So it gets called when you click on a marker, but not when you simply mouse over it.

The code we added to the function only does two things. First, it sets the appearance of all the markers to normal. We do this in order to remove the selected appearance from whichever marker is currently selected. Second, it makes the marker that was just clicked appear as selected. Here's the code:

In the first statement, the "*" is wildcard notation meaning all markers. You can use it instead of typing a list of every marker's hotspot Id. Note that you need to have a MapsAlive Pro Plan to use the Custom HTML feature, but if you only have a Plus or Personal plan, you can put the JavaScript in the web page that contains the tour itself.

Also Works with Maps

The example discussed here uses a gallery, but everything would work the same way with a map. For example, suppose you wanted to display panoramas showing vistas at various points along a hiking trail. You would use a hiking trail map and your favorite marker symbol (maybe an arrow or some little feet) and have each marker display its panorama when clicked. Or you could have some of the markers display panoramas and some display still photos or videos.

Works on iPad and iPhone

We use a panorama player that works on PCs, Macs, iPad, and iPhone. Since MapsAlive galleries and maps also work on all those devices, you can be sure that everyone will be able to enjoy your tour.

Hi everyone. We've just added a new page to the MapsAlive web site devoted entirely to interactive restaurant menus. We've also created 12 samples showing different ways that menus can look, behave, and be integrated with your web site.

Here's a screenshot showing one of the samples:

Why do interactive menus work so well?

An interactive restaurant menu looks just like the menu you already have on your web site with one big difference. Your current menu just sits there, but an interactive menu displays a photograph of each food item when you move your mouse over an entrée name – or when you touch it on an iPhone, iPad, or other mobile device. When I demonstrate an interactive menu to someone I hear the same response nearly every single time: "Hmmm, that’s making me hungry!" And they’re not just saying that.

It's a well known fact that people experience a physical sensation in response to a visual stimulus that reminds them of something pleasurable, like food!  By adding an interactive menu to your web site, you can take advantage of human nature as part of your marketing efforts. There’s probably no other single improvement you can make to your web site than to show off your cuisine with photographs.

Where to find the samples

To try any of our 12 new working examples of interactive restaurant menus, and to see a step-by-step tutorial on how to create one, visit http://www.mapsalive.com/LearningCenter/RestaurantMenus.aspx.

Now you can add interactive maps, floor plans, photo Galleries, or interactive restaurant menus – anything created with MapsAlive – to your Facebook business page. You use the same iFrame code that you would use if you were embedding your map in your own web page. Suddenly your Facebook page becomes a powerful marketing tool without costing you anything.

How does this work?

Facebook recently made it really easy to display any kind of content using an iFrame application. An iFrame application lets you display any web page on a Facebook tab. You can have up to twelve custom tabs and you can display interactive content or any HTML, CSS and JavaScript. Just be sure your interactive map or other content is 520 pixels wide or less if you want to avoid horizontal scroll bars.

Here's how to add an interactive map to a Facebook tab

First you add a free application called "Static HTML: iframe tabs" to your business page. Then you add your interactive map or other content to the tab and customize it. Follow these easy steps to make this work.

The new tab for the code shown in Figure 3 displays a fully interactive floor plan and looks like this:

Note that if your interactive map uses popups they will only display within the bounds of the iframe. For many maps this is not a problem, but you might want to consider using a tiled layout like the example here to be sure viewers can see all of your hotspot content.

Here are some other ways to customize your new tab:

To rename the tab — go to your business page and click Edit Page and then choose Apps from the list of tabs on the left. Find Static HTML: iframe tabs in the list of Apps and click Edit Settings.

To change the position of the tab in the list — while viewing your page, click Edit at the bottom of the tab list on the left. Drag the tab name up or down.

Add another custom tab — while editing a custom tab, click the gold FAQ & Help Center link at the top of the page (Figure 3). Expand "How do I add more than one tab" and click on Second tab (or Third, etc.). There are other good tips and instructions for using custom tabs in this section as well.

Let the interactive map experts do it for you

Here at MapsAlive we live, breath, and eat interactive maps, floor plans, diagrams, and photo galleries. If you want to add interactive floor plans or maps to your web site, but you just don't have the time to do it yourself, let us help. We can do a little or a lot – whatever you need.

How we can help you

Depending on your needs and budget we can work with you in any of these ways:

So much to do, so little time

• Set up a framework and hand it over to you to add your content. We do the heavy lifting and you do the fine-tuning.
• Deliver a full interactive map solution ready to integrate into your web site. You provide the specification or we can work with you to develop one.
• Create custom shapes for things that are already on your map like sales territories or building outlines.
• Programming in JavaScript, HTML, and CSS to make your interactive maps do something really special.
• Figure out a solution for how your map should work and how you can best integrate it with a larger overall solution.

How it works

You tell us what you want and how much you can afford to spend. You also provide us with your map images, photos, text – anything you want for your clickable map. We put it all together, test it on the major browsers and on iPad and iPhone, and then hand it back to you to add to your web site. Usually a few phones calls and emails is all it takes for small jobs. You get a high quality result that you can maintain yourself when changes are needed.

To learn more, vist the custom services page on the MapsAlive web site.

Make Your Restaurant Stand Out from the Crowd

If you have a restaurant (or you are a web developer who does web sites for restaurants) consider making your menu interactive. Every day, hungry people use the web to decide where to have lunch or to plan a special dinner. An interactive menu gives your establishment an edge over the competition because visitors to your web site not only see your menu, they see mouth watering photos of your food. When people can see what you have to offer, there's a good chance that they'll walk through your door.

How Interactive Restaurant Menus Work

An interactive menu can be the same as your printed menu or your existing web site menu. The big difference is that when someone moves their mouse over (or touches) an entrée, a photograph of that entrée appears.

To get the idea, see the screen shot below.

Do It Yourself or Have Us Make Your Menu Interactive For You

Creating an interactive menu is easy with MapsAlive. Here are the basic steps.

• Create a new tour with MapsAlive.
• Upload an image of your menu.
• Pick the kind of marker you want to use for the hotspot – a transparent rectangle works well.
• Upload a zip file of your food images. MapsAlive automatically creates a hotspot for each entrée.
• Place your markers on the appropriate menu locations.
• Preview and publish your tour and put it on your web site!

If you are too busy serving delicious food to your customers, send your menu and photos to us and we can do it for you.

Works on iPad and iPhone too

Your new interactive menu will work on PC and Mac browsers, but it will also work on iPad, iPhone, and Android devices. That means that people on the road will be able to see what you have to offer and be enticed to visit you in person.

To try working examples of interactive restaurant menus and to see a step-by-step tutorial on how to create one, visit http://www.mapsalive.com/LearningCenter/RestaurantMenus.aspx.

Bon Appetit!