Export to HTML5

Make sure to complete the Prepare the Map for Web Tags tutorial before completing this one.

This tutorial teaches how to export to HTML5 so that it can be viewed in a web browser.

1. In the MAP Web Author panel under Export, click the Export to HTML5 button (art does not have to be selected to export).

2. In the Export to HTML5 dialog box, click the Browse button next to the Export location box. In the Export File dialog box, navigate to \Tutorial Data and create a new folder called canada-html5 and use the index.html file name. Click Save.

The Export location box populates with the new file path.

3. Click the Hide/Show Layers tab. Click the Allow user to hide and show layers in this viewer check box. Click the Add button and then click the check boxes for Major city names and Major cities in the Selected column, then click OK.

This setting allows the layers to be turned on and off in the map viewer. The layers are added as a group to the list. To the right are several options to change initial visibility, the layer group name and layer format. Expand the new layer group to see the layers.

4. In the Options frame, rename the layer group to Major Cities.

The Major cities and Major city names will be able to be toggled on and off in the Layers control.

 The Hide and show layers only at specific zoom levels option puts layers below layers specified in the Allow user to hide and show layers in this viewer option.

5. Click the Theme tab. Click the Use Custom Theme option to enable its settings. Click the Text & Lines drop-down and choose a purple color (C=75, M=100, Y=0, K=0).

The Theme tab has options to style viewer elements. Do not confuse these with the MAP Stylesheets or Adobe Illustrator graphic styles. These are strictly to style elements such as the background and foreground controls, border and feature highlight. Alternatively, use one of the predefined themes (light or dark). See more about this and other detailed HTML5 options.

6. Click Export.

After the export process finishes, the Web Export Log dialog box appears. It provides a summary of how many tiles were exported, the size of the map data, and the path to the export folder.

7. Click the Export Folder link to open the canada-html5 folder. The index.html is located in the export folder. Double-click the index_data folder to view all of the exported files.

8. Return to the canada-html5 folder and double-click index.html to open the HTML5 map in a web browser.

9. Navigate the map using the mouse to pan, the zoom in and zoom out buttons, and the home button (see all).

When the mouse hovers over a province, it highlights the colour specified in the Theme tab and shows its web tag. Click a province and the web tag appears until it is manually closed. The Layers List button allows you to toggle layers on and off. Since the Major city and Major cities' name layers were grouped, there is only one toggle. Add them individually to get individual layer toggle functionality.

10. If necessary, save the document. Otherwise, close the document without saving.