Edit Web Tag – Avenza Systems

Requirements

In the Edit Web Tag dialog box, text and image parameters are formatted with HTML (HyperText Markup Language). A markup language is a set of markup tags. These HTML tags are keywords (tag names) surrounded by angle brackets like <html> that indicate how the Web browser should display content. There are opening tags and closing tags and usually come in pairs, like <a> and </a>, where the end tag contains a forward slash. To learn more about HTML formatting, visit http://www.w3schools.com/html/default.asp.

information Grouped artwork can't be web tagged properly due to the possibility of conflicting attributes. A suggested workaround for path artwork (lines and polygons) is to create compound paths before adding web tags.

Using Edit Web Tag

Click the Edit button in the MAP Web Author panel to open the Edit Web Tag dialog box.

editwebtag_dialog

This dialog box is used to design the web tags (callout bubbles) using HTML. These callout bubbles appear when objects in the web map are clicked or hovered over (however, not all objects in the map need to be associated with a callout). Use the Show Preview option to see how the HTML affects the web tag.

webtag_example

Web Tag Preview and Size

The Show Preview option displays a preview of the web tag (callout). As the title, text and graphics are inserted, the preview is updated accordingly. Set the width and height of the callout (in pixel units) in the Web Tag Size section. Use the Auto size option to automatically size the callout to its contents.

Insert a Title

A title is typed in as text, but it can also be a MAP Attributes field, such as %PARK_NAME%. Titles can be formatted using HTML tags.

Add and Edit Contents

The Edit Web Tag dialog box provides a set of HTML tag buttons to help format content. Several options are only available depending on the selected Callout option.

To insert a tag into the Content box, click one of the tag buttons. Then type callout text in between the opening and closing tags. Alternatively, highlight content text and click a tag button to wrap tags around it. Use the preview to see how the text, links or images are displayed.

editwebtag_formatting_example

Some HTML tags are used to insert links and images.

Content example	Result
<a href="http://www.avenza.com">Avenza Web Page</a>	Creates a link to www.avenza.com accessed when clicking "Avenza Web Page" text.
<img src="sourcemedia/picture.jpg" hspace="0" vspace="0" align="left" >	Inserts an image (picture.jpg located in the Source Media Folder).

HTML ignores extra spaces and returns, therefore tags such as <br> (to create line breaks) and <p> (to start a new paragraph) should be used. Aside from HTML tags, pick MAP Attributes from the Insert Attribute drop-down list (visible attributes only) to add them to the Content box. MAPublisher uses special text to extract data from the MAP Attributes table. These attribute field references are surrounded by percent signs, like %AttributeName%.

Content example	Result
<b>%Street_Name%</b>	Main Street
<img src="sourcemedia/%image%" hspace="0" vspace="0" align="left" >	Displays the image indicated in the attribute called "image" (a string text). hspace and vspace sets the horizontal and vertical space left blank around the image. The align setting sets the image alignment to the left of the page.
<a href="http://%website%">Avenza Web</a>	Avenza Web (opens the website value indicated in the website attribute).

information MAP Attributes field names are case sensitive.

information To improve searchability in the map viewer, remember that the searchable attribute must be in the web tag. Otherwise, enable the Export all attributes with map features setting (this may increase exported file size).

Insert an Image

Images can be inserted into web tags. To insert an image, click Browse For Image and navigate to the image file. To use an attribute value containing the path to the graphic file, enter the attribute field name into the Web Tag Image box, like %Image_File%.

By default, the original image size is used. To change the image size, adjust the width and height value in the Web Tag Image section (aspect ratio is maintained). The preview shows the actual size of the image.

information The maximum size for a callout is 800 pixels by 800 pixels. When this limit is reached, graphics are automatically scaled to fit (aspect ratio is maintained).

External URL Triggers

The External URL Triggers settings allow an advanced Web designer to load a specified HTML document (designated by its URL address) into a targeted HTML frame. Attribute fields may be used (i.e. %ATTRIBUTE_NAME%). This option occurs when web art is clicked or hovered over.

A web browser can be divided into multiple panes called HTML frames in order to present documents in multiple views, which may be independent windows or sub-windows. For example, within the same window, one frame might display a static banner, a second a navigation menu, and a third the main document that can be scrolled through or replaced by navigating in the second frame. An example layout could be as follow:

mapweb_frames

Names of frames created by Web designers must begin with an alphabetic character (a-z/A-Z). Some special purpose HTML frames have reserved names with a leading underscore. The following reserved names are available for selection from the Target drop-down list.

_blank	Loads a linked document into a new blank window (unnamed).
_parent	Loads a linked document into the immediate parent of the document the link is in (frame containing web map).
_self	Loads a linked document into the same frame in which the link was clicked (frame containing web map).
_top	Loads a linked document into the entire window, clearing the frames.

To use the External URL Triggers, enter a URL of the HTML document to open in the Click URL or Hover URL boxes. The URL can be any page available locally or any external web page (for example http://www.avenza.com). In the Target drop-down list, enter the name of the destination frame (type in the name given by Web designers or use one of the four available reserved names).