Configure the Look & Feel

After you have successfuly installed LiteRadius on your website and have tested the program using the default "Golf Course Locator" you are ready to transplant the user interface into a webpage of your own design.

Most people simply clone an existing page and start from there. So with your locator landing page in hand do the following:

  1. Add the elements listed below to your landing page.
  2. Customize the look and feel by editing the display templates.

Add in <HEAD> </HEAD>

<script language="JavaScript" type="text/javascript" src="lr_v32/warpcore/literadius/views/map_assets/js_css/xml_g_maps.js"></script>

<script language="JavaScript" type="text/javascript" src="lr_v32/warpcore/literadius/views/map_assets/js_css/elabel.js"></script>

<script src="http://maps.google.com/maps?file=api&v=2&key=INSERT_YOUR_API_KEY_HERE" type="text/javascript"></script>

<link rel="StyleSheet" href="lr_v32/warpcore/literadius/views/map_assets/js_css/literadius.css" type="text/css">

where INSERT_YOUR_API_KEY_HERE is replaced with the key generated in your Google user account (more on Google API keys...).

NOTE: If you move the locator page relative to the LiteRadius installation directory lr_xxx, you will need to modify paths to this resources xml_g_maps.js, elabel.js and locator.css.

You will additionally need to modify the path reference in the beginning of the xml_g_maps.js script itself.

Add in <BODY> </BODY>

Insert onload="load()" onunload="GUnload()" in the html <BODY> tag of your main locator page.

<BODY onload="load()" onunload="GUnload()" >

In the body of your locator page include the following HTML elements where you want the Google Map user interface elements to appear:

<div id="map" style="map"></div>

<input name="addressInput" type="text" id="addressInput"/> <input name="button" type="button" onclick="searchLocations()" value="Search Locations"/>

<div id="data_list" class="data_list"></div>

<div id="templates" class="templates" style=" visibility:hidden;" >

<!-- INFO WINDOW TEMPLATE TABLE -->
<table id="template_info" class=radius_info >
<tr>
<td class=header>name</td>
</tr>
<tr>
<td>address_1<br />
city, state, postal_code<br />
url email street_map</td>
</tr>
</table>

<!-- RESULTS TEMPLATE TABLE -->
<table id="template_table" class="radius_tbl">
<tr>
<td class=header colspan="4" >Locations Near the Point You Entered</td>
</tr>
<tr>
<td>LOCATION</td>
<td>ADDRESS</td>
<td>CITY</td>
<td>TELEPHONE</td>
</tr>
<tr class="test" id="data_row">
<td height="20">name</td>
<td>address_1<br />
address_2</td>
<td>city, state, postal_code</td>
<td>phone</td>
</tr>
<tr>
<td class=footer colspan="4"><a href='javascript:onClick=alert("LiteRadius Locator \nCopyright &copy; 2009 Escape Radius. All Rights Reserved. \nwww.escaperadius.com \nClick OK to contine.")'>&copy;
LiteRadius</a></td>
</tr>
</table>

</div>

For reference to these placements examine the default locator golf_locator.htm file, located in the root directory of your LiteRadius install.

The JavaScript Display Template Parser

A template parsing system is a mechanism which separates HTML design elements from the code that retrieves data. With this framework, a web designer can create the locator interface with only knowledge of HTML, and not even have to worry about the JavaScript code which runs the user interface. This is not to say there are no rules to follow, but it does give a designer considerable freedom in creating an interface that matches the look and feel of their web site.

The basic idea is that the locator web page is broken down into one or more HTML design templates, where each template represents a smaller piece of the locator interface. When the locator page is viewed in a web browser, all the pieces are dynamically assembled and merged with information coming from the database.

LiteRadius utilizes two html <table> templates to display data from a location search.

  1. <!-- INFO WINDOW TEMPLATE TABLE -->
    <table id="template_info" class=radius_info >
    ...
           info window table structure
    ...
    </table>
  2. <!-- RESULTS TEMPLATE TABLE -->
    <table id="template_table" class="radius_tbl">
    ...
           results window table structure
    ...
    </table>

The template tables are stored in a hidden div:

<div id=tpl_cloak style="position:absolute; visibility:hidden;>

<!-- INFO WINDOW TEMPLATE TABLE -->
<table id="template_info" class=radius_info >
...
       info window table structure
...
</table>

<!-- RESULTS TEMPLATE TABLE -->
<table id="template_table" class="radius_tbl">
...
       results window table structure
...
</table>

</div>

When results are returned from the database LiteRadius creates new tables based upon the templates and replace the template parsing tags with corresponding data from location database.

The dynamically created results table is placed in the div element

<div id="data_list" class="data_list"></div>

The infoWindow template is automatically placed in the Google infoWindow pop-up.

Parsing Tags
Key to understanding parsers is the predominant use of template parsing tags. A parsing tag is nothing more than some special text within the template that represents a placeholder for data. If you inspect the template tables you will see the template parsing tags are no more than the names of the fields in the LiteRadius location data table. During the “parsing process”, LiteRadius will replace the parsing tags with data stored in the location database.

For reference here are the available LiteRadius parsing tags.

region_id, location_id, name, address_1, address_2, city, state, postal_code, country, distance, phone, email, url, longitude, latitude, marker, street_map, active_filter, extra_1, extra_2, extra_3, extra_4

For example the template defined above for the results table could look like:

Locations Near the Point You Entered
LOCATION ADDRESS CITY TELEPHONE
name address_1
address_2		 city, state, postal_code phone
© LiteRadius

Dynamic Table Row
Defined within the template radius_tbl is a special row <tr> labeled id=data_row. During a template parse each record returned from a location search will generate a new row in the radius_tbl. The dynamic row element will parsed and appended to the table.

NOTE: Although template parsers provide great flexibility in design they are VERY picky about id syntax. The following ids MUST be defined or LiteRadius will not parse the output data correctly.

  1. div: id=map
  2. div: id=data_list
  3. div: id=tpl_cloak
  4. table: id=template_info
  5. table: id=template_table
  6. tr: id=data_row

For reference to these placements examine the default locator golf_locator.htm file, located in the root directory of your LiteRadius install.

Template Style Sheet
All style aspects of the LiteRadius templates and div containers can be controlled and customized by editing the literadius stylesheet located at:

warpcore/literadius/views/map_assets/js_css/literadius.css

replace with your keywords replace with your keywords replace with your keywords replace with your keywords replace with your keywords replace with your keywords replace with your keywords replace with your keywords