Export to HTML5

Export to HTML5 is used to export a MAPublisher map to a package of files that includes an HTML document that will enable you to view it in a web browser. Use Export to HTML5 to set the appearance of an HTML5 web map. Style navigation objects and map elements such as buttons, the search box, overview map, layer list, callout, zoom slider, and highlight lines and colours.

 

Requirements

Web tags must be first created using the Edit Web Tag dialog box.

The largest challenge when creating an HTML5 web map is making it work efficiently across all desktop and mobile browsers.

 

Using Export to HTML5

In the MAP Web Author panel, in the Export section, click the HTML5 button. In the Export location box, specify the directory that will store the HTML index file (by default index.html) and associated web export files.

The Export to HTML5 dialog box contains five tabs: Viewer has controls to set export location, viewport size, navigation controls and callout settings; Hide/Show Layers has controls to show and hide specified layers; Scale Dependent Layers has controls to adjust what is visible at set zoom scales; Theme has controls to adjust the appearance of foreground, background, and highlight colours; and Advanced has controls to adjust additional settings.

 

Export to HTML5 - Viewer

The Viewer tab contains settings that affect the operation of elements in the web map. Check/uncheck any of the options to enable or disable them. Most of these options are enabled by default unless otherwise specified.

 

Viewport

Adjust the width and height of the web map. It cannot be larger than the Adobe Illustrator document. Use the viewport settings to change how the web map is displayed in a web browser:

Viewer Setting	Description
Set Viewport to Container Size	Make the viewport the same size as the container.
Width and Height	Set the width and height of the viewport (in pixels).
Maintain aspect ratio	Adjusts the viewport width and height values in the same ratio.
Set Viewport to Preset Size	Sets the width and height to the predefined widths including 800px (large, for websites and tablets), 640px (medium, for websites and tablets), 320px (small, for mobile phones), or set to artboard size.
Show map description panel	Show a map description panel and position it on the left, top, right, or bottom of the screen. The description panel can collapse and expand. Click the Edit Map Description button to enter description content.
Show Legend panel	Show a MAP Legend layer if one is available. The legend panel can collapse and expand.
Set location and zoom scale for home button	Sets a custom home position on the web map (based on Center X and Center Y for position, and zoom scale).
Create zoom adjustable scale bar	Create a scale bar that adjusts based on zoom. Use the settings to control position, scale bar units, and select a MAP View to calculate the scale.

 

Navigation

Viewer Setting	Description
Allow panning with mouse and touch	Allows the user to pan the map with mouse and by touch on mobile.
Allow zooming with mouse and touch	Allows the user to zoom the map with mouse and by touch on mobile.
Enable zoom selection	Show zoom selection option.
Show navigation controls	Show navigation controls in the web map. Choose position and maximum zoom.

 

Controls

Viewer Setting	Description
Show Search Box	Show search box in the map viewer. Optionally, automatically zoom to search results. Choose placement position (top left, top right, bottom left, bottom right). Disabled by default.
Layers List Position	Show the layer list in the map viewer. Choose placement position (top left, top right, bottom left, bottom right).

 

Callouts

Viewer Setting	Description
Show the Click Callout	Display a callout when a feature with a web tag is selected. The Callout will appear at the current tap or click position.
Use centroid instead of mouse position for Callout	The callout will appear at the centroid of the feature rather than at the mouse position.
Show the Hover Callout	Display a callout when the mouse pointers moves over a feature with a web tag. This is not available on touch devices.
Use full callout content for Hover Callout	Displays full callout when option to show hover callout is enabled. Disabled by default.
Show the Fixed Callout	Display a callout at a fixed position when a feature with a web tag is selected. Disabled by default.

 

Feature Highlights

Viewer Setting	Description
Show Click Highlight	Show a highlight over top of a feature when it is selected.
Show Hover Highlight	Show a highlight over top of a feature when the mouse moves over it. This is not available on touch devices. Click the Customize Hover Highlight button to adjust stroke, fill, thickness, color, and opacity options.
Show Search Highlight	Show a highlight over top of a feature when it matches a search.

 

Export to HTML5 - Hide/Show Layers

The Hide/Show Layers tab contains settings that allow layers to be toggled on and off in the viewport. Click the Allow the user to hide and show layers in the layers list option to enable its controls. Layers can be added individually or be grouped. Grouped layers all share the same options.

In the Options frame for each respective layer or group, there are settings to change the display name (what is shown in the layer list in the web viewer), a setting to change initial visibility, or to not show it in the layers list at all. The layer list icon (must be 32x32 pixels or smaller) is optional. The Only show one layer group at a time option (bottom of the dialog box) allows the visibility of one layer group at a time in the viewport.

 

Export to HTML5 - Scale Dependent Layers

The Scale Dependent Layers tab contains settings to adjust layer visibility at specific zoom scales. Click the Hide and show layers only at specific zoom scales option to enable its controls. Layers can be added individually or be grouped. Grouped layers all share the same options. It is important to note that layers cannot be added to both the Hide/Show Layers tab (above) and Scale Dependent Layers tab (below). It is recommended to prioritize which layers can have its visibility hidden/shown and needs to be shown at specific zoom scales to ensure the correct display in the viewport.

When a layer is added to a group it will be displayed at the top of the map layer hierarchy when exported. This means that if a layer that was at the bottom of your map hierarchy and it is added to a Hide/Show Layer layer group, it will automatically be moved to the top level or your layer hierarchy when exported.

A layer that is not added as a Hide/Show Layer is considered a base layer. A base layer consists of rasterized images (tiles) for the required number of zoom scales. Layers do not have to be designated as a base layer as this is the default location for all layers. A base layer appears underneath all other layers.

 Due to hardware and software limitations with mobile devices and most desktop browsers, it is best to limit the number of toggleable layers to no more than three hide/show layers (however this limit is completely dependent on the size of the map and the data that is used).

 

Export to HTML5 - Theme

The Theme tab contains settings to change the appearance of the web map viewer. Two default themes are available: Light Theme and Dark Theme. The Custom Theme option has custom colour settings available. Themes do not affect the style in your map document, it only affects the appearance of the map viewer foreground, background, border, and highlight colours.

 

Export to HTML5 - Advanced

The Advanced tab contains extra settings to change the functionality of the web map viewer.

 

Web Tags

Advanced Setting	Description
Format numbers for display purposes based on locale	Use locale as source for number formats. Disabled by default.
Simplify outlines of tagged artwork	Removes extraneous vertices from artwork.
Export all attributes with map features	Map attributes are included in the exported web map. Disabled by default.

 

Tiled Layers

Advanced Setting	Description
Use JPEG for base layer tiles	Change format to JPEG for base layer tiles. Disabling this option will use PNG for base layer tiles.
Scale patterns in tiled layers	Patterns are scaled for better looking tiles.

 

Debugging

Advanced Setting	Description
Display frames per second in the viewer	Shows value in a corner of the viewer. Disabled by default.
Include the debug information widget in the viewer	Debug information. Disabled by default.

 

Web Export Log (HTML5)

In the Export to HTML5 dialog box, click the Export button to begin the export process. An export summary is displayed in the Web Export Log dialog box.

An index.html file and index_data folder are created in the specified export directory (default names; a custom name and location can be substituted in the Export Location box). Some of the important exported files are:

•avenza.css and avenza-theme.css (CSS files that can be used to customize the style of the map viewer).

•layer # folder (where # is the layer number; folder contains tiles).

•avenza-viewer.js (the Javascript file containing information to form the map viewer).

•data.js (the Javascript file containing information to place data in the map viewer).

The Web Export Log displays several export file size statistics: the number of tiles created and total file size, and the map data total file size. Large file sizes should be avoided as they may slow the web map when opened in the browser.  Several recommendations to reduce exported file sizes are provided at the bottom of the dialog box.

 

HTML5 Web Map Data and Design Considerations

Artboard Size

The Export to HTML5 processing time is dependent on map size. A large artboard means there are more pixels to export. It is recommended that web map dimensions are  800 x 600 pixels. Keep in mind what kind of devices your web maps may be viewed on (smartphone, tablet, or desktop).

 

Viewport Size

The viewport is independent of the artboard size and will affect the runtime speed of the map. Generally, a smaller viewport will produce a faster web map. Use the Set Viewport to Preset Size options to choose an appropriate size.

 

Zoom scales

Export to HTML5 creates tiles for your art based on the number of required zoom scales.  So, the more your map can zoom in and out the longer it will take to export and the larger the exported files will be.

 

Data Generalization

For all exported data, the detail (e.g. artwork, number of objects) and amount of data on the artboard will affect the processing speed of the export. Art that contains web tags could slow the performance of the final map. Web art is always exported with a vector layer to be able to show the highlighted feature.

 

iOS/Android/Mobile Limitations

Mobile devices using operating systems such as Apple iOS and Android have the ability to render HTML5, however, these devices have limited hardware and software which may cause HTML5 rendering issues. Using hide/show layers on a mobile device may slow the device. The description panel will need to be adjusted so that it is properly sized for display on smaller screens. Use a maximum of three hide/show layers. Web maps viewed on a mobile device (with a touch screen) will have the following HTML5 viewer options disabled:

•Show Hover Highlight

•Show the Hover Callout

 

Attributes

A large number of attributes associated with web tags can cause performance issues in the exported web map.

Unused attributes are removed automatically from the tagged layers when exporting.

 

Browsers

All browsers (including mobile browsers) display HTML5 differently. Ensure that your exported HTML5 web map is tested on popular browsers before it is deployed. Web safe fonts work better in certain browsers.

 

Navigation

Pan and zoom gestures when viewing websites on a mobile device are very similar to pan and zoom gestures when viewing a web map. It is recommended that only one type of gesture is active (i.e. disable pan and zoom in the map or disable pan and zoom on the web page). The included example index.html shows how to disable pan and zoom on the web page.