Using JavaScript in Templates

In some cases the data returned by Local Knowledge needs more manipulation than HTML can provide. In these instances, you may need to add some JavaScript to your Web Map Layers site.

Distances are returned in the units used by the CRS. These units may not be suitable, for example large numbers in metres is more acceptable if shown in kilometres or you may wish to show distances in miles rather than kilometres. Distance units can be changed using JavaScript functions, these functions can then be used in templates to show distances in the required format.

The JavaScript shown on this page contains two conversion functions to format distances. These are:

{formatKilometres(Distance)}

{formatMiles(Distance)}

To use these functions a template will need to include either, or both, of them as required:

{formatKilometres(Distance)}

Distances under 1000m will be shown in metres rounded to the nearest metre.

Distances over 1000m will be formatted as kilometres and shown to two decimal places.

{formatMiles(Distance)}

Distances under 100 yards will be shown in feet, over 100 yards but less than 1 mile will be in yards rounded to two decimal places.

Distances over 1 mile will be miles rounded to two decimal places.

Example JavaScript file

An example file named conversion_functions.txt is available from this Help.

To access this file click on conversion_functions.txt to open the file.

Copy the contents of the file to a new text file and save the file to the C:\inetpub\wwwroot\WebMapLayers8.0.xxxx.0\Script folder, name the file conversion_functions.js.

Note: It is important to use a .js extension for this file.

Tagging the JavaScript

Open map.aspx in Notepad or similar ASCII editor, this file is located in the C:\inetpub\wwwroot\WebMapLayers8.0.xxxx.0 folder.

Add the line of code below as shown in blue:

<%@ Page Title="" Language="C#" MasterPageFile="~/NoticeBoard.Master" AutoEventWireup="true" CodeBehind="NoticeBoard.aspx.cs" Inherits="NoticeBoard.NoticeBoard1" %>
				<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
				<script src="script/noticeboard.js"></script>
				<link href="css/normal.css" rel="stylesheet" />
				<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false"></script>
				<%--    <script type="text/javascript" src="script/Chart.min.js"></script>--%>
				<script src="script/conversion_functions.js" type="text/javascript" ></script>
			</asp:Content>

Save map.aspx.

Modifying the Template

Open the template where the conversion function is to be used.

Enter the function name, either {formatKilometres(Distance)} or {formatMiles(Distance)} as required.

The following screens show both conversion functions; {formatKilometres(Distance)} used in the NOTICE_Education Primary (Further Education) template, and {formatMiles(Distance)} in the NOTICE_Education Secondary (Higher Education) template:

 

For this example the results will look like the following:

---

Send comments on this topic.