Scribd
Upload
40 views

73 Data Tips HTML

This document discusses using HTML markup and CSS styles to format DataTips in TNTmips. Key points: - HTML formatting allows flexible control over font, styling, color, and alignment in DataTips and can be directly used by many web-based WMS clients. - A Display Control Script can define CSS styles to format all DataTips from multiple layers using type and class selectors. - Layer DataTips can be generated with HTML markup by string expressions, allowing preview and multilined DataTips. - Prefix and Suffix fields can also include HTML for layers where string expressions are impractical, like rasters.

Uploaded by

xception.me
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
40 views

73 Data Tips HTML

This document discusses using HTML markup and CSS styles to format DataTips in TNTmips. Key points: - HTML formatting allows flexible control over font, styling, color, and alignment in DataTips and can be directly used by many web-based WMS clients. - A Display Control Script can define CSS styles to format all DataTips from multiple layers using type and class selectors. - Layer DataTips can be generated with HTML markup by string expressions, allowing preview and multilined DataTips. - Prefix and Suffix fields can also include HTML for layers where string expressions are impractical, like rasters.

Uploaded by

xception.me
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Spatial Display

Design DataTips using HTML


You can use text formatting to enhance the readability of DataTips for groups and layouts and to add emphasis to data from particular layers. Use of MicroImages text formatting codes for this purpose has been described in previous Technical Guides (Spatial Display: Designing Complex DataTips and Add Styling to DataTips), but you can also use standard, widely-documented HTML markup and Cascading Style Sheet (CSS) Level 2 style methods to format DataTips. Using HTML markup gives you flexible control over font selection, styling, color, and alignment within the DataTip. If you are preparing atlases for TNTserver, using HTML DataTip formatting has the added advantage that it can be directly used by many web-based WMS clients, so your DataTip information will appear as you intended. In an HTML-formatted DataTip, such as the example illustrated on this page, the DataTip information is contained in a <table> element. Each line in the DataTip constitutes a table row (<tr>) element. The prefix and value components of each DataTip entry are contained in separate table data (<td>) elements that define the columns of the table (see green text lines in the HTML sample below). When you set up DataTips for the individual layers to provide the enclosing <tr> and <td> tags for their components (as described subsequently), during each DataTip event these HTML elements are automatically detected and the DataTip text is parsed as a virtual HTML "document". Opening and closing <body> and <table> tags are generated automatically for this virtual document (as shown in red text below). A Display Control Script allows you to use CSS styles to easily define text formatting for all or part of every DataTip entry from all
Virtual HTML Document Generated for the DataTip Shown Above

DataTip with text formatting set using HTML markup.

layers in the associated group or layout. Using a predefined function that is called each time a DataTip is requested, the script can create the <head> element of the virtual HTML DataTip "document" and include CSS style definitions within it (cyan text in the HTML sample). In the example shown on this page, the predefined "tr" CSS type selector is used to first define the font and font size used for every <tr> element (every DataTip line). A second userdefined "prefix" class selector is then defined to make text bold within the <td> elements containing the prefix text; the HTML markup for these <td> elements must list this class as a property to apply the style. In this DataTip example, each layer's DataTip text (with HTML markup) is created in a string expression field in an attached data(over)
Sample Display Control Script Defining DataTip Styles func OnViewDataTipShowRequest ( function called before class GRE_VIEW view, retrieving DataTips for class POINT2D point, all layers in the view class TOOLTIP datatip ){ set beginning datatip.String = '<html><head><style> of DataTip tr { string with font-family: Verdana,Helvetica,sans-serif; head of HTML font-size: 12pt; document; } enclose in .prefix {font-weight: bold;} single quotes </style></head>';

<html> HTML head with style definitions <head> provided by Display Control Script <style> tr { style definition for table font-family: Verdana,Helvetica,sans-serif; row elements using type font-size: 12pt; selector "tr" } .prefix { style definition for user-defined to allow line font-weight: bold; class selector "prefix" return 0; function returns 0 to allow DataTip breaks in string } text for each layer to be appended } </style> to the string created here tags generated automatically as DataTip text is read </head> For each layer in this example, <body> "prefix" style applied to first column one table row for each layer DataTip text with HTML markup is <table> created in a string expression field in <tr><td class="prefix">NRD: </td><td>Nemaha</td></tr> an attached database table; this field <tr><td class="prefix">Section: </td><td>13,Township 08, Range 11E</td><tr> is set as the source for the DataTip <tr><td class="prefix">Field Area: </td><td>126.68 acres</td><tr> for the layer in its Layer Controls <tr><td class="prefix">Hydro Unit: </td><td>Brownell Creek</td><tr> window. <tr><td class="prefix">Soil: </td><td>Morrill-Malmo complex, 3 to 8 percent slopes</td><tr> </table> </body> tags generated automatically </html>
String expression for the DataTip field shown to the right: '<tr><td class="prefix">Field area: </td><td>' + clu_public_a_ne131.CALCACRES + '</td></tr>';

MicroImages, Inc. 11th Floor - Sharp Tower 206 South 13th Street Lincoln, Nebraska 68508-2010 USA
Voice (402)477-9554 FAX (402)477-9559 email [email protected] web www.microimages.com August 2007

base table. This field is then set as the source for the DataTip in the Layer Controls window for the layer. The string expression defines the text to be used for the prefix, the database field containing the values, the suffix text (if applicable), and it encloses these within the required HTML tags. It also assigns the <td> element containing the prefix text to the "prefix" style class defined by the Display Control script. This method allows you to use the Query Editor for the string expression field to compose the entire DataTip text for the layer and preview the resulting text string in the corresponding field in the table to check for typographical errors. Make sure that you have set in the Table Properties window a large enough width for the string expression field to accommodate the length of the text string to be generated by the expression. If the width is too small, the end of the text string is truncated and the HTML markup will not parse properly, preventing DataTip entries from this and subsequent layers from appearing. In addition, when using this method make sure that the Prefix and Suffix fields in the Layer Controls window are blank; text in these fields also interferes with parsing of the HTML markup for the DataTip. Using a string expression field as the source for HTML-formatted DataTip text also allows you to construct multiline DataTips to present a set of attributes from a single layer. The sample DataTip shown to

String expression field with HTML markup set as source for DataTip text in Layer Controls window.

Make sure the Prefix and Suffix fields in the Layer Controls window are blank when using a string expression field for the HTML DataTip source.

String Expression for HTML-Formatted Multiline DataTip with Centered Heading


set table cell to span two columns for heading use CSS style property to set font weight and alignment for heading

'<tr><td colspan=2 style="font-weight: bold; text-align: center;">Parcel Information</td></tr>' + '<tr><td class="prefix">Address: </td><td>' + ca062506.Situs_NoCity + '</td></tr>' + '<tr><td class="prefix">Owner Occupied: </td><td>' + ca062506.OwnerOccupied + '</td></tr>' + '<tr><td class="prefix">Year Built: </td><td>' + NumToStr(`Lancaster County Dwelling Info`.Yr_Blt) + '</td></tr>' + '<tr><td class="prefix">Assessed Value: </td><td>' + sprintf("$%.f", ca062506.ASSESSED) + '</td></tr>' + '<tr><td class="prefix">Dwelling Sq Ft: </td><td>' + `Lancaster County Dwelling Info`.SqFtna + '</td></tr>' + '<tr><td class="prefix">Parcel ID: </td><td>' + ca062506.PID + '</td></tr>' + String Expression for HTML-Formatted DataTip '<tr></tr>'; leave blank table row after multiline DataTip with Varying Text Color

the right includes multiple lines of information for property parcels. The string expression for this layer (shown above) also shows how you can create a centered heading for the multiline entry by setting a table data element to span two columns, and use the style property to define a CSS style for an individual HTML element. (The group illustrated uses a Display Control Script identical to the one shown on the front side of this page to set most of the DataTip text styling.) You can also use the style property to conditionally change text styling, such as color, for DataTip text, as shown by the string expression for the Floodplain layer in this group. Using a string expression field as the source for HTML-formatted DataTip text may be impractical for some layers, such as raster layers and pinmapped geotagged photos. In these cases you can use the DataTip Prefix and Suffix fields in the Layer Controls window to provide the appropriate HTML markup, as illustrated in the examples to the right.

use CSS style property string flood$; to set text color if (flood.POLY_CODE==5) flood$ = '<td style="color: blue;">500 year floodplain</td></tr>'; else if (flood.POLY_CODE==1) flood$ = '<td style="color: fuchsia;">100 year floodplain</td></tr>'; else if (flood.POLY_CODE==2) flood$ = '<td style="color: red;">floodway</td></tr>'; else flood$ = '<td style="color: green;">not in floodplain</td></tr>'; return '<tr><td class="prefix">Floodplain: </td>' + flood$;

HTML markup can also be included in the Prefix and Suffix fields in the DataTip controls in the Layer Controls window.

Text entered in Prefix field on DataTip panel of Layer Controls

Value is inserted automatically from designated field

Text entered in Suffix field on DataTip panel of Layer Controls

<tr><td class="prefix">Elevation: </td><td> 2393 m</td></tr>

<tr><td colspan=2 style="text-align: center;">

</td></tr>

Example for centered geotagged photo thumbnail as shown above.

MicroImages, Inc. 11th Floor - Sharp Tower 206 South 13th Street Lincoln, Nebraska 68508-2010 USA
Voice (402)477-9554 FAX (402)477-9559 email [email protected] web www.microimages.com August 2007

You might also like