Skip to content

Mobile Mode

MapsAlive has a unique mobile mode feature that is automatically enabled for tours that are run standalone on small mobile devices like phones. On desktop browsers and large mobile devices, tours run in desktop mode.

Mobile mode makes a tour look and behave much like a mobile app even though the tour is running in a browser. It provides the benefits of a mobile app user interface, but people don't have to download and install a mobile app to use your tour.

How to manually enable or disable mobile mode

Mobile mode is automatically enabled on small mobile devices, but you can override this behavior. You can make a tour:

  • Run in desktop mode on small mobile devices (see an example at the end of this page)
  • Run in mobile mode on desktop browsers and large mobile devices.

Mobile mode and desktop mode are mutually exclusive, that is, by disabling mobile mode you enable desktop mode. By enabling mobile mode, you disable desktop mode.

There are two ways to manually enable or disable mobile mode:

  1. Use the mobile tour setting or
  2. Choose Tour from the Tour Builder menu
    • In the Mobile Mode section of the Tour Manager screen:
      • Select True or False for the Mobile Mode option

Mobile Mode Advantages

Mobile mode uses all of the available screen area to display the map in both portrait and landscape orientation. By using the entire screen, mobile mode makes even large, detailed maps, truly useful even on small devices.

Mobile browsers show toolbars above and below the content area. On some browsers, like Safari, you can hide the toolbars to make more screen area available to the map. The screenshots below show what it looks like with the toolbars showing, how you hide them, and with the toolbars hidden. Even with the toolbars showing, mobile mode takes maximum advantage of the available screen area.

Hiding the browser toolbars on iOS

Mobile Mode Slideout

When you touch a marker in mobile mode, the marker's hotspot content appears in a slideout panel that slides out from the bottom or right edge of the map (depending on the device's orientation). If the slideout would cover the selected marker, the map pans automatically to keep the marker visible. The slideout in mobile mode is like a popup in desktop mode, but unlike a popup, you can expand and contract a slideout to show more or less content.

The screenshots below show a tour with no slideout (left), a short slideout (middle), and a tall slideout (right). You expand or contract the slideout by touching the +/- icons or the title bar of the slideout.

Use this mobile mode simulator to "touch" markers on the map by clicking with your mouse

Mobile vs Desktop Mode

The table below points out the differences in how a tour behaves when running in desktop mode versus mobile mode.

Behavior Desktop Mode Mobile Mode
Map occupies all of the available space Yes for Flex Map tours Yes for all tours
You can zoom and pan the map Yes Yes
Supports mouse-over and mouse-out events Yes No (supports only touch and click)
Map auto-pans when a marker is selected No Yes when necessary to keep the marker visible
Hotspot content appears in a slideout No Yes for all tours
Slideouts are expandable --- Yes, when there is a lot of content
Hotspot content appears in a popup Yes for tours that use popups No
Popups are expandable No ---

Portrait Orientation

The screenshots below show a tour that is embedded in a web page and not in mobile mode (left), in mobile mode with no slideout (middle), and in mobile mode (right) with a short slideout that does not expand because the image is small and there is no additional content. The difference in appearance and usability between an embedded tour, which runs in desktop mode, and a tour running in mobile mode, is dramatic.

Landscape Orientation

The screenshots below show a tour in mobile mode with a narrow slideout (left), and with a wide expanded slideout (right). In both the narrow and wide slideouts, the text area can be scrolled up and down.

Desktop mode on a small mobile device

The screenshots below show a tour running in desktop mode on a small mobile device. In desktop mode, hotspot content is displayed in a popup instead of a slideout. Normally a tour automatically runs in mobile mode on a small mobile device, but you can use the mobile tour setting to enable desktop mode on a mobile device and vice-versa.

How to control what MapsAlive considers to be a small mobile device

Use the small-mobile tour setting.